Hi All
Been lurking for a while and finally got round to posting. So here goes;
One advantage of the unordered list approach would be that you can eliminate quite a bit of your code (moving it to the css), as well as it being maybe more semantically correct (it is a 'list' of links after all).
Go for something like:
<ul id="navbar">
<li><a href="/index.htm" title="Home">Home</a></li>
<li><a href="/press-room/press-room.htm" title="Press Room">Press Room</a></li>
<li><a href="/sitemap.htm" title="Site Map">Site Map</a></li>
<li><a href="/contact.htm" title="Contact Us">Contact Us</a></li>
</ul>
Note that its alot shorter. To get your custom bullets:
ul#navbar li {
list-style-image: url('url-of-image.gif');
}To get them to form a horizontal line:
ul#navbar li {
display: inline;
}and style the links themselves with:
ul#navbar li a {}
ul#navbar li a:hover {}
Rather than assigning lots of classes to individual links try use the cascading part of the style sheets - so 'ul#navbar li a' means (read it backwards) a link inside a list item inside an unordered list with the id of navbar.
Another quick point that took me a while to get round to (ie. I kept confusing myself!). Try use things like mainnavbar or primarynavbar for the id's. If you go for topnavbar, and then later decide to put it on the left or right your styles get confusing!
Hope that helps!
Gareth
[EMAIL PROTECTED] wrote:
Good morning mates,
I have a navigation bar with four links that uses a style sheet to control it's placement and presentation at the top of my site, but I did not place them in a Unordered List because the links naturally align themselves horizontally.
Therefore, I thought I'd ask if this is considered semantically correct? I've eliminated unnecessary markup, and used a style sheet to control the menu's presentation. The id controls the placement, and the class styles the links:
<div id="container"> <a href="/index.htm" class="topnavbar" title="Home">Home</a> <img src="/Images/markers/bullet.gif" width="8" height="8" alt="" /> <a href="/press-room/press-room.htm" class="topnavbar" title="Press Room">Press Room</a> <img src="/Images/markers/bullet.gif" width="8" height="8" alt="" /> <a href="/sitemap.htm" class="topnavbar" title="Site Map">Site Map</a> <img src="/Images/markers/bullet.gif" width="8" height="8" alt="" /> <a href="/contact.htm" class="topnavbar" title="Contact Us">Contact Us</a> </div>
Respectfully, Mario S. Cisneros
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
