16-02-2005, 12:40
|
#1
|
|
Inactive
Join Date: Oct 2003
Location: Portsmouth
Age: 48
Posts: 1,689
|
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
|
|
|
16-02-2005, 13:07
|
#2
|
|
Inactive
Join Date: Jun 2003
Location: Los Angeles, CA
Age: 47
Posts: 6,343
|
Re: Unordered Lists and CSS
li {
margin-bottom: 4px; /* Example amount */
}
I think that's it.
|
|
|
16-02-2005, 13:25
|
#3
|
|
Inactive
Join Date: Oct 2003
Location: Portsmouth
Age: 48
Posts: 1,689
|
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>
|
|
|
16-02-2005, 13:26
|
#4
|
|
Inactive
Join Date: Jun 2003
Location: Los Angeles, CA
Age: 47
Posts: 6,343
|
Re: Unordered Lists and CSS
Indeed you are... 
ul {} would affect the entire list whereas li {} would affect each individual list item.
|
|
|
16-02-2005, 13:27
|
#5
|
|
Inactive
Join Date: Oct 2003
Location: Portsmouth
Age: 48
Posts: 1,689
|
Re: Unordered Lists and CSS
damn you read it richard beofre I could retract my foolish comments...
goes back with large  hat on
|
|
|
16-02-2005, 21:19
|
#6
|
|
Inactive
Join Date: Mar 2004
Services: BB:M, TV:XL, Phone:M, Loyalty
Posts: 2,516
|
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 }
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
All times are GMT. The time now is 06:14.
|