DIV - макет

Mih · September 13, 2009

Всем привет !

Раньше верстал с помощью таблиц. Создать макет в три колонки с помощью таблиц легко (по крайней мере для меня).

Решил попробовать создать макет в три колонки при помощи позиционирования ... и вот не лепится цветочек аленький.

Во всех браузерах (парадокс, но только не в IE6, в нем все отлично ), при задании высоты в 100%, середина, с текстом, проходит сквозь футер. Помогите советом. Ниже код.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style>
html{height:100%;}
	body{margin:0px; height:100%;}
		#main{width:700px; height:100%; border:1px solid black; margin-left:auto; margin-right:auto;}
			#header{width:100%; height:70px; background:green; position:relative;}
			#content{ position:relative; height:100%;}
				#group{width:600px; position:relative;}
					#l_content{width:100px; position:absolute; background:#CCCC33;}
					#c_content{width:500px; height:100%; position:relative; left:100px; background:#999999;}
			#r_content{width:100px; position:absolute; top:0px; left:600px; background:#999999;}
			#footer{width:100%; height:70px; background:green; position:relative;}
</style>
<html>
<head>
<title>макет пробный</title>
</head>
	<body>
<div id="main">
	<div id="header"></div>
	<div id="content">
		<div class="group">
			<div id="l_content">left</div>
			<div id="c_content">
			По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
			По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
			По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
			</div>
		</div>
		<div id="r_content">right</div>
	</div>
	<div id="footer"></div>
</div>
	</body>
</html>

Edited September 13, 2009 by Mih

gesandte · September 13, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<style>

html{height:100%;}

body{margin:0px; height:100%;}

......

#footer{width:100%; height:70px; background:green; position:relative;}

</style>

<html>

<head>

<title>макет пробный</title>

</head>

<body>

где вы так научились расставлять теги?

Mih · September 13, 2009

если Вы о расположении style, то это - отсебятина. Этим я хотел показать, что находится в css файле.

psywalker · September 13, 2009

Разбери пример и выясни, почему у тебя не работал?

http://psywalker.ru/Forum/shadow/Untitled-1.html

mishka · September 13, 2009

блоку #main вместо height:100% поставь min-height:100%

сори за оффтоп

psywalker, ты личку смотрел?

Edited September 13, 2009 by mishka2

psywalker · September 13, 2009

mishka2 said:
блоку #main вместо height:100% поставь min-height:100%
сори за оффтоп
psywalker, ты личку смотрел?

Оффтоп одобряется у нас всегда!))) Мих, а в личке пусто

mishka · September 13, 2009

psywalker, плс свяжись со мной по аське

Mih · September 14, 2009

большое человеческое СПАСИБО !

Только не совсем понял почему так нужен был min-height )))

Searcher · September 14, 2009

ребят, ну опубликуйте где-нибудь в быстром доступе ссылки на галереи с верстками в несколько колонок:

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

еще генератор разметки неплохой:

http://csstemplater.com/

Mih · September 14, 2009

за ссылки большое спасибо !

Sign In

DIV - макет

Question

Mih

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

gesandte

Link to comment

Share on other sites

Mih

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Mih

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Mih

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information