list

[brown2005]

say I have a list

 

test1

test2

test3

test4

test5

 

wat i want is them to be surrounded by a box 100 pixels by pixels, going 3 wide and then down...

 

how can i do this?

[moberemk]

Make the ul or ol element 100 px wide and tall, and float it to the left. Then float each li element to the left, and have each one be at 33% width.

[brown2005]

thanks. exactly wat i was looking for...

 

what i need to know now is how can i have gaps between them..

 

i know using

 

margin-left: 10px; will put gaps between them.. but it greats a gap for the first one and when it starts a new row and i dont want these gaps there.

 

thanks

[brown2005]

/* HOME LEFT */

 

#home-left

{

 

float: left;

 

width: 100%;

 

}

 

/* HOME PAGE */

 

#home-left li

{

 

border: 1px solid #999999;

background: #ffffff;

 

height: 100px;

width: 200px;

 

text-align: center;

 

padding: 5px 0px 5px 0px;

 

float: left;

 

margin-left: 10px;

margin-bottom: 10px;

 

}

 

 

thats what i got so far...

[brown2005]

also if anybody can help wat i want in each box is

 

title

image

 

and on the image i want 1 link and then when u hover over the rest of the box another link...

 

thanks

[dbrimlow]

and on the image i want 1 link and then when u hover over the rest of the box another link...

 

What you want to do here is not not clear.

 

You want the entire box to have a link, then an image in the box to have a different link?

 

That would be really confusing to a user.

 

Here is an example of a box with both a link and an image :

 

http://www.bluesmandeluxe.com/gear.html (click on the "65 Hagstrom II" photo - the other links are in construction)

 

So, in my example, you would want the box to go to one place and the actual image link to go to another?