Как сверстать такой шаблон?

virusoid1010 · April 11, 2009

или хотя бы такой:

Прошу почитать мою тему на демиарте по этому вопросу, чтоб не советовать одно и тоже...

http://demiart.ru/forum/index.php?showtopic=86102

Azadi · April 12, 2009

Форум находится в режиме «Только для зарегистрированных»

Поэтому, возможно, посоветую то же самое

— По первому рисунку ничего не посоветую, надо хорошенько подумать, как бы заставить центральный контент обтекать правую колонку.

— По второму рисунку можно попробовать такой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>[TITLE]</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="Robots" content="index,follow" />
	<style type="text/css">
		* {
			padding:0;
			margin:0;
		}
		html,body {
			height:100%;
		}
		body {
			padding:0 20px;
		}
		.wrap {
			margin:0 104px;
			min-height:100%;
			height:auto !important;
			height:100%;
			position:relative;
			background:orange;
		}
		.header {
			height:20px;
			background:#fff;
		}
		.left {
			float:left;
			width:100px;
			margin-left:-104px;
			background:#0f0;
			padding-bottom:24px;
			position:relative;
			display:inline;
			overflow:hidden;
		}
		.right {
			float:right;
			width:100px;
			margin-right:-100px;
			left:4px;
			background:#6f6;
			padding-bottom:24px;
			position:relative;
			display:inline;
			overflow:hidden;
		}
		.main {
			 overflow:hidden;
			 padding:4px 4px 24px;
		}
			.main .block {
				border:#000 1px solid;
				margin:0 0 20px;
				padding:5px 0;
			}
				.main .block .in {
					float:left;
					width:32%;
					display:inline;
					margin-left:1%;
					background:#c00;
				}
		.footer {
			height:20px;
			margin-top:-20px;
			background:#fff;
			position:relative;
		}
		.clear {
			height:1%;
		}
		.clear:after {
			display:block;
			content:'.';
			height:0;
			visibility:hidden;
			clear:both;
		}
	</style>
</head>
<body>

<div class="wrap">
	<div class="header">
	</div>
	<div class="left">
		<p>П. Бурдье понимал тот факт, что информационно-технологическая революция сохраняет современный субъект власти, говорится в докладе ОБСЕ.</p>		
	</div>
	<div class="right">
		<p>Согласно данным Фонда "Общественное мнение", механизм власти существенно вызывает механизм власти, утверждает руководитель аппарата Правительства.</p>
	</div>
	<div class="main">

		<div class="block clear">
			<div class="in">
				<p>Демократия участия вероятна. Политическое учение Платона определяет антропологический авторитаризм, отмечает Г.Алмонд.</p>
			</div>
			<div class="in">
				<p>Социальная стратификация важно ограничивает бихевиоризм, на что указывают и многие другие факторы. П. Бурдье понимал тот факт, что политическое манипулирование постоянно.</p>
			</div>
			<div class="in">
				<p>Политическое учение Руссо сохраняет постиндустриализм, что получило отражение в трудах Михельса. Политическая элита, с другой стороны, означает современный элемент политического процесса, подчеркивает президент.</p>
			</div>
		</div>
		<div class="block clear">
			<div class="in">
				<p>Политическое учение Руссо сохраняет постиндустриализм, что получило отражение в трудах Михельса. Политическая элита, с другой стороны, означает современный элемент политического процесса, подчеркивает президент.</p>
			</div>
			<div class="in">
				<p>Социальная стратификация важно ограничивает бихевиоризм, на что указывают и многие другие факторы. П. Бурдье понимал тот факт, что политическое манипулирование постоянно.</p>
			</div>
			<div class="in">
				<p>Демократия участия вероятна. Политическое учение Платона определяет антропологический авторитаризм, отмечает Г.Алмонд.</p>
			</div>
		</div>

	</div>
</div>
<div class="footer">
</div>
</body>
</html>

virusoid1010 · April 12, 2009

Со вторым разобрались

Я там эти 3 блока флотами выравнивал, а надо было просто inline...

Victor Ananiev · April 12, 2009

а можно флоатами и overflow:hidden; родитею)

Sign In

Как сверстать такой шаблон?

Question

virusoid1010

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Azadi

Link to comment

Share on other sites

virusoid1010

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information