Расположение блоков рядами

dangler · October 12, 2009

Здравствуйте!

У меня такая ситуация.

Вот, нарисовал недавно дизайн сайта:

Ну и, соответственно, нужно сверстать. Поскольку я дизайнер, то верстаю не слишком часто и до этого в основном, по старинке, верстал таблицами. Сейчас же решил, что это совсем уж прошлый век, поэтому сверстал все дивами и цсс. Вот такой код получился в первоначальном варианте:

сам сайт:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Магазин спайса</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="spiceshop.css" />
</head>
<body>

<div id="centerLayer">

<div id="top">
<img src="top.jpg" height="119" width="672" alt="" title="" />
</div>

<div id="but">
<a href="page1.html"><img src="but1.jpg" alt="" title="" /></a>
</div>

<div id="but">
<a href="page2.html"><img src="but2.jpg" alt="" title="" /></a>
</div>

<div id="but">
<a href="page3.html"><img src="but3.jpg" alt="" title="" /></a>
</div>

<div id="but">
<a href="page4.html"><img src="but4.jpg" alt="" title="" /></a>
</div>

<div>
<a href="page5.html"><img src="but5.jpg" alt="" title="" /></a>
</div>

<div id="topline">

</div>


<div id="shopback">
<div id="shopframe">

<div id="goods">
Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.
</div>

<div id="goods">
Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.
</div>

<div id="goods">
Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.
</div>

<div id="goods">
2<br>text<br>text2<br>text
</div>

<div id="goods">
2<br>text<br>text2<br>text
</div>

<div id="goods">
2<br>text<br>text2<br>text
</div>


<div id="goods">
2<br>text<br>text2<br>text
</div>

<div id="goods">
2<br>text<br>text2<br>text
</div>


</div>
</div>
</div>
</body>
</html>

и цсс:

body {
 background: url(sersv16_gr.jpg);
 margin: 0; padding: 0;}

#centerLayer {
 width: 672px; /* Ширина слоя в пикселах */
 height: 100%;
 margin: 0 auto; /* Отступ слева и справа */
 background: #ffffff; /* Цвет фона */
 padding: 0; /* Поля вокруг текста */ }

img { 
margin: 0; 
padding: 0; 
border: 0;}

#top {
 width: 100%; /* Ширина слоя в пикселах */
 height: 119px;
 margin: 0; /* Отступ слева и справа */
 background: #ffffff; /* Цвет фона */
 padding: 0; /* Поля вокруг текста */}

#topline {
 width: 100%;
 height: 8px;
 margin: 0; /* Отступ слева и справа */
 background: url(topback.gif); /* Цвет фона */
 padding: 0; /* Поля вокруг текста */}

#but {
 float:left;
 margin: 0; /* Отступ слева и справа */
 background: #ffffff; /* Цвет фона */
 padding: 0; /* Поля вокруг текста */ }

#shopback {
 height: 100%;
 background: #c8d6b5; /* Цвет фона */
 padding: 7px; /* Поля вокруг текста */ }

#shopframe {
 border: 1px solid #406a20;
 height: 100%;
 background: #c8d6b5; /* Цвет фона */
 padding: 0; /* Поля вокруг текста */ }

#goods {
 float:left;
 width: 130px;
 border: 1px solid #a7ba8e;
 height: 170px;
 background: #dce4d2; /* Цвет фона */
 padding: 6px; /* Поля вокруг текста */
 margin: 16px 0 16px 16px;
 }

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

то блок с фоном закрылся раньше, чем началось содержимое, хотя в коде он закрывается позже. я решил, что это из-за значения свойства float: left. я добавил в конце каждого ряда блок со значением clear:

хтмл:

<div id="edge">
2<br>text<br>text2<br>text
</div>

цсс:

#edge {
 clear:left;
 width: 130px;
 border: 1px solid #a7ba8e;
 height: 170px;
 background: #dce4d2; /* Цвет фона */
 padding: 6px; /* Поля вокруг текста */
 margin: 16px 0 16px 16px;
 }

стало получше, но все равно неправильно:

то есть после каждого clear строчка пропускается, а, если в конце нет блока с clear, тогда остальные уходят за фон..

тогда я сделал все блоки просто #goods и в конце добавил блок #edge (у которого clear:left).

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

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

Ну и, более частные: почему после clear:left происходит перенос на новую строку, но без него фоновый блок закрывается раньше времени?

И второй - почему расстояние между блоками по вертикали отличается и как-то не всегда совпадает с горизонтальным, хотя у всех блоков одинаково margin: 16px 0 16px 16px ?

Очень длинный получился вопрос.. ) Но я надеюсь, что тема интересна не только мне, поэтому был бы очень признателен знатокам за ответы!

psywalker · October 12, 2009

Если честно, я не вчитывался в твою тему, но по картинкам походу понял, что тебе вот это может нужно?

div#centerLayer { overflow: hidden; zoom:1; - /* для ИЕ6 */}

dangler · October 12, 2009

Если честно, я не вчитывался в твою тему, но по картинкам походу понял, что тебе вот это может нужно?
div#centerLayer { overflow: hidden; zoom:1; - /* для ИЕ6 */}

хм, не совсем понял.. :lol: у меня просто есть уже див centerLayer, он общий для всего, чтобы содержимое по центру выравнивалось.. ион работает нормально.. а не получается именно расположить блоки в несколько горизонтальных рядов..

или, если добавить в мой centerLayer свойство overflow: hidden; zoom:1;, то все заработает? или только в ИЕ6? хм, хм. я просто в мозиле проверяю..

psywalker · October 12, 2009

короче дай ссылку на страницу

dangler · October 12, 2009

короче дай ссылку на страницу

http://spice.atahanov.ru/

вот, это последний вариант ) а в сообщении я процесс описал.. :lol:

psywalker · October 12, 2009

http://spice.atahanov.ru/
вот, это последний вариант ) а в сообщении я процесс описал..

погоди, у меня всё работает нормально, блоков даже добавил, всё норм

dangler · October 12, 2009

погоди, у меня всё работает нормально, блоков даже добавил, всё норм

то есть у тебя не такая картинка:

??

то есть, один блок снизу всегда один? я, если добавляю 1 блок div id="goods" до последнего div id="edge" у меня это блок встает в новой строке, то есть, получаются снизу 2 строки и в каждой только по 1 блоку слева. если добаляю еще, то начинает заполняться эта предпоследняя строка, в последней всегда остается один блок.. и при этом расстояние по вертикали между последней строкой и предпоследней в 2 раза меньше, чем остальные (см. рисунок)

psywalker · October 12, 2009

Короче записывай:

1) Тебе нужно этому блоку #shopframe поставить {overflow:hidden;}

2) А вот этот блок удалить <div id="edge">

dangler · October 13, 2009

Короче записывай:
1) Тебе нужно этому блоку #shopframe поставить {overflow:hidden;}
2) А вот этот блок удалить <div id="edge">

ух ты, спасибо большое! и правда, работает :lol:

psywalker · October 13, 2009

ух ты, спасибо большое! и правда, работает

Не за что, беги учиться :lol:

dangler · October 13, 2009

Не за что, беги учиться

раз уж учиться, то можно еще вопрос? я вот тут прочитал:

hidden Отображается только область внутри элемента, остальное будет обрезано.

И как-то не понял совсем, как это связано с моим блоком.. а что "остальное будет обрезано"?

И вообще: "Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." То есть у меня не помещалось содержимое? Но я ведь не задавал фиксированной высоты и ширины, почему же оно не помещалось? Хм..

s0rr0w · October 13, 2009

раз уж учиться, то можно еще вопрос? я вот тут прочитал:
hidden Отображается только область внутри элемента, остальное будет обрезано.
И как-то не понял совсем, как это связано с моим блоком.. а что "остальное будет обрезано"?
И вообще: "Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." То есть у меня не помещалось содержимое? Но я ведь не задавал фиксированной высоты и ширины, почему же оно не помещалось? Хм..

Будет обрезано, если у блока заданы фиксированные размеры. В противном случае вступает в силу другой алгоритм.

Sign In

Расположение блоков рядами

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information