3 Div-блока - HTML и CSS

t2skler · 07.05.2011, 21:25

Пытаюсь написать оформление для новостей. 2 блока находятся в одном большом. Левый с фиксированной шириной 300px, второй - во всё остальное. После этих блоков пытаюсь сделать перенос другого содержимого обычным <br>, но содержимое не переносится, а остаётся в правом блоке. Может быть нужно это содержимое добавить в другой Div-блок?

Код HTML:

<tr><td class="eText" colspan="2"><div style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">
<div class="filmleft"><img src="$AUTHOR_SITE$" width="282" height="400"></div>
<div class="filmright">$MESSAGE$</div>
</div>
<?if($SOURCE$)?><br><br><center><a onclick="$('#stat').slideToggle('slow');" href="javascript://">[Развернуть/Свернуть для просмотра]</a></center><div id="stat" style="display: none;"><center><iframe src="$SOURCE$" width="607" height="360" frameborder="0"></iframe><br><br>ПРИЯТНОГО ПРОСМОТРА!</center></div><?endif?></td></tr>

.filmleft {
background-color:#999;
float:left;
padding:5px;
border-radius:5px;
-moz-border-radius:5px;
}

.filmright {
padding-left: 300px;
}

t2skler · 07.05.2011, 22:45

Пожалуйста, напишите, кто сможет, 4 Div-блока которые бы выглядели, так как показано на картинке.

Vlero · 09.05.2011, 11:16

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Примерный код</title>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<style type="text/css">
html, body {
	margin:0px; 
	padding:0px; 
	position:relative; 
}

#all {
	text-align:left;
	max-width:px;
}

#container {
	position:relative; 
	display:block; 
    background:#ff0000;
	border-left:solid 300px #ffff00;
}
#inner {
	display:block;
	position:relative;	 
	margin-left:-300px;
	padding:1px;
}

#left {
	float:left; 
	position:relative; 
	width:300px;
	left:0px;
}
#center {
	margin-left:300px;
	position:relative; 
	display:block;
	height:1%;
}
.clear {
	clear:both;
}

.foot {
	display:block;
	height:150px;
	background:#0000ff;
	padding:1px;
}
</style>
</head>
<body>
<div id="all">
	<div id="container">
		<div id="inner">
			<div id="left"><H3>Содержимое первого блока</H3></div>
		<div id="center"><H2>Содержимое второго блока</H2></div>
	</div>
</div>
<div class="foot"><H1>Содержимое третьего блока</H1></div>
</div>
</body>
</html>

dekameron · 10.05.2011, 22:07

Может пригодится csstemplater.com

07.05.2011, 21:25	#1
t2skler Форумчанин Регистрация: 25.11.2010 Сообщений: 164	3 Div-блока Пытаюсь написать оформление для новостей. 2 блока находятся в одном большом. Левый с фиксированной шириной 300px, второй - во всё остальное. После этих блоков пытаюсь сделать перенос другого содержимого обычным <br>, но содержимое не переносится, а остаётся в правом блоке. Может быть нужно это содержимое добавить в другой Div-блок? Код HTML: <tr><td class="eText" colspan="2"><div style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"> <div class="filmleft"><img src="$AUTHOR_SITE$" width="282" height="400"></div> <div class="filmright">$MESSAGE$</div> </div> <?if($SOURCE$)?><br><br><center><a onclick="$('#stat').slideToggle('slow');" href="javascript://">[Развернуть/Свернуть для просмотра]</a></center><div id="stat" style="display: none;"><center><iframe src="$SOURCE$" width="607" height="360" frameborder="0"></iframe><br><br>ПРИЯТНОГО ПРОСМОТРА!</center></div><?endif?></td></tr> .filmleft { background-color:#999; float:left; padding:5px; border-radius:5px; -moz-border-radius:5px; } .filmright { padding-left: 300px; } Возможно Я Быдлокодер ©.

07.05.2011, 22:45	#2
t2skler Форумчанин Регистрация: 25.11.2010 Сообщений: 164	Пожалуйста, напишите, кто сможет, 4 Div-блока которые бы выглядели, так как показано на картинке. Возможно Я Быдлокодер ©. Последний раз редактировалось t2skler; 07.05.2011 в 22:48.

10.05.2011, 22:07	#4
dekameron Форумчанин Регистрация: 27.04.2010 Сообщений: 185	Может пригодится csstemplater.com Помог - тырк на весы

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вывод div блока на главной	XPsihopaTX	PHP	12	06.01.2011 19:05
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Высота div-a в котором есть другой div	Antoha	HTML и CSS	2	07.08.2009 18:16
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48
Вставка блока DIV в шаблоне	Niсkname	HTML и CSS	7	07.03.2009 16:27