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

Статус
В этой теме нельзя размещать новые ответы.
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
Пользуясь случаем, выкладываю ссылки реализуемые лейауты на jquery
_http://methvin.com/jquery/splitter/3csplitter.html
_ttp://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=118
 
вёрстка подходит, но есть одно но:
когда растягивается поле "3" не растягиваются по высоте поля №2..

и ещё проблема, поле №3 не растягивается по ширине, когда много контента, а контент уползает вниз..
 
По второму замечанию:
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>
Излишняя длинна обрезается.

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

Вот здесь,если испытываеш затруднения можно какркасик в дивах сделать.Ну а своё прикрутить не составит труда, так полагаю Для просмотра ссылки Войди или Зарегистрируйся
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху