Having trouble with a layout , css, UL LI

I have a page I need help with.

It is in a Wordpress site I own.

I do not want to use a table for the layout I need because it adds elements to the page I do not want i,e, borders etc

I want to end up with 2 rows of 5. This is what I have so far.

Anybody willing to help me out?

<ul>

<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
<li><img src="image.gif" border="0" align="left">Watch conversions go through the roof with this fantastic new Apple laptop offer.</li>
</ul>

 

One option is to set your list items to display inline at a width of 18 % and a 1% -left margin.

First 5 will display on one row and the next 5 will flop down to another row

 

With all due respect, if you are styling using CSS you can get rid of borders or anything you don't like for that matter. Given I don't use WordPress, I work with Drupal... but CSS takes care of everything.

 

Hey I too had problem with CSS.

Thanks for asking it in this forum.

I would try bigroddy suggestions.

 

<div class="all">
<span><img src="image.gif" />Watch conversions go through the roof with this fantastic new Apple laptop offer.</span>
<span><img src="image.gif" />Watch conversions go through the roof with this fantastic new Apple laptop offer.</span>
etc..another 8 more of the above
</div>

CSS:

.all {
width: 500px; /*2 Times the column width*.
}
.all span {
display: block;
width: 250px; /*Half of the whole table width, so gives the impression of 2 columns*/
float: left;
background: grey; /*Add background colours, images, paddings, margins, change text sizes aswell if you like*/
}

.all span img {
border: none;
width: 250px; /*Optional image width for all images so consistent*/
height: 250px; /*Optional image height for all images so consistent*/


Or if you really want a list then:

ul {
margin: 0;
padding: 0;
width: 500px; /*Double LI WIDTH to create 2 columns*/
list-style: none;
}
li {
margin: 0;
padding:0;
width: 250px; /*Half of UL WIDTH*/
float: left;
}
li img {
border: none;
}

 

wd_2k6,

You have that backwards...he wants 2 rows of 5 columns, not 5 rows of 2 columns...but that code should be helpful in pointing him in the right direction.

 

oops thanks, ye it's just the same concept so the UL/DIV would have a width 5 times of the LI/SPAN.

 

Begin with the code you paste here . It is good for learing.
I remember I begin to learn css from similar xhtml/css code like div ul li .
Plus, refer to www.alistapart.com [many css tutor there, especially div ul li]
It is a great site by a great author .