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

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

automatix

13.11.2006, 00:24

Всем привет!

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

Спасибо.

automatix

15.11.2006, 17:19

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

Я тут накопал пример (http://barrierefrei.e-workers.de/workshops/dreiplus/index.html). В принципе реализует то, что я описал, но как-то "нелегально" -- с орицательными margin, c div'ами-распорками... Неэстетично, в общем.

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

Skubent

15.11.2006, 17:26

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

KidsKilla

15.11.2006, 20:02

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

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

Kikasso

18.11.2006, 00:46

Я знаю! FRAMESET!

etc

18.11.2006, 00:58

ничего нелегального в нём нету.
Ага, кроме
/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack
* Stupid hack lets IE see 100%, others see 70%.
*/
#footer {
\width: 100%;
w\idth: 70%;
}
:D

Skubent

20.11.2006, 12:47

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

KidsKilla

20.11.2006, 15:12

Ага, кроме
/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack
* Stupid hack lets IE see 100%, others see 70%.
*/
#footer {
\width: 100%;
w\idth: 70%;
}
:D
а теперь попробуй объясни где тут нелегальность.

etc

20.11.2006, 15:22

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

baron27

20.11.2006, 18:47

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

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

KidsKilla

21.11.2006, 23:11

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

automatix

22.11.2006, 03:22

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

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



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



</body>
</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

Вот (http://standards.webmasterpro.de/data/upload_zentriertes%2BLayout%252C%2B100%2525%2BH%25F6he_1121535055_100_prozent_bsp.html) еще одно решение. Мне оно нравится намного больше, чем те, что я встречал до этого. Валидатор, если чуток поработать над кодом напильником, тоже вполне доволен.

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

CSS
* {
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
<?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öhe</title>
</head>

<body>

<div id="box">

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



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

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

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;}.)

KidsKilla

29.11.2006, 12:28

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

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

automatix

30.11.2006, 00:51

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

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

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

automatix

28.12.2006, 10:50

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

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

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

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

KidsKilla

28.12.2006, 13:57

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

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

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

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

AlexSol

28.12.2006, 14:17

похоже?
http://www.cssstyle.ru/article/exampl/freim.html

automatix

28.12.2006, 18:09

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

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