List Items and Bullets (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Stuey -> List Items and Bullets (5/28/2003 9:57:22)

Hi all,

I want to do a bulletted list on a page, I want the text to be normal line spacing and normal font but the gap between the bulletted lists to be bigger

know what I mean?



  • 1list list list
  • 2llllllllllllllllllllllllllll llllllllllllllll lllllllllllllllll llllllllll llllllllllllllllllllllll lllllllll llllllllllllllllll llllllllllllllll llllllllllll llllllllllll lllllllllll lllllllllllllllllllll llllllll llllllll llllllllllllll llllllllllllll lllllllllll llllllllll lllllllll lllllllllllllllll llllllllllllllll lllllllllllll llllllllllllllllll llllllllllll lllllllllllll llllllllllllllll lllllllllllll llllllllllllll lllllllll llllllllllllll llllllllllllllllllllllllllllll lllllllllllllllllll
  • 3list



I' m trying to get more space between 123 but keep the line 2 text sensiblely close

Stuart

<edit>I just updated the title to reflect the topic a little more specifically.</edit>



bobby -> RE: Lists & bullet points (5/28/2003 13:21:45)

Have you tried playing with padding or margin settings in your style?

Or create a custom GIF image for your bullets with a little extra transparency on top...



pageoneresults -> RE: Lists & bullet points (5/28/2003 22:17:53)

In your external css file...

li {
margin-bottom: 5px;
}

Adjust the margin to satisfy your requirements.

The line 2 text that you refer to (multiple lines for the one list item) can be controlled through the use of line-height:

li {
margin-bottom: 5px;
line-height: 16px;
}

Default line-height is usually sufficient. If you want to insure compatibility and similar appearance across browsers, the line-height feature is useful. Remember that line-height is equivalent to leading if you design for print. It is the space between lines.

There is also letter-spacing: Let' s say you wanted to add a special effect to your bold headlines, you might do something like this...

p.head {
font-weight: bold;
letter-spacing: 3px;
}

The above code will add 3px of l e t t e r s p a c i n g or what is referred to as tracking if you design for print. It is the space between letters.

All sorts of neat things you can do!



Stuey -> RE: List Items and Bullets (5/29/2003 9:54:16)

yeah I' d worked that out.... well sort of but I actually convicnced myself there was a proper setting

Thanks all

stuart



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
1.515625