Помогите сверстать слоями кусок контента?

SUVEREN

SUVEREN

Постоялец
Регистрация
13 Фев 2008
Сообщения
367
Реакции
178
Друзья, всем привет, возникла такая проблема, весь день бьюсь не могу решить. Помогите пожалуйста.
На картинке в аттаче нарисован контент страницы для сайта.

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

1 - квадратики - это фотогалерея с картинками, она у меня выводится рядами , система управления жомла, вывод осуществляется примерно таким кодом.
{gallery}pp1:90:80:0:0{/gallery}
{gallery}pp2:90:80:0:0{/gallery}
{gallery}pp3:90:80:0:0{/gallery}

2 блоки с текстом как вы видите, "заходят" на область с картинками

размеры фиксированные.

получается таблицей штмл это не сверстать, надо слоями. а как ? Один на другой наложить? Но тогда слой который снизу не будет выделятся мышкой в хроме!

Вообщем запутался совсем, помогите, заранее спасибо.
 

Вложения

  • verstka.jpg
    verstka.jpg
    75,6 KB · Просмотры: 15
Сначала текстовые блоки три слоя, дальше три слоя с фото, которые поднять вверх с отрицательным значением top на нужную высоту:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.block {
    float:left;
    width: 33%;
    border: 1px solid #0000FF;
}
.clear {
    clear:both;
}
.image{
    background:url(http://www.mozilla.com/img/covehead/download/download-logo.png);
    width:131px;
    height:131px;
    float:left;
    margin-left:5px;
}
.gallery1{
    width:33%;
    border:1px solid #FF0000;
    height:131px;
    overflow:hidden;
    position:relative;
    top:-250px;
}
.gallery2{
    width:66%;
    border:1px solid #FF0000;
    height:131px;
    overflow:hidden;
    position:relative;
    top:-250px;
}
.gallery3{
    width:100%;
    border:1px solid #FF0000;
    height:131px;
    overflow:hidden;
    position:relative;
    top:-250px;
}
-->
</style>
</head>

<body>



<div class="block">
    <h1>Блок 1</h1>
    текст
</div>

<div class="block">
    <h1>Блок 2</h1>
    текст<br />текст<br />текст<br />текст<br />
    текст<br />текст<br />текст<br />текст<br />
</div>

<div class="block">
    <h1>Блок 3</h1>
    текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />
    текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />
</div>

<div class="clear"></div>

<div class="gallery1">
    <div class="image"></div><div class="image"></div><div class="image"></div>
</div>

<div class="gallery2">
    <div class="image"></div><div class="image"></div><div class="image"></div>
    <div class="image"></div><div class="image"></div><div class="image"></div>
</div>

<div class="gallery3">
    <div class="image"></div><div class="image"></div><div class="image"></div>
    <div class="image"></div><div class="image"></div><div class="image"></div>
    <div class="image"></div><div class="image"></div><div class="image"></div>
</div>

</body>
</html>

результат онлайн
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Спасибо, это получилось, но теперь вылез новый глюк.
Из за отрицательного значения top снизу теперь отрыв на 250 пикселей
top:-250px;

как эту штуку можно побороть?

(немного погодя.)


Вроде бы получилось убрать промежуток снизу, заключил все слои в ещё один див и дал для него фиксированную высоту.

Если кто знает другие способы, сообщите пожалуйста.
 
ещё вариант для нижней галереи добавить отрицательный отступ столько же как и top
Код: 
.gallery3{
...
    margin-bottom:-250px;
}
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху