Расположить 3 блока: 2справа один под другим и 1 слева на всю ширину.

chabapok · January 31, 2009

Изучаю css.

Вот, решил сделать тренировочный сайт и бьюсь уже 2й день - не получается получить элементарного.

Причем, ИМХО, можно получить нужный результат при использовании "невидимой" таблицы, но меня интересует именно как это сделать через css.

Должно быть: 3 окошка. слева одно под другим 2 окна на ширину 200px и справа от них на свю оставшуюся ширину третье окно. (в заголовке право и лево попутал местами - это ошибка) IE показывает то, что я хочу. Opera - располагает 3е окно на всю ширину под первыми двумя. FF- делает почти правильно, но 3е окно не на всю оставшуюся ширину. И как его сделать на всю - хз.

Вопросов несколько.

1. Что я делаю не так? как сделать чтоб заработало? (желательно без использования абсолютных координат)

2. Почему Самый Правильный FireFox отображает неправильно статьи в разделе "шаг за шагом" этого сайта, тогда как Opera работает нормально ? А именно - неверно отображаются примеры html кода - отображается только последний кусок html кода, который влез в отведенное окошко. Начало - не отображается, ScrollBar - тоже не отображается.

3. Посоветуйте нормальную доку, в которой бы описывался ответ на мой вопрос 1 и прочие возможные. Все что я находил - это тупое передирание друг у дружки уроков, в которых изображают эти картинки со всякими margin-ами и padding-ами, а на практике когда ничинаешь их использовать - оно работает не так как надо.

Спасибо.

теперь собственно код.

css:

body { background-color: #f0f0f0;}

#LP{	width: 200px;
	float: left;}

#zag1{	margin: 5px 5px 5px 0px;
	width:	100%;
	clear:both; }

#zag2{	margin:	5px 5px 5px 0px;
	width: 100%;
	clear: both;}

#zag3{	margin:	5px 5px 5px 0px;
	float:left;}

table,td{width: 100%;	border: 1px solid blue;	border-collapse: collapse; }
th{background: blue;	color:	white; }

Теперь html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Проба проба</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="mystile.css" />
</head>


<body bgcolor="#ffffff">

<div id="LP">
<div id="zag1">
	<table>
		<tr><th>заголовок-1</th></tr>
		<tr><td>ляляля<br/>
				ляляля<br/>
		</td></tr>
	</table>
</div>

<div id="zag2">
	<table>
		<tr><th>заголовок 2</th></tr>
		<tr><td>парам-парам
			</td></tr>
	</table>
</div>
</div>

<div id="zag3">
	<table>
		<tr><th>Заголовок 3</th></tr>
		<tr><td>Я сразу смазал карту будня<br/>плеснувши краску из стакана
			</td></tr>
	</table>
</div> 
</body>
</html>

Edited January 31, 2009 by chabapok

Never · February 1, 2009

вот тут нужные вам есть макеты

Edited February 1, 2009 by Never

chabapok · February 2, 2009

В политбюро тоже не дураки.

Качал я оттуда нужную мне форму прежде чем задавать вопрос. Не устроила по причине: справа от нее широкое поле, ширина не влазит в браузер, появляется горизонтальный скроллбар. Разобраться откуда там беруться цифры отступа (особенно всякие отрицательные) так и не получилось.

Searcher · February 3, 2009

Не надо устанавливать у блоков width:100% если этот блок обычный, не плавающий (без float:left или float:right), то он по-умолчанию тянется на всю ширину. Если же вы устанавливаете ширину, то к ней добавляются отступы, и толщина бордера.

Зачем в body bgcolor="#ffffff" если вы уже установили цвет фона в стилях?

Зачем в каждом блоке таблица? Таблицы используются для представления табличных данных, а у вас заголовки и текст.

Тэги типа <br/>,<img crs="..."/> и т.п. закрываются в xhtml, а в html пишутся <br>, <img crs="..."> и т.п.

Вот вариант с исправленными ошибками:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

html, body {
	height: 100%;
	width:100%;
	margin: 0;
	background-color: #FFF;
	}

#LP{
	width: 200px;
	padding: 5px 5px 0 5px;
	float: left;
	background-color: #DDF;
	}

.zag{
	padding: 5px;
	margin-bottom: 5px;
	background-color: #FFF;
	}

#zag3{
	margin-left: 210px;
	padding: 5px;
	}

</style>
</head>
<body>

  <div id="LP">
	<div class="zag">
	  <h2>заголовок 2</h2>
	  <p>ляляля</p>
	  <p>ляляля</p>
	</div>
	<div class="zag">
	  <h3>заголовок 3</h3>
	  <p>парам-парам</p>
	</div>
  </div>

  <div id="zag3">
	<h1>Заголовок 1</h1>
	<p>Я сразу смазал карту будня<br>плеснувши краску из стакана</p>
  </div> 

</body>
</html>

Edited February 3, 2009 by Searcher

Sign In

Расположить 3 блока: 2справа один под другим и 1 слева на всю ширину.

Question

chabapok

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Never

Link to comment

Share on other sites

chabapok

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information