Unordered Lists and CSS
 

Hi, I am working with the layout of an unodered list in CSS at the moment but i guess this is because i am not entirly sure of what I am searching for that I can not find the result. but basically, i want to change the line height between earch list item, so not each line of text but each list item, is this possible and if so how?

Many thansk
Andy

Re: Unordered Lists and CSS
 

li {
margin-bottom: 4px; /* Example amount */
}

I think that's it.

Re: Unordered Lists and CSS
 

Aha, didnt realiser the margin-bottom worked in that way, when im rich and famouse will buy myself a blooming ood book on CSS

Sorry cant rep you so soon richard, but mucho apreciato..
__________________

<removed for being a bloomin fool>

Re: Unordered Lists and CSS
 

Indeed you are... :D
ul {} would affect the entire list whereas li {} would affect each individual list item.

Re: Unordered Lists and CSS
 

damn you read it richard beofre I could retract my foolish comments... :)


goes back with large :dunce: hat on

Re: Unordered Lists and CSS
 

Another subtle nuance of CSS..
UL LI would specify only List elements in an unordered list - you can als dig down to nested lists with LI LI

I just grabbed the stylesheet I was messing around with for a little redesign of one of my sites - messy, and you may wonder at some of the options, but it does demonstrate element nesting - remember, seperated by commas, is "this, this and this", while without commas, your describing a nested element - I'm guessing anything not explicitly covered uses the deepest one that encompasses it.
Another trick, combining the element and class, so that a DIV or a SPAN can both be given class=indent, and will react differently - obviously, this is for hand-edited HTML, where I just want to specify the effect I'm after, and have it applied appropriately.

/* CSS1 Style Sheet */
BODY, TABLE, TD { font: 10pt "Comic Sans MS", Arial, Sans-Serif }
BODY SMALL { color: #990000 }
H2 { font-size: 170% }
H1 { font-size: 200% ; text-align: center }
TD { padding: 1pt 4pt }
LI A { font-size: 120% }
.important, OL LI { color: #CC0033 }
LI LI { color: #000000 }
.comment, LI LI LI { color: #006600 }
.aside, LI LI LI LI { color: #996600 }
DIV.indent { margin: 0 0 1ex 4em }
SPAN.indent { margin-left: 4em }
.seperator { font-size: 120% ; color: #CCCCCC ; background-color: #006666 ; padding-left: 1ex }
.stripe { background-color: #CCCCCC }
SELECT { background-color: #99CCFF }
A:hover {background-color: #99FFCC }
TD A:hover {background-color: white }