0

i cant make my list float to the left. i want to create a horizontal navigation bar. i have everything set, but it wont float to the left. help, please

ul. nav {   margin: 0;   padding: 0;   list-style: none;   width: 72em;   background: #FAA819  repeat-x; } 

ul. nav li {   float: left; }  // why it wont work?

ul.nav {   margin: 0;   padding: 0;   list-style: none;   width: 72em;   overflow: hidden;   background: #FAA819 url(img/mainNavBg.gif) repeat-x; } 


ul.nav a {   display: block;   padding: 0 3em;   line-height: 2.1em;   text-decoration: none;   color: #fff; } 

ul.nav a {   display: block;   padding: 0 2em;   line-height: 2.1em;   background: url(img/divider.gif) repeat-y left top;   text-decoration: none;   color: #fff; } 


ul. nav .first a {   background-image: none; } 


ul.nav li:first-child a {   background: none; } 

ul.nav a:hover, ul.nav a:focus  {   color: #333; }

HTML

<ul class="nav">   <li><a href="home.htm">Home</a></li>   <li><a href="about.htm">About</a></li>   <li><a href="news.htm">News</a></li>   <li><a href="products.htm">Products</a></li>   <li><a href="services.htm">Services</a></li>   <li><a href="clients.htm">Clients</a></li>   <li><a href="case-studies.htm">Case Studies</a></li> </ul>

Edited by NewOrder: n/a

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Agarsia
1

remove the spaces here: "ul. nav" it has to be "ul.nav"

ul.nav {   margin: 0;   padding: 0;   list-style: none;   width: 72em;   background: #FAA819  repeat-x; }

ul.nav li {   float: left; }  // why it wont work?

ul.nav {   margin: 0;   padding: 0;   list-style: none;   width: 72em;   overflow: hidden;   background: #FAA819 url(img/mainNavBg.gif) repeat-x; }


ul.nav a {   display: block;   padding: 0 3em;   line-height: 2.1em;   text-decoration: none;   color: #fff; }

ul.nav a {   display: block;   padding: 0 2em;   line-height: 2.1em;   background: url(img/divider.gif) repeat-y left top;   text-decoration: none;   color: #fff; }


ul.nav .first a {   background-image: none; }


ul.nav li:first-child a {   background: none; }

ul.nav a:hover, ul.nav a:focus  {   color: #333; }
Votes + Comments
Thank you
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.