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.

Comments

  1. Great post. Really enjoyed it. I really like your blog too.

  2. CSS “Cascading Style Sheets” Lessons
    css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

  3. Hi ,
    It looks great. I am working on a masterpage in using sharepoint designer. I used sitemap file to enter these values and sitemapdatasource in sharepoint designer. I would like to show grouped flyouts when I mouse over on a topnav bar item. But with the above procedure I couldn’t show them. I can show them as subtags , but I do not have any sub tags. I have 30 links and all are saame level and I need to show them as two columns/gropued flyouts on mouseover. I am wondering how to use this UL, and LI tags and populate my values in sharepoint topnav bar. I would be glad if someone take me out from this problem.

Leave a Reply to css map Cancel reply

*