I'm a Drupal PHP/MySQL web developer, living and working in Seattle, WA.
My professional interests are optimization, MySQL, front-end usability, efficient coding, and making Drupal do cool things.
Learn more, contact me, or find me online at:
CSS: How to Style Perfect HTML Lists (<ul><li>, <ol><li>...)
Here is an example of a default HTML list with no CSS styling:
- This is what I consider an ugly HTML list.
- Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
- There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
- Spacing Issues:
- There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
- The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
- Custom bullet images: Incorrect alignment across browsers.
- Let's fix this.
Here is an example of a styled HTML list:
- This is what I consider a beautiful HTML list.
- Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
- There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
- Spacing Issues:
- There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
- The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
- Custom bullet images: Incorrect alignment across browsers.
- Let's look at the code, shall we?
CSS
ul.niceList { margin-left:0em; padding-left:0.2em; margin-bottom:1em; } ul.niceList li { background:url(images/bullet.gif) 0em 0.5em no-repeat; /* change background em accordingly */ padding-left: 0.8em; list-style: none; } .niceList ul li { background-image:url(images/bullet_child.gif); } ol.niceList li, ul.niceList li { margin-bottom:0.5em; } ol.niceList { margin-left:1.5em; padding-left:0px; } .niceList ol li { list-style:decimal; background-image:none; padding-left:0em; }
Do not use list-style-image! This property is not cross-browser friendly and has alignment issues. Take a look below:
Firefox aligns the bullets too south, while IE7 aligns them too north, and neither is centered. WTF?!! The alternative is "background," which gives us more control and predictability.
If you just want to remove the left margin and add padding between list items instead using a customized bullet image, less code is needed:
CSS
ul, ol { margin-left:1.5em; padding-left:0px; } li { margin-bottom:0.5em; }
- 62296 reads
Comments
indent on mulitline li
How do you keep your list item indented if it falls to the second line?
Q: how to add indent on
Q: how to add indent on following list items
A: add the padding or margin to the "ul.class_name li"
example:
ul.class_name li
{
maring-left:15px; #<- the indent
}
hi
hi
whats up
whats up
not much
not much
ilsoie
Yes shsi is a nice bogl sh= ic le
excellent panorama & good
excellent panorama & good work on the styles too.
Excellent
Hi Jonah,
This is fantastic! Not easy to find information about creating beautiful lists using CSS. It's nice to see that it's not just designerds (myself included) who understand the importance of a clean looking presentation of information.
One quick question (if you don't mind). What part of the code is keeping the custom bullet image vertically centered / aligned with the text next to it? As I started adjusting padding, my bullet has started to shift vertically and is not perfectly aligned any more -- it's now slightly raised.
Cheers,
Kevin
thanks
thanks! it helped me so much :)
Post new comment