DIV-Layout - три горизонтальные области: [150px] [*] [150px] - Страница 2

KidsKilla · 21.11.2006, 23:11

Цитата:

Сообщение от __etc

Обратные слеши и коммент, что это хак. Вот и нелегальность. Разве не так? Что это за CSS, где нужно так извращаться и обманывать браузер?

это хак для более-менее адекватного восприятия СТАРЫМИ бровзерами.
как только они уйдут в небытие как 4я серия, про хаки можно забыть.
уже сейчас если не нужны 5е версии ие (как в массе делают на западе) забудь про этот хак.

automatix · 22.11.2006, 03:22

Спасибо за пример -- в самом деле неплохая штука. Я попробовал чуть-чуть очистить код от лишнего. Вот, что получилось ("main" и "contents" я поменял местами -- мне так больше нравится):

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Footer Demo 1</title>
    <link rel="stylesheet" href="FooterDemo.css" />
  </head>
  <body>
  
<!-- START -->

    <div id="main">
      <div id="contents"></div>
      <div id="footer"></div>
    </div>

<!-- STOP -->

  </body>
</html>

Код HTML:

html, body, #main {
    min-height: 100%;
    width: 100%;
    height: 100%;
}

/*
 * The "height" above is a hack for IE5+/Win.  Below we adjust
 * it using the child selector to hide from IE5+/Win
 */

html>body, body #main {
    height: auto;
}

/*
 * Without this, Moz1.0 adds a vertical scrollbar
 */

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

#main {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ccccff;
    border:0px solid #FF0000;
}

#contents {
    margin-bottom: 100px;
    height: auto;
    padding: 100px;
    background-color: #ffcccc;
}

#footer {
    position: absolute;
    bottom: 0;
    background-color: #ccffcc;
    text-align: center;
    padding: 0;
    width: 100%;
    height: 100px;
}

Только две маленькие проблемы. 1. Средняя часть не растягивается, так чтобы начинаться там, где заканчивается хэдер, и заканчиваться, где начинается футэр. А в этом как раз и заключается основная проблема. Грубо говоря, БГ средней "полосы" должен быть имено БГ средней (#middle{background-color:#FF9900;}), а не по принципу #middle{} #main{background-color:#FF9900;}. 2. Кроме того -- с бордерами пример не дружит. Даем контейнеру (в оригинале "contents", у меня "main") бодер больше нуля и все сразу становится криво, причем в обоих браузеах.

А в остальном лэйаут очень даже секси. ))

automatix · 28.11.2006, 02:34

Вот еще одно решение. Мне оно нравится намного больше, чем те, что я встречал до этого. Валидатор, если чуток поработать над кодом напильником, тоже вполне доволен.

Вот код, который я выпилил из этогопримера:

CSS

Код HTML:

* {
	padding : 0;
	margin : 0;
	border : 0;
}
html, body {
	height : 100%;
	font : 12px "Trebuchet MS", Verdana, Arial, sans-serif;
	text-align : center;
	background : #ffffff;
	color : #000000;
}
#box {
	margin : 0 auto;
	text-align : left;
	position : relative;
	min-height : 100%;
	height : auto !important;
	height : 100%;
	background : #dddddd;
	color : #ffffff;
	border : 9px double #FF9900;
}
#header {
	padding : 0;
	font-size : 20px;
	text-transform : uppercase;
	line-height : 60px;
	background : #cc0000;
	color : #ffffff;
}
#footer {
	width : 100%;
	position : absolute;
	bottom : 0;
	height : 20px;
	line-height : 20px;
	text-align : center;
	color : #ffffff;
	background : #0000cc;
}
#inhalt {
	height : 100%;
	padding : 0;
	background : #00cc00;
	color : #ffffff;
}
p {
	margin : 0;
	padding : 0;
	line-height : 1.5em;
	background : #CCCCFF;
	color : #ffffff;
}

HTML

Код HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" href="test_01.css" />
<title>WMP Standards Projekt - starres, zweispaltiges Layout mit 100 Prozent H&ouml;he</title>
</head>

<body>

<div id="box">

  <div id="header">Header</div>
  <div id="inhalt">

<!--|
    <h2>Die deutsche Sprache</h2>
    <p>All each tun! Gundherzl ich engl&uuml;ck. Wunsch siege "h&ouml;r enzu" denwen. Igenau ser  		w&auml;hl, Tendie heraus. Gef und enha, Bendass diesk eing ew&ouml;hn, li cherbl Indtex tist. Sie * sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, Rumf&uuml;h Ren. L&auml;sst ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei Nmal Denricht igenrie Cher ge? Habtdenntats &auml;chl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Bein&auml; he remhin seh en. Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? Tex tezu le sen.</p>
    <p>All each tun! Gundherzl ich engl&uuml;ck. Wunsch siege "h&ouml;r enzu" denwen. Igenau ser  		w&auml;hl, Tendie heraus. Gef und enha, Bendass diesk eing ew&ouml;hn, li cherbl Indtex tist. Sie * sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, Rumf&uuml;h Ren. L&auml;sst ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei Nmal Denricht igenrie Cher ge? Habtdenntats &auml;chl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Bein&auml; he remhin seh en. Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? Tex tezu le sen.</p>
    <p>All each tun! Gundherzl ich engl&uuml;ck. Wunsch siege "h&ouml;r enzu" denwen. Igenau ser  		w&auml;hl, Tendie heraus. Gef und enha, Bendass diesk eing ew&ouml;hn, li cherbl Indtex tist. Sie * sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, Rumf&uuml;h Ren. L&auml;sst ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei Nmal Denricht igenrie Cher ge? Habtdenntats &auml;chl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Bein&auml; he remhin seh en. Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? Tex tezu le sen.</p>
    <p>All each tun! Gundherzl ich engl&uuml;ck. Wunsch siege "h&ouml;r enzu" denwen. Igenau ser  		w&auml;hl, Tendie heraus. Gef und enha, Bendass diesk eing ew&ouml;hn, li cherbl Indtex tist. Sie * sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, Rumf&uuml;h Ren. L&auml;sst ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei Nmal Denricht igenrie Cher ge? Habtdenntats &auml;chl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Bein&auml; he remhin seh en. Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? Tex tezu le sen.</p>
    <p>All each tun! Gundherzl ich engl&uuml;ck. Wunsch siege "h&ouml;r enzu" denwen. Igenau ser  		w&auml;hl, Tendie heraus. Gef und enha, Bendass diesk eing ew&ouml;hn, li cherbl Indtex tist. Sie * sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, Rumf&uuml;h Ren. L&auml;sst ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei Nmal Denricht igenrie Cher ge? Habtdenntats &auml;chl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Bein&auml; he remhin seh en. Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? Tex tezu le sen.</p>
-->

  </div>
  <p id="footer">Footer</p>

</div>

</body>
</html>

Говорят, в Маковском ИЕ не работает, но я подозреваю, что речь о девятке (надо уточнить). Я тестил на IE 6 и Firefox 1.5.0.8.

automatix · 28.11.2006, 02:52

Предлагаю еще немного поработать над проблемой.

1.В ИЕ при приведенном выше лэйауте всегда появляется скролл. Высота страницы равна, насколько я понял 100% + высота хэдера + высота футера.

2. Высота средней области в Лисе зависит от наполнения. А что, если страница должна быть поделена на три области разных цветов (см. первое сообщение)? Можно, конечно, использовать в качестве цвета для "середины" цвет дива-контеёнера. Неэлегантно, но, может, всех устроит.
Усложняем: нужны три области и рамка "double", основной цвет которой, скажем, оранжевый, а пространство между внешней и внутренней частью не совпадает по цвету со "средним" дивом. В ИЕ это не проблема -- он иначе чем Лиса интерпретирует рамки, и поэтому там просвечивает цвет BODY. А в Лисе что делать?

Идеи?

KidsKilla · 28.11.2006, 13:20

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
*{margin:0;padding:0;}
HTML,BODY{height:100%;}
#wrap{min-height:100%;_height:100%;margin-bottom:-70px;background:lightblue;}
#head{height:50px;background:#fc0;position:absolute;top:0;left:0;width:100%;}
#body{padding:50px 0 70px;}
#foot{height:70px;background:pink;}
</style>
</head><body>
<div id="wrap">
<div id="body">
<div id="main">
<h1>main</h1>
<p>1.В ИЕ при приведенном выше лэйауте всегда появляется скролл. Высота страницы равна, насколько я понял 100% + высота хэдера + высота футера.</p>
<p>2. Высота средней области в Лисе зависит от наполнения. А что, если страница должна быть поделена на три области разных цветов (см. первое сообщение)? Можно, конечно, использовать в качестве цвета для "середины" цвет дива-контеёнера. Неэлегантно, но, может, всех устроит.</p>
<p>Усложняем: нужны три области и рамка "double", основной цвет которой, скажем, оранжевый, а пространство между внешней и внутренней частью не совпадает по цвету со "средним" дивом. В ИЕ это не проблема -- он иначе чем Лиса интерпретирует рамки, и поэтому там просвечивает цвет BODY. А в Лисе что делать?</p>
<p>------------------------</p>
</div>
<div id="head">head</div>
</div>
</div>
<div id="foot">foot</div>
</body>
</html>

automatix · 28.11.2006, 14:09

Очень хорошее элегантное решение.

1. Может кто-нибудь, у кого Мас, посмотреть, как это в Safari?

2. Осталась проблема с рамкой.

KidsKilla · 28.11.2006, 14:29

Цитата:

Сообщение от automatix

Очень хорошее элегантное решение.

1. Может кто-нибудь, у кого Мас, посмотреть, как это в Safari?

2. Осталась проблема с рамкой.

нормально в сафари.

а что с бордерами?

automatix · 28.11.2006, 14:38

То, что я описал в посте перед твоим постом с кодом. Что делать, если содержимое страницы должно иметь бордер? Если я ставлю бордер для #wrap, он, естественно, делает горизонтальный скролл.

KidsKilla · 28.11.2006, 15:48

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
*{margin:0;padding:0;}
HTML,BODY{height:100%;}
#wrap{min-height:100%;_height:100%;margin-bottom:-70px;background:lightblue;border:solid red;border-width:0 5px;}
#head{height:50px;background:#fc0;position:absolute;top:0;left:0;width:100%;border-bottom:5px solid red;}
#body{padding:50px 0 70px;}
#foot{height:70px;background:pink;border-top:5px solid red;}
</style>
</head><body>
<div id="wrap"><div id="body">
<h1>main</h1>
<p>1.В ИЕ при приведенном выше лэйауте всегда появляется скролл. Высота страницы равна, насколько я понял 100% + высота хэдера + высота футера.</p>
<p>2. Высота средней области в Лисе зависит от наполнения. А что, если страница должна быть поделена на три области разных цветов (см. первое сообщение)? Можно, конечно, использовать в качестве цвета для "середины" цвет дива-контеёнера. Неэлегантно, но, может, всех устроит.</p>
<p>Усложняем: нужны три области и рамка "double", основной цвет которой, скажем, оранжевый, а пространство между внешней и внутренней частью не совпадает по цвету со "средним" дивом. В ИЕ это не проблема -- он иначе чем Лиса интерпретирует рамки, и поэтому там просвечивает цвет BODY. А в Лисе что делать?</p>
<p>------------------------</p>
</div></div>
<div id="foot">foot</div>
<div id="head">head</div>
</body>
</html>

automatix · 28.11.2006, 20:29

Выглядит чудесно, но я не об этом -- штука в том, чтобы бать бордер общему контейнеру (в твоем примере это, как я уже писал, #wrap). (Если бы это была таблица с тремя строками, то это выглядело бы так: TABLE {border : 6px double #ff9900;}.)