Lists in CSS

[CompiledMonkey]

I have an unordered list that I would like to display without icons to their left and in a horizontal way instead of vertical. Normally I’d use a table with X number of columns and just put the links in there. I would like to get away from that approach and learn to do this with CSS instead. Can anybody help me out?

[Paul O'B]

Hi,

To stop the bullet showing use list-style-type:none in the ul declaration.

ul {
list-style-type:none;
margin:0;
padding:0;
}

Also set padding and margins to zero to even moz and ie up. (Or explicitly set them as required)

To display the list horizontally you will need to either float the list items left or use display:inline.

If you use display:inline then in good browsers you will be unable to apply height and widths because an inline element cannot hold widths or heights. You will then need to add padding to give the element some width and height instead.

If you float the element you can apply width and height as required and this also allows you to easily set an anchor to display:block so that the whole list item rolls over.

Here are example sof every type of list you will ever need.


http://css.maxdesign.com.au/listamatic/


There is even an automatic list generator here.

http://www.accessify.com/tools-and-w...st-o-matic.asp

I should play around with the above links until you understand them and can apply them as required.

Hope that helps.

Paul

[cyberian]

This is a great place to learn about lists:

http://css.maxdesign.com.au/listamatic/

It shows you examples of vertical and horizontal lists - with and without icons/bullets. It also shows you the code, which is hugely helpful. Check it out.

Edit:


DOH! Paul beat me to the punch.

[Paul O'B]

Great minds think alike

[CompiledMonkey]

Great link guys, thanks!