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

Тема в разделе "Веб-дизайн", создана пользователем SUVEREN, 6 янв 2011.

Модераторы: zek24
  1. SUVEREN

    SUVEREN

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

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

    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 КБ
      Просмотров:
      15
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    Сначала текстовые блоки три слоя, дальше три слоя с фото, которые поднять вверх с отрицательным значением 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>
    
    
    результат онлайн

    Перейти по ссылке
     
    SUVEREN нравится это.
  3. SUVEREN

    SUVEREN

    Регистр.:
    13 фев 2008
    Сообщения:
    360
    Симпатии:
    175
    Спасибо, это получилось, но теперь вылез новый глюк.
    Из за отрицательного значения top снизу теперь отрыв на 250 пикселей
    top:-250px;

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

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


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

    Если кто знает другие способы, сообщите пожалуйста.
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    ещё вариант для нижней галереи добавить отрицательный отступ столько же как и top
    Код:
    .gallery3{
    ...
        margin-bottom:-250px;
    }
    
    http://jsfiddle.net/VmHGk/1/
     
    SUVEREN нравится это.