подскажите плз по верстке блоков

Тема в разделе "Веб-дизайн", создана пользователем zhito, 15 апр 2009.

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

    zhito

    Регистр.:
    23 авг 2007
    Сообщения:
    165
    Симпатии:
    22
    неполучается сверстать блок
    в аттаче нарисовал как должен быть виден блок
    обязательно надо в дивах
    код примерно такой:
    HTML:
    <div>
    <div>
    <div class="d1">
    </div>
    <div class="d2">
    </div>
    </div>
    <div>
    <div class="d3">
    </div>
    <div class="d4">
    </div>
    </div>
    <div>
    <div class="d5">
    </div>
    <div class="d6">
    </div>
    </div>
    <div>
     

    Вложения:

    • verstka.jpg
      verstka.jpg
      Размер файла:
      22,8 КБ
      Просмотров:
      3
  2. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    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=windows-1251" />
    	<title>Example</title>
    	<style>
    		.wrapper{width:200px; height:300px;}
    		.cell{width:100px; height:100px; float:left;}
    		.red{background:red;}
    		.green{background:green;}
    	</style>
    </head>
    
    <body>
    	<div class="wrapper">
    		<div class="cell red">d1</div>
    		<div class="cell green">d2</div>
    		<div class="cell green">d3</div>
    		<div class="cell red">d4</div>
    		<div class="cell red">d5</div>
    		<div class="cell green">d6</div>
    	</div>
    </body>
    </html>
    
     
    zhito нравится это.
  3. Dewars

    Dewars Создатель

    Регистр.:
    14 мар 2009
    Сообщения:
    25
    Симпатии:
    1
    можно чуть уменьшить код

    Код:
    <!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=windows-1251" />
    	<title>Example</title>
    	<style>
    		.list { width: 200px; height: 300px; }
    			.list li {float: left; width: 100px; height: 100px; background: green; }
    				.list li.red { background: red; }
    	</style>
    </head>
    
    <body>
    	<ul class="list">
    		<li class="red">d1</li>
    		<li>d2</li>
    		<li>d3</li>
    		<li class="red">d4</li>
    		<li class="red">d5</li>
    		<li>d6</li>
    	</ul>
    </body>
    </html>
     
  4. command26

    command26 Постоялец

    Регистр.:
    1 ноя 2008
    Сообщения:
    103
    Симпатии:
    6
    У меня похожий вопрос. Только начал разбираться с блоками. Как правильно замутить такую табличку на DIVах?
     

    Вложения:

    • table_div.jpg
      table_div.jpg
      Размер файла:
      17,1 КБ
      Просмотров:
      2
  5. shell

    shell Прохожие

    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=windows-1251" />
    <title>Untitled Document</title>
    <style type="text/css">
        dl {width: 604px; padding: 10px; background: #ff6600;}
        dl:after {content: "."; display: block; height: 0; clear: both;}
     
     
        dl dd, dl dt {background: yellow; height: 40px; margin: 2px 0;}
        dl dd {float: left; width: 400px;}
        dl dt {float: right; width: 200px;}
    </style>
    </head>
     
    <body>
     
    <dl>
        <dd></dd><dt></dt>
        <dd></dd><dt></dt>
        <dd></dd><dt></dt>
    </dl>
     
    </body>
    </html>
    
     
  6. command26

    command26 Постоялец

    Регистр.:
    1 ноя 2008
    Сообщения:
    103
    Симпатии:
    6
    Не совсем разобрался. В "дриме" почему-то блоки рассыпались, но в браузер выводит нормально. Спасибо! Буду разбираться.
     
Статус темы:
Закрыта.