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

Статус
В этой теме нельзя размещать новые ответы.
Z

zhito

Местный житель
Регистрация
23 Авг 2007
Сообщения
165
Реакции
23
неполучается сверстать блок
в аттаче нарисовал как должен быть виден блок
обязательно надо в дивах
код примерно такой:
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 KB · Просмотры: 3
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>
 
можно чуть уменьшить код

Код: 
<!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>
 
У меня похожий вопрос. Только начал разбираться с блоками. Как правильно замутить такую табличку на DIVах?
 

Вложения

  • table_div.jpg
    table_div.jpg
    17,1 KB · Просмотры: 2
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>
 
Не совсем разобрался. В "дриме" почему-то блоки рассыпались, но в браузер выводит нормально. Спасибо! Буду разбираться.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху