CODEWITHSUNDEEP
htmlcss
Limbo Gene
Limbo Gene

Reputation: 19

CSS3 List Navigation Not Floating to Left

I was doing a tutorial on tuts+ premium when the person who uploaded the series did not upload an exercise file. When I copied everything from his tutorial video into a CSS document EXACTLY, the CSS list items won't float left. I tried and tried everything but I couldn't. Here is the HTML:

<!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>

And the copied CSS code 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 other CSS file can be found here which was found on the tuts+ premium tutorial too: Normalize CSS v2.1.1

Please I need help if anyone

Upvotes: 1

Views: 40

Answers (1)

Aziz
Aziz

Reputation: 7783

The menu items are indeed floated, however, their parent container is restricted to a width of 100px thus making them wrap under each other.

Just remove width: 100px from .top-nav

/********** 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;
}

.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;
}
<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>

Upvotes: 1

Related Questions