Список в несколько колонок

[Newbie]

Есть такая картина:

допустим, это список автомобилей в картинках на главной странице

самое простое решение - это создать таблицу и поместить автомобили туда в ячейки.

Потом приходит на ум следующее решение - оформить это всё дело при помощи <div> </div>

Но это же список и поэтому логичнее было бы его оформить как список, а не как таблицу или блоки.

Хотелось бы сделать семантически правильно. Но как сделать список в несколько колонок?

[Newbie]

  Great Rash said:

<img src="картинка" alt="" /><br />

текст

то текст будет по любому под картинкой.

Хочется сделать без тегов <img >, а с помощью css например как я делаю с помощью свойства background-image:

но у меня получается ссылкой является только само слово, непонятно почему при наведении на картинку, которая является фоном нет эфекта ссылки

[Great Rash]

1) Какой высший смысл в том чтобы делать эти картинки фоном?

2) Ладно... раз уж решили все-таки извращаться с фоном, то чему вы его назначаете? Если сказать ссылке (<a>) display: block;, задать ей высоту и ширину, то она должна крикаться.

[Newbie]

  Great Rash said:

2)Если сказать ссылке (<a>) display: block;, задать ей высоту и ширину, то она должна кликаться.

в таком случае картинка кликается, но текст получается изначально над картинкой

а надо, чтобы текст был под ней (под машиной, но в рамочке)

Edited September 9, 2010 by Newbie

[Great Rash]

  Quote

1) Какой высший смысл в том чтобы делать эти картинки фоном?

[Newbie]

  Great Rash said:

1) Какой высший смысл в том чтобы делать эти картинки фоном?

смысл такой, что если будет много страниц с одинаковым содержимым, то на каждой менять теги <img> непрактично долго

вот такой код помог:

#carlist li {
float:left;
list-style-type: none;
border: 1px solid red;
margin: 6px;
text-align: center; 

/**padding-top: 106px; **/
/**width : 132px;  **/
}   


#carlist a		 {
text-decoration: none;
display: block;
width:132px;
padding-top: 106px; 
}
#carlist a:link	{color: #838283;
display: block;
width:132px;
padding-top: 106px; 
}
#carlist a:visited {
color: #838283;
display: block;
width:132px;
padding-top: 106px; 
}

#carlist a:active  {color: #838283;
display: block;
width:132px;
padding-top: 106px; 
}

#carlist a:hover   {color: #838283;
display: block;
width:132px;
padding-top: 106px; 
}

а до этого был

#carlist li {
float:left;
list-style-type: none;
border: 1px solid red;
margin: 6px;
text-align: center;

padding-top: 106px; 
width : 132px;  
}

Интересно почему до этого не работало, ведь указывал паддинг.

такой маленький нюанс, просто паддинг применял не непосредственно к ссылкам, а к элементу списка ссылок

[Great Rash]

  Quote

смысл такой, что если будет много страниц с одинаковым содержимым, то на каждой менять теги <img> непрактично долго

Эммм, а не для этого придуманы SSI???