Помогите сверстать на дивах..

Тема в разделе "Веб-дизайн", создана пользователем able, 29 сен 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. able

    able

    Регистр.:
    5 апр 2008
    Сообщения:
    226
    Симпатии:
    66

    [​IMG]
    1, 5, 6 - фикс по ширине и высоте
    2 - фикс по ширине и резиновые по высоте
    4 - фикс по высоте и резиновые по ширине
    3 - резиновые по высоте и ширине

    совсем уже что-то запутался.. сверстал на таблицах, в ие появляется куча белых полей..(
     
  2. sotee

    sotee Создатель

    Регистр.:
    10 июл 2008
    Сообщения:
    17
    Симпатии:
    5
    HTML:
    
    <html>
      <head>
      <style>
        body{
          margin:0px;
          padding:0px;
          color:#ffffff;
          font-weight:bold;
        }
        #b1{
          background:#007755;
          width:200px;
          height:300px;
          text-align:center;
        }
        #b2_left{
          background:#ffff00;
          width:200px;
          height:100%;
          text-align:center;
          float:left;
        }
        #b2_right{
          background:#ffff00;
          width:200px;
          height:100%;
          text-align:center;
          float:right;
        }
        #b3{
          background:#00ffff;
          width:100%;
          height:100%;
          text-align:center;
        }
        #b4{
          background:#ff9900;
          width:100%;
          height:20px;
          text-align:center;
        }
        #b5{
          background:#3300ff;
          width:300px;
          height:20px;
          text-align:center;
          float:right;
        }
        #b6{
          background:#ff0000;
          width:200px;
          height:20px;
          text-align:center;
          float:right;
        }
      </style>
      </head>
      <body>
          <div id="b4">
            <div id="b6">6</div>
            <div id="b5">5</div>
            4
          </div>
          <div id="b3">
            <div id="b2_left"><div id="b1">1</div>2</div>
            <div id="b2_right"><div id="b1">1</div>2</div>
            3
          </div>
      </body>
    </html>
    
     
    able нравится это.
  3. Pavel_Pronskiy

    Pavel_Pronskiy Писатель

    Регистр.:
    10 июн 2008
    Сообщения:
    8
    Симпатии:
    1
    Пользуясь случаем, выкладываю ссылки реализуемые лейауты на jquery
    _http://methvin.com/jquery/splitter/3csplitter.html
    _ttp://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=118
     
  4. able

    able

    Регистр.:
    5 апр 2008
    Сообщения:
    226
    Симпатии:
    66
    вёрстка подходит, но есть одно но:
    когда растягивается поле "3" не растягиваются по высоте поля №2..

    и ещё проблема, поле №3 не растягивается по ширине, когда много контента, а контент уползает вниз..
     
  5. RolCom

    RolCom

    Регистр.:
    12 мар 2008
    Сообщения:
    351
    Симпатии:
    108
    По второму замечанию:
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    body, html {padding:0; margin:0}
    .d6 {
      float:right;
      width:200px;
      height:100%; 
      background:#f00;
    } 
    .d5 {
      float:right;
      width:300px;
      height:100%;
      background:#00f; 
    } 
    .d4 {
      margin-right:500px;
      height:100%;
      background:#f80;
    }
    .d456 {
      height:50px;
    }
    .d123 {
      background:#ff0;
    }
    .d12lef {float:left; width:200px}
    .d12righ {float:right; width:200px}
    
    .d1 {height:400px; background:#888}
    .d3 {
       height:1800px; 
       margin-left:200px; 
       margin-right:200px; 
       background:#66FFFF;
    }
    .d3 .owf {width:100%; overflow:hidden;}
    </style>
    </head>
    
    <body>
    <div class="d456">
      <div class="d6"></div>
      <div class="d5"></div>
      <div class="d4"></div>
    </div>
    <div class="d123">
      <div class="d12lef">
         <div class="d1"></div>
         <div class="d2"></div>
      </div> 
      <div class="d12righ">
         <div class="d1"></div>
         <div class="d2"></div>
      </div>
      
      
       <div class="d3">
         <div class="owf">
    ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
         </div>
       </div>
       
    
    </div>
    </body>
    </html>
    
    Излишняя длинна обрезается.

    По первому- а ты что хотел, это дивная верстка. Чтобы блок растягивался по контенту другого блока, сделать крайне сложно, т.к. блоки независимы, в отличии от ячеек одной таблици.
    Но желтый фон под ними остается, имитируется растягивание вполне успешно.
     
    Blackstab нравится это.
  6. boris9598

    boris9598 Постоялец

    Регистр.:
    16 окт 2009
    Сообщения:
    84
    Симпатии:
    6
    В помощь верстальщику

    Вот здесь,если испытываеш затруднения можно какркасик в дивах сделать.Ну а своё прикрутить не составит труда, так полагаю http://csstemplater.com/
     
Статус темы:
Закрыта.