|
CSS Tutorials > Making Lists Look Nicer with CSS |
Making Lists Look Nicer with CSSStandard HTML lists are usually pretty boring - a few indented lines with bullets or numbers down the left side. However, with the power of CSS, you can really get creative with your lists! Read on for details... Controlling indentationCSS allows you to have more control over the level of indentation of the list items. This is great for those times when your lists start veering across the page, ruining the nice, perfectly-aligned look of your design. You can adjust the amount of indentation that a list uses by setting both the margin-left and padding-left properties for the ul selector. For example:
ul
{
margin-left: 0;
padding-left: 0;
}
Note that you have to specify both margin-left and padding-left for this to work properly across all browsers. So let's create a simple list inside a dark rectangle: <div style="background-color: #3C8B8B"> <ul style="margin-left: 0; padding-left: 0;"> <li>Rover the dog</li> <li>Fluffy the cat</li> <li>Jack the rabbit</li> </ul> </div> This will produce the following list:
The trouble is - our list bullets are outside the rectangle - invisible even, on some browsers! This is because, by default, a list item's bullet is outside the list item's CSS box. We can fix this problem by adding a bit of padding to the list: <ul style="margin-left: 0; padding-left: 30px;"> This produces the following effect:
That's more like it! So now we can control exactly how far our lists indent, for example: <ul style="margin-left: 0; padding-left: 5px;">
Using different bulletsAnother great thing you can do with CSS is change the style of bullets. This is achieved using the list-style-type property. For example, to change the bullets to squares: <ul style="list-style-type: square; margin-left: 0; padding-left: 30px;">
There are also many types of numbering systems you can use for numbered lists. For example: list-style-type: lower-roman;
list-style-type: lower-alpha;
list-style-type: decimal-leading-zero; (Only works on some browsers)
For a full list of bullet types that you can use in lists, see the W3C CSS Spec. Using images for bulletsYou can even use images for list bullets!
list-style-image: url("images/smiley.gif");
Inline listsAnother really useful thing you can do with CSS is create inline lists, using display: inline. For example:
ul, li
{
display: inline;
}
Now that the list is not constrained to being displayed in a vertical row, you have a lot more control over the layout. For example, by adding in a few borders and background colours, you can give the list items a "button" effect:
ul, li
{
display: inline;
}
li
{
border: solid 1px white;
padding: 5px;
margin: 5px;
background-color: #339999;
}
![]() Figure 7-66. Floated text without an explicit width7.6.1.1. Backgrounds and floatsThere are many other interesting effectsassociated with floating elements. Take the example of a shortdocument, composed of no more than a few paragraphs andH3 elements, where the first paragraph contains afloated image. Further, this floated image has a right margin of five You can see that, while the basic HTML for our list has remained the same throughout this tutorial, we have managed to change the look of the list fairly radically through the use of CSS. Pretty cool! This has hopefully given you a taste of some of the neat things you can do with CSS and lists. For more info on formatting lists with CSS, see the W3C Specification. The EndThat's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of my and other webmasters. If you would like to offer us feedback on this or any of the tutorials, please contact us. Have fun! |

You'll notice the "pulling" effect of negative topand bottom margins. This is really no different from the way in whichnegative horizontal margins cause an element to push outside of itsparent. Consider:
DIV {width: 400px; border: 1px solid black;}
negative margins on floats somewhat limited. Hanging floats are
probably fairly safe, but trying to push an element upward on the
page is a generally bad idea.
There is one other way for a floated element to exceed its
parent's inner left and right edges, and that's when the
floated element is wider than its parent. In that case, the floated
element will simply overrun the right or left inner
edge -- depending on which way the element is floated -- in its
best attempt to display itself correctly. This will lead to a result
WARNING
Note that none of this applies to table elements.
CSS2 introduces new properties and
behaviors for handling tables and table content, and these new
features behave in ways fairly distinct from either block-level or
inline formatting. See Section 10.1, "Changes from CSS1" for an overview.
8.4.1. Line Layout
8.4.2.1. Generating a line box
Here arethe steps a user agent has to go through in order to generate a linebox. First, for each inline nonreplaced element (or string of textoutside of an inline element), the font-size isused to determine the initial content-height.Thus, if an inline element has a font-size of15px , then the content-height starts out as
floated so far up that it intrudes into a paragraph that has alreadybeen displayed by the user agent.
In this case, it's up to the user agent, but the CSSspecifications explicitly state that user agents are not required toreflow previous content to accommodate things that happen later inthe document. In other words, if an image is floated up into aprevious paragraph, it may simply overwrite whatever was alreadythere. On the other hand, the user agent may handle the situation byflowing content around the float, even though doing so isn't