Simple links at top right

[Sirax]

Hey all,I have a little question about some CSS code...I'm trying to build the HTML/CSS from a PSD layout.Below you can find a link to a picture from the header of the website:IMAGESo that is the header in the PSD layout...This is the link to the site, with the code i've already written:TESTNow as you can see, there is a link at the right corner, HOME CONTACT.My question now is, how is the best way to be W3C compliant for that navigation part?Beacuse this is the code i've used for now:HTML

		<div id="header"><!-- HEADER STARTS -->			<div id="logo">			<img alt="WII Layout" src="images/logo.png" />			</div>			<div id="navigation_header">			<ul>			<li><a href="#">HOME</a></li>			<li><a href="#">CONTACT</a></li>			</ul>			</div>		</div><!-- HEADER ENDS -->

CSS

#navigation_header { float: right; margin-top: 33px; margin-right: 9px; }#navigation_header li { float: left; font-size: 11px; margin-right: 10px; }#navigation_header li a { color: #929497; text-decoration: none; font-weight: bold;  }#navigation_header li a:hover { color: #67b8f9; text-decoration: none; }

But when i use display: block; all stays the same, so i don't know the use of display block.. but i would like to know the best way to make this nav bar W3C compliant.Can someone help me out here please?

[jeffman]

Not sure I understand the request.The HTML and CSS you're showing looks compliant. You may not need as many nested divs as you think you do, but that is a matter of semantics and efficiency, not compliance. Not only does your page validate as is; it validates against a strict doctype also.What exactly do you want to display:block, and why?Are you looking for help with the current system, or are you not sure how to add the next row of menu items as shown in your jpg?

[Sirax]

Well I noticed that most of all the menu's (navigation bars) you see on the web are using display: block; or display: inline;And as you can see I didn't not used that options in CSS, but the menu works also fine.Now I was just wondering if my menu is also W3C compliant by using no display: block; or display: inline; ... and what is the use of this options in a menu then?

[Ingolme]

You use display: block or display: inline to make an element behave in a certain way. If you don't know exactly what they're for, then you shouldn't just use them because you saw them somewhere else.

[dsonesuk]

display: block; in a unordered list menu is usually assigned to the anchor links for using a background image, or colour, which may change when hovered over.using display: block; you can define the area the background image/color will occupy, especially the height (which usually will be the same height as the li tag it is within), but in most cases the width would be fluid to take in account the different length of text used for the anchor link.As display: block; forces elements to a new line or stack above each over, it is usually used with float: left; to bring menu elements together side by side.

[jeffman]

A normal list will line up vertically. You can have it line up horizontally by (1) having the list items display:inline, which you have seen, or (2) having them float, which is what you are using, and which is also common.

[Guest hans]

display: block; in a unordered list menu is usually assigned to the anchor links for using a background image, or colour, which may change when hovered over.using display: block; you can define the area the background image/color will occupy, especially the height (which usually will be the same height as the li tag it is within), but in most cases the width would be fluid to take in account the different length of text used for the anchor link.As display: block; forces elements to a new line or stack above each over, it is usually used with float: left; to bring menu elements together side by side.

Thanks for your explaination guy bcoz I've the same problem with this.