CSS List Tips

CSS lists are a great way to create fast loading, search engine friendly pages without using javascript.
Recently I redesigned a new site that needed 2 lines of navigation links at the top of the page. One line wouldn’t cut it because it would extend beyond the width of the web page. Visitors would have to scroll horizontally to view the page which essentially means they will immediately click elsewhere.

Here’s the original CSS code:


#topnav{
text-align: center;
}
#topnav ul{
padding-bottom:5px;
padding-left:15px;
padding-right:15px;
padding-top:5px;
margin: 0;
background-color:#316531;
}
#topnav ul li{
display: inline;
padding: 0;
margin: 0;
}
#topnav ul li a{
font-size: 10px;
color: #FFFFFF;
padding: 0 5px 0 5px;
text-align: left;
width: 9em;
}
#topnav ul li a:hover{
color:#FFFFCC}


Here’s the original XHTML code:


<ul>
<li><span class="textwhite">[</span><a href="#">MAIN</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">SEARCH LISTINGS</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">OLNEY MAP</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">BUYERS AGENTS</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">OLNEY SCHOOLS</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">SHOPPING IN OLNEY</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">OLNEY COMMUNITIES</a><span class="textwhite">] </span></li>
<br />
<li><span class="textwhite">[</span><a href="#">HOME STYLES</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">HOME LOANS</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">SELL YOUR HOME</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">SITE MAP</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">CONTACT HOMEFINDERS.COM</a><span class="textwhite">] </span></li>
<li><span class="textwhite">[</span><a href="#">EMAIL HOMEFINDERS.COM</a><span class="textwhite">] </span></li>
</ul>


It did not validate because of the br tag.
Also it looks messy because of all the classwhite spans.

The Solution

Take the br tag out and have two separate unordered lists, one beneath the other.

Here’s the correct code that validated:

CSS

I simply edited #topnav to get rid of the classwhite spans.


#topnav{
text-align: center;
font-size: 10px;
color: #FFFFFF;
}
#topnav ul{
padding-bottom:5px;
padding-left:15px;
padding-right:15px;
padding-top:5px;
margin: 0;
background-color:#316531;
}
#topnav ul li{
display: inline;
padding: 0;
margin: 0;
}
#topnav ul li a{
font-size: 10px;
color: #FFFFFF;
padding: 0 5px 0 5px;
text-align: left;
width: 9em;
}
#topnav ul li a:hover{
color:#FFFFCC}


XHTML


<ul>
<li>[<a href="#">MAIN</a>] </li>
<li>[<a href="#">SEARCH LISTINGS</a>] </li>
<li>[<a href="#">OLNEY MAP</a>] </li>
<li>[<a href="#">BUYERS AGENTS</a>] </li>
<li>[<a href="#">OLNEY SCHOOLS</a>] </li>
<li>[<a href="#">SHOPPING IN OLNEY</a>] </li>
<li>[<a href="#">OLNEY COMMUNITIES</a>] </li></ul>
<ul>
<li>[<a href="#">HOME STYLES</a>] </li>
<li>[<a href="#">HOME LOANS</a>] </li>
<li>[<a href="#">SELL YOUR HOME</a>] </li>
<li>[<a href="#">SITE MAP</a>] </li>
<li>[<a href="#">CONTACT HOMEFINDERS.COM</a>] </li>
<li>[<a href="#">EMAIL HOMEFINDERS.COM</a>] </li>
</ul>


That’s it!

Now you know the how to create 2 unordered lists beneath each other colored white on a green background that hover to yellow and will validate correctly for XHTML.