Jump to content
  • 0

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


Newbie
 Share

Question

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

0_395f0_a008dd54_L.jpg

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

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

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

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

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

Link to comment
Share on other sites

Recommended Posts

  • 0

<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 by swetlana
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

<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;
}

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

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

0_395f7_ee7b1511_L.jpg

Link to comment
Share on other sites

  • 0

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

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

0_395f9_397a58e0_XL.jpg

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

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

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

Edited by Newbie
Link to comment
Share on other sites

  • 0

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

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

0_39666_e0124a61_L.jpg

0_39667_fb862ff9_L.jpg

0_39668_6baabd9f_L.jpg

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

Возможно, было ошибкой для смещения текста под картинку использовать 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;
}

Link to comment
Share on other sites

  • 0
border:1 solid black;

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

Другое дело. :)

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy