Форум Flasher.ru - DIV-Layout - три горизонтальные области: [150px] [*] [150px]

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - DIV-Layout - три горизонтальные области: [150px] [*] [150px] (http://www.flasher.ru/forum/showthread.php?t=87845)

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

Всем привет!

Знает ли кто, как реализовать шаблон, горизонтльно разделенный на три области, где высота верхней и нижней фиксированные, а средней -- резиновая, при этом занимающая всю площадь между двумя остальными? (см. аттач)

Спасибо.

Братцы, ну что, правда никто не знает? :eek:

Я тут накопал пример. В принципе реализует то, что я описал, но как-то "нелегально" -- с орицательными margin, c div'ами-распорками... Неэстетично, в общем.

Может, есть все-таки идеи лучше?

Что значит - "нелегально" ? Пошустрому код движка браузерного подменяет, а потом рендерится ?

это называется футер прилипающий к низу страницы
http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

пример очень даже хорош. ничего нелегального в нём нету.
отрицательные маргины это хорошо. дивы-распорки от случая. но тож норм.

Я знаю! FRAMESET!

Цитата:

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

ничего нелегального в нём нету.

Ага, кроме

Код:

/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 

 * Stupid hack lets IE see 100%, others see 70%. 

 */

#footer {

    \width: 100%;

    w\idth: 70%;

}

А вот на https://opay.ru - без всякого нелегала и изысков сделан нижний див. Но с отрицательными маргинами и распоркой :)

Цитата:

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

Ага, кроме

Код:

/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 

 * Stupid hack lets IE see 100%, others see 70%. 

 */

#footer {

    \width: 100%;

    w\idth: 70%;

}

а теперь попробуй объясни где тут нелегальность.

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

Цитата:

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

я тоже не понимаю изврата - делать надо как можно удобнее => удобней растянуть на всю высоту таблицей - растягивай, нечего хаки всякие использовать.
css ведь должен избавить нас от основного "хака" - табличной верстки.
а тут получается тот же хер, только в профиль - избавились от одного хака посредством другого.

Цитата:

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

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

Спасибо за пример -- в самом деле неплохая штука. Я попробовал чуть-чуть очистить код от лишнего. Вот, что получилось ("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") бодер больше нуля и все сразу становится криво, причем в обоих браузеах.

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

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

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

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.

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

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

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

Идеи?

Код:

<!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>

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

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

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

Цитата:

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

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

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

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

Код:

<!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>

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

1) не TABLE { а TABLE TD{
2) если я правильно понял, то что ты хочешь невозможно на сегодняшний день сделать в общем виде. нужно будет делать конкретно под шаблон.

покажи шаблон, придкумается что-нибудь.

Цитата:

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

1) не TABLE { а TABLE TD{

Почему обязательно TD -- разве таблица не может иметь бордер?

Цитата:

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

покажи шаблон, придкумается что-нибудь.

Показываю (см. аттач). Пояснения: нужны три области. Высота верхней фиксированная, высота нижней -- тоже, средняя (ладно уж, хотя бы чисто визуально) занимает пространство между верхней и нижней. Этого мы с грехом пополам совместными усилиями кое-как добились. Теперь все, что находится на странице, получает общую рамку. При этом не простую, а золотую... )) То есть не solid, а double, при этом цвет пространства между внешней и внутренней рамкой не тот же самый, что цвет дива-контейнера.

В общем, привожу картинку. Давайте ломать голову вместе.

Вот решение (см. аттачмент).

100% валидно: XHTML 1.0 Strict & CSS 2, 2.1, 3

Протестировано на FF 2.0 und IE 7.0 (кстати, как это смотрится на в других браузерах?).

Всем спасибо!

Цитата:

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

ие норм 5.01, 5.5, 6.0
фф и опера таксебе. -- скролл есть всегда, бо бордеры + 100%
но если тьфу на скролл то работает везде.

@KidsKilla
ОК, спасибо.

@AlexSol
А как ты сам думаешь?