Проблема с блочной версткой.

SpyLive · July 27, 2008

Есть следующий код страницы:

<!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/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<div id="head">
Это заголовок. Он должен быть вверху. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы.
</div>

<div id="main">
<div id="aunt">
Это меню должно быть слева самым верхним. Шириной в 25% экрана. Вниз увеличиваться с увеличением колличества текста. Вниз увеличиваться с увеличением колличества текста. Вниз увеличиваться с увеличением колличества текста. Вниз увеличиваться с увеличением колличества текста.
<div class="blok">
Это блок который находится внутри блока меню. Он должен быть по ширине во весь левый блок и идти после текста блока меню.
</div>
</div>
<div id="main_info">
Тут может быть очень много текста. Блок должен быть посередине. Шириной 50% экрана. Вниз увеличиваться с увеличением колличества текста. А дальше идет очень много текста. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо. Текст который переносить не надо.
<div class="main_blok">
Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько.
</div>
<div class="main_blok">
Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько.
</div>
<div class="main_blok">
Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько.
</div>
<div class="main_blok">
Это блок который находится. внутри главного блока. Он должен быть по ширине во весь главный блок и идти после текста главного блока.Таких блоков может быть несколько.
</div>
</div>

<div id="left_blok">
Этот блок будет идти после блока aunt слева. Внутри него будут содержаться другие блоки.
<div class="blok">
Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри левого блока. Он должен быть по ширине во весь левый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
</div>

<div id="right_blok">
Этот блок будет идти справа от блока main_info. Шириной в 25% экрана. Внутри него будут содержаться другие блоки.
<div class="blok">
Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
<div class="blok">
Это блок который находится внутри правого блока. Он должен быть по ширине во весь правый блок и идти после текста левого блока.Таких блоков может быть несколько.
</div>
</div>
</div>

<div id="meta">
Это подвал. Он должен быть внизу. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы. Во всю ширину страницы.
</div>

</div>

</body>
</html>

И код CSS файла:

/* index ******************/

html,body{
	margin: 0;
	padding: 0;
}
/*Боди это вся страничка, здесь задаются параметры на всю страницу сразу...че и как в ней будет.(боковые отступы, центрирование и т.д.)*/
body {
	font: 76% arial,sans-serif;
	text-align: center;
}

#container{
	text-align: left;
	width: 1024px;
	margin: 0 auto;
}

/*id="head" тут пишешь где и как должна находится шапка*/
#head {
	position:relative
}

/*id="main" тут пишешь где и как должен находится весь главный блок который идет после шапки и перед подвалом*/
#main {
	width: 100%;
}
/*Дальше идут 4 блока которые отвечают за всю информацию внутри главного блока(и если их правильно расположить то последние 2 класса можно просто оставить пустыми....они и так должны правильно отобразиться)*/
#aunt {
	float: left;
	width: 20%;
}

#main_info {
	float: left;
	width: 60%;
}

#left_blok {
	float: left;
	width: 20%;
	margin-left:-80%
}

#right_blok {
	float: right;
	width: 20%;
}

/*id="meta" тут пишешь где и как должен находится подвал(сразу после главного блока)*/
#meta {
	position: absolute;
	bottom: 0;
	width: 100%;
}



/*2 класса которые отвечают за отображение инфы в отдельных блоках главного блока (main_blok) и всех боковых блоков (blok)*/
.main_blok {
}

.blok {
}

По содержанию страницы впринципе понятно как должны следовать блоки.

Но напишу отдельно:

1.Шапка

2.Блок основного содержания состоящий из 3 колонок.

2.1. В первой колонке должен идти вначале блок aunt, а за ним left_blok со всеми вложенными подблоками

2.2. Во второй колонке идет блок main_info с его подблоками

2.3. В третьей колонке блок right_blok соответственно с его подблоками.

3. Идет подлвал со всякой ерундой.

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

ЗЫ. Хотелось бы чтоб блоки получились резиновыми как сделано в http://forum.htmlbook.ru/index.php?showtopic=9199

ЗЫЫ. Заранее всм спасибо!

SpyLive · July 29, 2008

Ну помогите хоть ктонибудь, очень надо.

А то я уже начинаю думать, что так сделать невозможно. И тогда придется блок aunt помещать в left_blok, но хотелось бы сделать как написано.

Azadi · July 29, 2008

Ммм. Так сделать можно, но работать будет не везде.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {margin: 0px; padding: 0px;}
html,body {
	background:#fff; 
	height:100%;
	min-width:760px;
}
/* Main layout*/
#wrap {
	height:auto !important;
	min-height:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	z-index:1;
}
#container {
	position:relative;
	left:100%;
	padding-bottom:5em;
	z-index:2;
}
#container:after {
	display:block;
	content:"";
	clear:both;
}
#header {
	background:#ccc;
	position:relative;
	top:0;
	left:0;
	width:100%;
	z-index:3;
	height:5em;
}
#footer {
	clear:both;
	position:relative;
	z-index:1;
	margin-top:-5em;
	height:5em;
	background:#ccc;
}
	/* Sub layout*/
	#outer {
		float:left;
		position:relative;
		width:25%;
		margin-left:-100%;
		background:#eef;
	}
	#aunt,#left {
		float:left;
		width:100%;
		background:#eef;
	}
	#main {
		float:none;
		width:200%;
		margin-left:100%;
		background:#fee;
	}
	.right {
		float:left;
		position:relative;
		width:25%;
		margin-left:-25%;
		background:#efe;
	}
/* Beauty */
H1,H2,H3,H4,H5 {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}
P {
	margin:1em 2em;
}
</style>

<!--[if lte IE 7]>
<style type="text/css">
#container {
	overflow:visible;
	zoom:1;
}
*HTML #wrap {
	zoom:1;
	overflow:visible;
	overflow-x:hidden;
}
*HTML BODY {
	width: expression(documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760px" : "auto") : "760px") : "auto");
} 

</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
BODY {
	overflow:auto;
}
</style>
<![endif]-->
</head>

<body>
<div id="wrap">
<div id="header"><h1>Хидер</h1></div>
<div id="container">
	<div id="outer">
		<div id="aunt">
			<h4>Aunt</h4>
			<p>Непонятный блок</p>
		</div>
		<div id="main">
			<h2>Main content</h2>
			<p>Center</p>
		</div>
		<div id="left">
			<h4>LSecond left content</h4>
			<p>Left</p>
		</div>
	</div>
	<div class="right">
		<h3>Second right content</h3>
		<p>Right</p>
	</div>
</div>
</div>
<div id="footer"><h4>Футер</h4></div>
</body>
</html>

Но я больше склоняюсь к мысли, что проще будет при помощи абсолютного позиционирования и JavaScript решить ваше проблему.

Sign In

Проблема с блочной версткой.

Question

SpyLive

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

SpyLive

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information