View Full Version : Problems With Lists

07-03-2011, 07:43 AM
Please can anyone please explain to me how lists work?

I can understand why people have a style for the ul..

I can understand what li is for...

So why would anyone write: ul li as well?

Whenever I do this, the whole list goes wrong. I can only seem to make it work by doing the ul and li seperately. I can't work out what attributes should go into li and which go into ul li because to me, li and ul li represent the same thing. I just don't understand this at all.

Also - what does 'display:block' mean and why is it used in lists when making menus?

If I can possibly get to understanding these things, then I should be able to make my own lists without blindly stabbing around in the dark.

Can anyone please help? Thanks.

07-03-2011, 07:52 AM
"ul li" is a directing the "li" tag OF the ul. Similarly in a sequence structure:

<div class="wrap">
<div id="header"></div>
<div class="below">
<div id="header"></div>

.wrap #header { } is directed toward the "header" of the "wrap". Changes will not be made to the #header within the "below".


display: block; will maintain the width of the parent tag. Additionally, you can set a width and height on a "block" tag, whereas on an "inline" tag you cannot.

Inline tags: a, span, input, img
Block tags: h1, p, div, fieldset, just about every tag



The p will fill the width of the <div>. however the "inline" "a" will not.

The <p> tag will fill its parent (which is the body)

The <a> tag will not.

You use display: block; for the a tag so that you can set a height and width for it. Therefore, it fills the li. In effect, it has a width and height, http://chris.tpmo.im/miami54stinks/ Therefore, when you hover over the nav on this website, you are hovering over a width and height, not just the text.

07-03-2011, 08:32 AM
You seem to have sorted my link hover problem out intuitively. That's brilliant - and thank you very much, Sammy!

I'm still a bit lost on the ul li bit though... Maybe I need to read that over again. Thanks.

07-03-2011, 12:01 PM

I had the same problem when I first started out with CSS. I could find code to do what i wanted and had a brief knowledge about it but did not know why things worked. Hopefully this helps.

If you styled a link (Li) in css - all further lists you use will be styled with this same style.

If you style a link Li in a UL all links in ul's will be styled the same.

If you style a particular div's ul li then only those links within that div are styled.

#weblinksmainmenu ul li
font-family: georgia;
font-size: 0.8em;
list-style-image: url('links.png');
margin-left: 30px;
padding: 0px;
text-align: left;
this styles only my links that are in the weblinksmainmenu div :)

Does this help?