Horizontal Navigation

Which is the best way.

[4css]

Hi everyone. New here, and working on teaching myself how to do css (as well as xhtml, and web graphics).

My question is what is the best way to accomplish horizontal navigation?

Is it better to use display: block; float: left;?

Or, use display: inline; and use an ul to do this?

[grahamstewart]

For any navigation menu (horizontal or vertical) I always use an unordered list (ul) in the html. This makes best sense to me because a menu is a list of links.

I then style it with CSS as required.
Here is a horizontal menu, aligned to the right, with bars between each menu item.

#navmenu { 
   display: block; 
   padding: 0.1em 0; 
   margin: 0; 
   border: 1px solid #000; 
   background-color: #ffa; 
   text-align: right; 
} 
    
#navmenu li { 
   display: inline; 
   padding: 0 1em; 
   margin: 0; 
   border-left: 1px solid #dd6; 
} 

[grahamstewart]

Oh and...

Welcome to WebmasterWorld 4css

:)

[4css]

Hi grahamstewart, thank you for that wonderful welcome! :)

For any navigation menu (horizontal or vertical) I always use an unordered list (ul) in the html. This makes best sense to me because a menu is a list of links

This makes sense to me as well.

I had sort of liked the idea of the block float left as it seemed to be a bit on the uncomplicated side for me.

I have been playing with the way that you have it shown in your code example. The only difference that I find in what you have and what I had read in tutorials is the way that you have it layed out.

#navmenu li { display: inline; padding: 0 1em; margin: 0; border-left: 1px solid #dd6; }

How I had seen it in the tutorials was #navmeunu ul li {}, Which unless I placed this information in a div, it would not work for me. Which, btw, If I understand correctly you don't need to have a div for this to work out?

I think that the problem lays in understanding the inheritance and descendant selectors for me.

[grahamstewart]

If I understand correctly you don't need to have a div for this to work out?

Correct. In my example navmenu was the id of the

<ul>

.

[mipapage]

Hey 4css, Welcome to WebmasterWorld.

You don't need a div for this because like a <div>, a <ul> is a block level element, and can act nicely as a container for your links. Here's the spec's on block-level and inline elements [w3.org].

For both xhtml and css it's important to know the difference between the two.

If your code is going to validate, you need to know that you cannot wrap a block level element with an inline element (i.e. no <a...><div>...</div></a>, for example).

In addition, these two classes of elements are treated differently in some cases when using CSS.

[4css]

If your code is going to validate, you need to know that you cannot wrap a block level element with an inline element (i.e. no <a...><div>...</div></a>, for example).

This part I do understand, though it took a bit since I had lots of searching to do to understand some things that I was reading and learning. Block and inline make sense to me.

Now, If I have a header div, which has the color etc.. of the background of the navigation. How do I then proceed?

I'm truly not a ditz, lol, just at a point where all this information is swiming in my head and not settling down, if that makes sense.

BTW, thank you mipapage for the welcome. I hope to learn tons in here. I totally love CSS.