How to make the list <ul> next?

Question

I am a new web designer and am creating a website that has a list like this

Look at this image (I cannot add the image to the question, bcoz I need 10 rep)

http://shup.com/Shup/379626/11068201228-My-Desktop.png

alt text http://stashbox.org/947532/11068201228-My-Desktop.png

How to make such a list if I want to keep one <ul> Is this possible?

Answer 1

This is possible by floating all your li elements and setting the width of your ul and li elements. Display order will be
12
3 4
5 6
if you use this method.

Answer 2

Here is the simplest CSS you can use to accomplish what greg0ire says:

 <ul class='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> .myList { width : 300px; } .myList li { float: left; width: 150px; } 

Of course, as already mentioned, this will not create a format similar to a newspaper column. Before jumping out, he will swim from left to right.

For multi-column formats, you need to either use a device that supports CSS3 or use javascript.

In newer versions of Firefox, this CSS may work:

 .myList{ -moz-column-count:3; } 

Answer 3

Check this out to do multi-column lists: http://www.alistapart.com/articles/multicolumnlists/

For custom markers, the specific style property that needs to be changed is as follows:

 list-style-image: url(someimage.gif); 

See this link for more details: http://www.alistapart.com/articles/taminglists/

Find the Markers section.