Помогите, вешаюсь. Дивы склеиваются. - HTML и CSS

rrejmkhe · 07.10.2009, 02:22

Идея: div сверху, div снизу, div между ними.

В том, который посередине - контент. В роли контента - img и пара слов текста. Таких "блоков" - 6 колонок по 6 рядов, допустим. body по ширине 780px, каждая колонка, следовательно - 130px.

Соответственно должно отобразиться:

ВЕРХ

БЛОКИ КОНТЕНТА (в каждом блоке - картинка и под ней пара слов текста)

НИЗ

Код:

Код HTML:

<body style="width:780px;">

<style>

#tmbcontent {

background: white;
}

.tmbcontainer {
text-align: center;
width: 130px;
float: left;
font-size: 14px;
}

.tmbimg { 

display: block;
margin-left: auto;
margin-right: auto; 
}

</style>

<div style="background:red;">Upper DIV</div>

<div id="tmbcontent">

<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>

</div>
<div style="background:blue;">Lower div</div>

</body>

ПРОБЛЕМА:

Вместо вышеописаного желаемого поведения получается, что нижний div визуально начинается от верхнего и заканчивается там, где должен, сами контейнеры с картинками вродебы на своих местах, но при этом средний див #tmbcontent - его какбы нет вообще, он не даёт свой background:white на контейнеры с контентом. Вместо этого - эффект, описаный вначале абзаца.

У меня сейчас мозг взорвется. Помогите, пожалуйста. Прилагаю скриншот безобразия.

P.S. Если добавить ещё один контейнер с контентом, который появлятся на следующем ряду, как и предполагалось, то он "выскакивается" за нижний слой, т.е. нижний слой не двигается ниже, как должно быть. Т.е. очевидно, что действительно, прилип к верхнему

wall66 · 07.10.2009, 09:47

Код HTML:

    #tmbcontent {
        background: white;
        width: 100%;
        overflow: hidden;
    }

почитайте надосуге http://designformasters.info/posts/c...-and-practice/

07.10.2009, 09:47	#2
wall66 Участник клуба Регистрация: 04.10.2008 Сообщений: 1,485	Код HTML: #tmbcontent { background: white; width: 100%; overflow: hidden; } почитайте надосуге http://designformasters.info/posts/c...-and-practice/ Notepad2 *свободен...*