While following a tutorial on tuts+ premium, I encountered an issue when the series creator failed to include an exercise file. Despite copying everything from the tutorial video into a CSS document accurately, the CSS list items simply would not float left as intended. Here is the HTML code snippet in question:
<!doctype HTML>
<html>
<head>
<title>CSS3 Transitions</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/lesson02.css" />
</head>
<body>
<nav class="main-nav">
<ul class="top-nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">products</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</body>
Additionally, here is the CSS code that was copied from the tutorial:
/********** TOP NAV *************/
nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%
}
.top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
width: 100px;
}
.top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
}
.top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
}
The necessary Normalize CSS file referenced in the tutorial can be accessed here.
If anyone has any insights or assistance, it would be greatly appreciated.