Improve Your Rankings with a Sitemap That Works: The CSS - Finishing Off the Selectors

(Page 3 of 6 )

Again, the page has improved, but there is still a lot that can be done with it.  The following ID selectors will finish off the appearance aspects of the page and add the roll-over effects mentioned earlier:

#navigation {
  border-width:0;
  background-color:ffffff;
}

#navigation ul {
  width:100%;
  margin:0 0 0 0;
  padding:0;
  list-style-type:none;
}

#navigation li {
  margin: 0 0 5 0;
}

#navigation a {
  display:block;
  color:003399;
  background-color:ffffce;
  text-decoration:none;
  border-width:1;
  border-style:solid;
  border-color:ffcc00;
  padding:0 5 0 5;
  width:100%;
}

#navigation a:hover {
  background-color:ffcc00;
  color:003399;
}

Now, you just need to put just the lists themselves in their own <div id="navigation"> elements.  Do this, save the files and take a look.  Obviously, the color scheme used here is just an example.

If your site hierarchy includes more than 2 levels, you can easily work this logically into the existing style with just a few more selectors.  Say the House music page links to three sub pages displaying different sub-genres of music.  Just add the following selectors to your CSS file:

#navigation ul h3 {
  font-size:12;
  margin:0 0 0 0;
  font-weight:normal;
}

#level2 {
  width:70%;
}

Then add the following code to the HTML file, directly beneath the page that links to the sub pages:

<li id="level2"><a href="http://deephouse.htm"><h3>Deep House</h3></a></li>

<li id="level2"><a href="http://hardhouse.htm"><h3>Hard House</h3></a></li>

<li id="level2"><a href="http://proghouse.htm"><h3>Progressive House</h3></a></li>

Next: The Improved Look of the Sitemap >>
 

More Search Optimization Articles
More By Dan Wellman

Comments On: Improve Your Rankings with a Sitemap That Works: The CSS

· Hi all,This artile follows on from the previous Sitemap SEO article and disusses...    · font-size:12; - 12 what? padding:0 5 0 5; - 5 what?feet? points?...    · lol, you are right to queery it, I apologise for the lack of precision. I thought...   >>> Post your comment now!