HTML5 unsorted list issue

[Skyn2]

He guys.
As you guys suggested I am working with HTML5 at the moment. I am using dreamweaver.
Now I have a problem I don't really now know to solve it.

I want to make an easy navigation
I use this HTML code


<ul class="cat-meta">

<li><a href="index.html">Home</a><li>
<li><a href="about.html">About</a><li>
<li><a href="services.html">Services</a><li>
<li><a href="products.html">Products</a><li>
<li><a href="contact.html">Contact</a><li>
</ul>


The problem is: They are beneath eachother and I have no idea why they aren't behind eachother like I want them too.

I didn't use a br, as u can see. No P? What am I missing?

If this is in the wrong forum, i am sorry

 

[Phreaddee]

http://www.webdesignforum.com/10971-tutorial-css-menu-basic.html

 

[Skyn2]

Thank you for the link.

Shouldn't the link work without the CSS?

The link is great, but it is not what I am looking for.
It's lined up the way I want, but I don't want a 'fixed menu'.

I am asking is: How can I make my menu go like:
Home Product Contact

instead of:

Home
Product
contact

What CSS rule is it that does this?

 

[conor]

you need to apply this rule to the lis:

ul li{ display:inline }

 

[Phreaddee]

of course the css is needed, otherwise its just unstyled html

 

[DHDdirect]

You also need to close your li tags properly such as : </li>

 

[jumpingspider]

You also need to close your li tags properly such as : </li>

Yeah right. This is a little matter but if you missed this surely it will ruin your style!

 

[Skyn2]

<ul class="cat-meta">

<li><a href="index.html">Home</a><li>
<li><a href="about.html">About</a><li>
<li><a href="services.html">Services</a><li>
<li><a href="products.html">Products</a><li>
<li><a href="contact.html">Contact</a><li>
</ul>

I did not miss that ;-)

If I look in the CSS:

.cat-meta {
display: inline;
}

But still, they are not behind eachother, but beneath eachother?

 

[Phreaddee]

Again close your li as </li>

And target the li NOT the ul.
.cat-meta li {
Display:inline;
}

 

[Skyn2]

Yes. its closed in the code. Sorry for the confusion

 

[Skyn2]

He that worked.
So i need to target the list within the class cat-meta.

I was targeting the cat-meta.
Why doesn't the CSS understand that?
The list is still within the same class as I targeted first?

 

[conor]

Why doesn't the CSS understand that?

CSS isn't smart, it does exactly what you tell it to and can't predict all situations of human error. ie If the rules aren't applied to the correct element they will have a different effect than desired.

 

[Phreaddee]

Generally speaking for a nav list you would have four css selectors
ul
ul li
ul li a
ul li a:hover

Giving your ul display:inline wouldnt affect the ul li as their default style is inline:block, if you want your links to have a particular style you would target ul li a, likewise a style pertaining to the hover would only work on the ul li a:hover

Without specifity your css uses the defaults. Which vary based on the browser (unless you use resets) this obviously is not preferred.

 

[Skyn2]

Because I use ul li a, CSS attacks the element within li and ul.
What I don't understand, is if I use inline: block for UL, why it doesnt attack everything in the UL?

Wouldnt it use the CSS inline: block, instead of the default if I give it that code?

Is it because it's too unspecific?

Generally speaking for a nav list you would have four css selectors
ul
ul li
ul li a
ul li a:hover

Giving your ul display:inline wouldnt affect the ul li as their default style is inline:block, if you want your links to have a particular style you would target ul li a, likewise a style pertaining to the hover would only work on the ul li a:hover

Without specifity your css uses the defaults. Which vary based on the browser (unless you use resets) this obviously is not preferred.

 

[Phreaddee]

ul {display:block;} would make the list behave like a block element (ie, stack on top)
ul {display:inline} would make the list behave like an inline element (ie not break to new line)
However the list items (ul li) would still be display:block and still stack on top as you havent assigned a style to them. It just doesnt flow down like that. Its like suggesting you put display:inline on the body tag and assuming that everything contained within the body to therefore act as inline elements.
It doesnt work like that. And for good reason too. Everything needs its own style assigned to it.
Seriously read the initial tutorial link, it explains this concept much better than i can.
I would also do a google search and find out what (by default) are block element and what are inline elements. <span> -inline, <div> - block for instance.