Вёрстка div :/

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

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

    able

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

    hi!

    сверстал:
    HTML:
    
    <html>
      <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
      </head>
    <body>
    <script type="text/javascript" src="js/swfobject.js"></script>
          <div id="b4">
            <div id="b6"><div id="clock" style='padding-top: 15px;'>FLASH [clock]</div></div>
            <div id="b5"><div id="cont" style='padding-top: 14px;'>FLASH [cont]</div></div>
              <div style='padding-top: 5px;' id="topleft">FLASH [topleft]</div>
          </div>
          <div id="b3">
            <div id="b2_left"><div id="b1_left">1</div>2</div>
            <div id="b2_right"><div id="b1_right"><div id="but1">FLASH [but1]</div></div>2</div>
    	 <div id="content">
    		<br />
    	        {content}
    	</div>
          </div>
    
    <script type="text/javascript">
      var so = new SWFObject("flash/but1.swf","but1","178","500","7","#ffffff");
      so.addParam("wmode","transparent");
      so.write("but1");
      var so1 = new SWFObject("flash/topleft.swf","topleft","218","96","7","#000000");
      so1.addParam("wmode","transparent");
      so1.write("topleft");
      var so2 = new SWFObject("flash/clockn.swf","clock","80","80","7","#000000");
      so2.addParam("wmode","transparent");
      so2.write("clock");
      var so3 = new SWFObject("flash/cont.swf","cont","500","96","7","#000000");
      so3.addParam("wmode","transparent");
      so3.write("cont");
    </script>
    
    </body>
    </html>
    
    (на флешки внимания не обращайте)

    и css:

    Код:
        body{
          margin:0px;
          padding:0px;
          color:#000000;
          font-weight:bold;
        }
        #b1_left{
          background:#007755;
          background-image: url(imgs/bg_small_left.gif);
          width:150px;
          height:423px;
          text-align:center;
        }
        #b1_right{
          background:#007755;
          background-image: url(imgs/bg_small_left.gif);
          width:178px;
          height:423px;
          text-align:center;
        }
    
        #b2_left{
          background:#ffff00;
          background-image: url(imgs/bg_bottom_line.jpg);
          width:150px;
          height:300%;
          text-align:center;
          float:left;
        }
        #b2_right{
          background:#ffff00;
          background-image: url(imgs/bg_bottom_line_right.jpg);
          width:178px;
          height:300%;
          text-align:center;
          float:right;
        }
        #b3{
          background:#ffffff;
          width:100%;
          height:100%;
          text-align:center;
        }
        #b4{
          background:#ff9900;
          background-image: url(imgs/bg_topleft.jpg);
          width:100%;
          height:106px;
          text-align:left;
        }
        #b5{
          background:#3300ff;
          background-image: url(imgs/bg_line.jpg);
          width:500px;
          height:109px;
          text-align:right;
          float:right;
        }
        #b6{
          background:#ff0000;
          background-image: url(imgs/bg_clock.jpg);
          width:179px;
          height:111px;
          text-align:center;
          float:right;
        }
        #content{
          width: 100%;
          height: 100%;
        }
    .leftmenu {
    	color: #D4D0C8;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 12px;
    }
    .leftmenu a {
    	color: #C4BEB3;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 12px;
    	text-decoration: none;
    }
    .leftmenu a:hover {
    	color: #EAE8E3;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 12px;
    }
    .style5 {
    	color: #635C4E;
    	font-weight: bold;
    }
    td.out {background-color: ''; text-align: center;}
    td.on, td.on a {background-color: #FF9933; color: #fff; cursor: pointer; text-align: center;}
    
    и при большом объеме поля {content} левые (#b2_left) и правые (#b2_right) поля не растягиваются и {content} выходит за их рамки. Как сделать чтобы они растягивались по высоте вместе с полем {content}?

     
  2. venetu

    venetu

    Регистр.:
    28 мар 2007
    Сообщения:
    737
    Симпатии:
    263
    Почитай вот тут:


    http://alistapart.com/articles/fauxcolumns/


    отличная статья про то, как растягивать колонки по высоте, чтобы были все вровень с самой длинной. Если вкратце, то там берется картинка с обоими беграундами и копируется по высоте на длину самого длинного дива.
     
    bdC0Ki нравится это.
  3. DIAgen

    DIAgen Постоялец

    Регистр.:
    30 окт 2006
    Сообщения:
    134
    Симпатии:
    72
    В свое время пробывал способ с картинками, но мне он не подошел, и я пришел к такому варианту, через яваскрипт определяю высоту основных блоков, выбераю самы большой и присваиваю высоту эту высоту остальным.
     
  4. able

    able

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

    по ссылке делал, но не получилось..
     
  5. Andchir

    Andchir Создатель

    Регистр.:
    8 май 2007
    Сообщения:
    31
    Симпатии:
    9
    Посмотри этот пример.
     

    Вложения:

    • divs.zip
      Размер файла:
      520 байт
      Просмотров:
      10
    majahead нравится это.
Статус темы:
Закрыта.