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

[Newbie]

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

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

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

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

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

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

[swetlana]

список делается в две строки

[Newbie]

логично, но как это осуществить?

[psywalker]

логично, но как это осуществить?

UL-LI - float:left; + картинки а под ними заголовки в каждом LI.

[swetlana]

<ul>
	<li>
		<img src="img.png" />
		<h4>КамАЗ</h4>
	</li>
	<li>
		<img src="img.png" />
		<h4>ЕрАЗ</h4>
	</li>
	<li>
		<img src="img.png" />
		<h4>БелАЗ</h4>
	</li>
</ul>

и в css:

ul {
	width: 300px;
	overflow: hidden;
}
li {
	height: 100px;
	width: 100px;
	float: left;
}

ну а если семантично охота, то так:

<section class="imageset">
	<figure>
		<img src="img.png" />
		<figcaption>КамАЗ</figcaption>
	</figure>
	<figure>
		<img src="img.png" />
		<figcaption>ЕрАЗ</figcaption>
	</figure>
	<figure>
		<img src="img.png" />
		<figcaption>БелАЗ</figcaption>
	</figure>
</section>

а в css примерно то же самое, только с иными названиями элементов и обязательным указанием display: block;

Edited August 31, 2010 by swetlana

[mishka]

Я бы делал не флотая, а inline-block

Также ничего плохого невижу если это сделать не списком, а дивами.

[Great Rash]

Я согласен с предыдущим оратором - более правильно дивами это сделать. Опять же не придется писать list-style: none;.

Инлайн-блоки, конечно, лучше подходят для этой задачи.

[Newbie]

пробую при помощи списков, так:

<ul>
<li> Bugatti </li>
<li> Volvo </li>
<li> Lincoln </li>
<li> Жигули </li>
<li> Камаз </li>
<li> Москвич </li>
</ul>

сss

li {display:block;
float:left;
list-style-type: none;
}

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

ато получается так:

[Great Rash]

Задайте ширину каждому блоку. Или задайте ширину родителю (<ul>). Если по ширине не влезет в окно или в родителя, то перенесется автоматически.

[psywalker]

Да, и тут display: block; не нужно писать.

li {
display:block;
float:left;
list-style-type: none;
}

[Newbie]

хотелось чтобы этот список был лучше применим к резиновому дизайну

допустим на сайте по типу как на рисунке:

если будет меняться разрешение или размер окна, то если будет фиксированая ширина списка, это будет уже не то -

не будет заполняться вся область.

А хотелось-бы, чтобы если разрешение у человека большое, то чтобы картинки снизу заполняли пустоту справа

Edited August 31, 2010 by Newbie

[Great Rash]

Так все и будет. При float: left; блоки сами будут перескакивать куда надо при разных размерах окна. Если бы вы уже сделали как вам сказали, то знали бы об этом...

[psywalker]

Тогда не ставь ширину на UL и всё.

[Newbie]

я уже об этом после того как отправил сообщение догадался тоже

но до конца не уверен, сейчас буду пробовать

[Newbie]

В internetExplorere всё четко. А в опере, видимо за счет того, что использовал padding, высота элемента списка увеличилась больше чем надо на величину paddinga. А в Moziile пропали рамочки.

Это видно на скринах:

подскажите, пожалуйста, как сделать так, чтобы рамки во всех броузерах отображались корректно.

Возможно, было ошибкой для смещения текста под картинку использовать padding?

Использовал такой код:

<div id="content">

 <ul id="carlist">
<li id="bugatti"> Bugatti </li>
<li id="volvo"> Volvo </li>
<li id="lincoln"> Lincoln </li>
<li id="jiguli"> Жигули </li>
<li id="kamaz"> Камаз </li>
<li id="moskvich"> Москвич </li>
</ul>

 </div>

#carlist li {
float:left;
list-style-type: none;
border:1 solid black;
width : 128px; height: 158px;
margin: 2px;
text-align: center;
padding-top: 120px;
}	  


#bugatti {
	background : url(img/contenimg/bugatti.png) no-repeat;
}
#volvo {
	background : url(img/contenimg/volvo.png) no-repeat;
}
#lincoln {
	background : url(img/contenimg/lincoln.png) no-repeat;
}

[psywalker]

border:1 solid black;

- вот тут забыл указать единицу длины.

[Newbie]

border:1 solid black;

- вот тут забыл указать единицу длины.

Спасибо. Одной проблемой меньше. В Mozille рамочки появились,

но все равно они имеют больший размер чем прописано в height на величину paddinga.

[psywalker]

а если паддинг убрать?

[Newbie]

Если padding убрать, то проблема решается(рамка становится нужного размера), но тогда текст над картинками, а не под ними.

[psywalker]

тогда просто убери высоту

[Newbie]

попробовал убрать,- тогда картинки пропадают, остаются только надписи(и рамки вокруг текста)

Edited August 31, 2010 by Newbie

[psywalker]

попробовал убрать,- тогда картинки пропадают, остаются только надписи(и рамки вокруг текста)

Такого не может быть, если ты убираешь высоту, а паддингами увеличиваешь верхний отступ внутри блока, то по идее всё должно быть в норме.

[Newbie]

точно. Работает. это я забыл опять паддинг вернуть.

[mishka]

чтото мне кажется что ТС о чем то умалчивает, чтото скрыть пытается.

Давай ка код полнее

[psywalker]

точно. Работает. это я забыл опять паддинг вернуть.

Другое дело.

чтото мне кажется что ТС о чем то умалчивает, чтото скрыть пытается.

Давай ка код полнее

Разобрались вроде)

[Great Rash]

Какой-то вы ерундой занимаетесь. Как может текст быть не под картинкой если не задан padding? Картинка - инлайн-элемент, значит если написать:

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

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

Вы что ей position: absolute; что-ли поставили?