Как сверстать такую страницу (HEADER + CONTENT + FOOTER)
От: Аноним  
Дата: 17.02.10 02:44
Оценка:
Пример страницы ниже.
1) Надо чтобы HEADER + CONTENT + FOOTER занимали все окно браузера.
2) HEADER и FOOTER видны всегда вне зависимости от размера окна.
3) Если страница не влезает целиком в окно браузера, то CONTENT прокручивается (scrollbar), а HEADER и FOOTER видимы.

Спасибо!


----------------------------
|  HEADER                  |
----------------------------
|                          |
|   CONTENT                |
|                          |
----------------------------
|  FOOTER                  |
----------------------------
Re: Как сверстать такую страницу (HEADER + CONTENT + FOOTER)
От: Centaur Россия  
Дата: 17.02.10 09:36
Оценка: 39 (1)
Здравствуйте, Аноним, Вы писали:

А>1) Надо чтобы HEADER + CONTENT + FOOTER занимали все окно браузера.
А>2) HEADER и FOOTER видны всегда вне зависимости от размера окна.
А>3) Если страница не влезает целиком в окно браузера, то CONTENT прокручивается (scrollbar), а HEADER и FOOTER видимы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Header+Content+Footer</title>
<style type="text/css">
#header { position: fixed; left: 0px; top: 0px; right: 0px; height: 5em; }
#footer { position: fixed; left: 0px; bottom: 0px; right: 0px; height: 2em; }
#content { position: fixed; left: 0px; top: 5em; right: 0px; bottom: 2em; overflow: auto; }
</style>
</head>
<body>
<div id="header"><h1>Hello World!</h1></div>
<div id="content">
<p>Lorem ipsum…</p>
<p>[…]</p>
</div>
<div id="footer"><address>© 2010 Example.com</address></div>
</body></html>


Вёркэраунды для IE6 по вкусу.
Re[2]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Аноним  
Дата: 17.02.10 13:37
Оценка:
Здравствуйте, Centaur, Вы писали:

Работает как надо! Спасибо.

Не понимаю почему
{ position: fixed; left: 0px; top: 0px; right: 0px; height: 5em; }
не ужимает все до нуля, а растягивает на все окно


C>
C><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
C><html><head>
C><title>Header+Content+Footer</title>
C><style type="text/css">
C>#header { position: fixed; left: 0px; top: 0px; right: 0px; height: 5em; }
C>#footer { position: fixed; left: 0px; bottom: 0px; right: 0px; height: 2em; }
C>#content { position: fixed; left: 0px; top: 5em; right: 0px; bottom: 2em; overflow: auto; }
C></style>
C></head>
C><body>
C><div id="header"><h1>Hello World!</h1></div>
C><div id="content">
C><p>Lorem ipsum…</p>
C><p>[…]</p>
C></div>
C><div id="footer"><address>© 2010 Example.com</address></div>
C></body></html>
C>
Re[3]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Centaur Россия  
Дата: 17.02.10 13:56
Оценка:
Здравствуйте, Аноним, Вы писали:

А>Не понимаю почему
А>{ position: fixed; left: 0px; top: 0px; right: 0px; height: 5em; }
А>не ужимает все до нуля, а растягивает на все окно

http://www.w3.org/TR/CSS21/visuren.html#propdef-right
Re[2]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: SchweinDeBurg Россия https://zarezky.spb.ru/
Дата: 17.02.10 14:10
Оценка:
Здравствуйте, Centaur, Вы писали:

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


А можно ли с такой же элегантностью добавить еще и непрокручивающуюся зону справа (на худой конец — слева)?

----------------------------------
|  HEADER                  |  в  |
----------------------------  о  |
|                          |  т  |
|   CONTENT                |     |
|                          |  т  |
----------------------------  у  |
|  FOOTER                  |  т  |
----------------------------------


C>Вёркэраунды для IE6 по вкусу.

Да ну его в топку, этот ИЕ6!
[ posted via RSDN@Home 1.1.4 stable SR1 r568, accompanied by silence ]
- Искренне ваш, Поросенок Пафнутий
Re: Как сверстать такую страницу (HEADER + CONTENT + FOOTER)
От: MicSOFT  
Дата: 17.02.10 20:41
Оценка:
Здравствуйте, Аноним, Вы писали:


А>Пример страницы ниже.
А>1) Надо чтобы HEADER + CONTENT + FOOTER занимали все окно браузера.
А>2) HEADER и FOOTER видны всегда вне зависимости от размера окна.
А>3) Если страница не влезает целиком в окно браузера, то CONTENT прокручивается (scrollbar), а HEADER и FOOTER видимы.

А>Спасибо!


А>
А>----------------------------
А>|  HEADER                  |
А>----------------------------
А>|                          |
А>|   CONTENT                |
А>|                          |
А>----------------------------
А>|  FOOTER                  |
А>----------------------------
А>


Вот сайт: http://www.megaweb.org.ru (для примера).
Вот его таблица стилей: CSS
Смотрим правила для селекторов:
html{
overflow: auto}
...
#footer{
background: #000 url(../img/bg/wnd-hm.gif);
bottom: 0;
height : 30px;
left: 0;
position: fixed;
right: 0}
...
div.canvas{ /* content */
margin: 85px 0 30px 0}
div.canvas-normal{
margin: 85px 0 30px 10px}
div.canvas-shrinked{
margin: 85px 0 30px 290px}
div.canvas,
div.canvas-normal,
div.canvas-shrinked{
padding: 10px}
...
div.side-bar-normal,
div.side-bar-shrinked{ /* Левый столбец */
bottom: 40px;
position: fixed;
top: 95px;
width: 290px}
div.side-bar-normal{
left: 0}
div.side-bar-shrinked{
left: -280px}
...
#title{ /* header */
background: black url(../img/bg/title.jpg) center;
height: 55px;
left: 0;
position: fixed;
top: 0;
width: 100%}
Re[3]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Centaur Россия  
Дата: 17.02.10 20:53
Оценка: 39 (1)
Здравствуйте, SchweinDeBurg, Вы писали:

SDB>А можно ли с такой же элегантностью добавить еще и непрокручивающуюся зону справа (на худой конец — слева)?

Не вижу причин против. В CSS для #header, #content, #footer меняем right: 0px на сколько надо; добавляем 
#sidebar { position: fixed; right: 0px; top: 0px; bottom: 0px; width: сколько-надо; }

добавляем
<div id="sidebar">
<ul><li><a href="где">чего</a></li>
    <li><a href="ещё">там</a></li>
    <li class="selected">у нас</li>
</ul>
</div>

Кстати, порядок div’ов в разметке важен (только) для тех юзеров, на которых не действует визуальный CSS: (1) пользователи lynx, links и w3m; (2) пользователи, отключившие CSS; (3) слепые и слабовидящие пользователи, использующие screen reader; (4) гуглобот.
Re[4]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: SchweinDeBurg Россия https://zarezky.spb.ru/
Дата: 18.02.10 10:02
Оценка:
Здравствуйте, Centaur, Вы писали:

C>Не вижу причин против.

Супер, спасибо огромное! Проверил в Лисе, Опере и ИЕ — все как надо.

C>Кстати, порядок div’ов в разметке важен (только) для тех юзеров, на которых не действует визуальный CSS: (1) пользователи lynx, links и w3m; (2) пользователи, отключившие CSS; (3) слепые и слабовидящие пользователи, использующие screen reader; (4) гуглобот.

Эм-м-м... а выделенное — это как? Я знаю, что скрипты могут быть отключены, а вот CSS... И зачем такое может нужно, хотел бы я знать.
[ posted via RSDN@Home 1.1.4 stable SR1 r568, accompanied by silence ]
- Искренне ваш, Поросенок Пафнутий
Re[5]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Centaur Россия  
Дата: 18.02.10 18:17
Оценка: 12 (1)
Здравствуйте, SchweinDeBurg, Вы писали:

C>>Кстати, порядок div’ов в разметке важен (только) для тех юзеров, на которых не действует визуальный CSS: (1) пользователи lynx, links и w3m; (2) пользователи, отключившие CSS; (3) слепые и слабовидящие пользователи, использующие screen reader; (4) гуглобот.

SDB>Эм-м-м... а выделенное — это как? Я знаю, что скрипты могут быть отключены, а вот CSS... И зачем такое может нужно, хотел бы я знать.

В Firefox’е — View | Page style | No style. Помогает от сайтов, свёрстанных неудобным шрифтом/цветом/размером, если на него больше не планируется ходить. (Если планируется — расширение Stylish в руки.)
Re[6]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: SchweinDeBurg Россия https://zarezky.spb.ru/
Дата: 19.02.10 07:34
Оценка:
Здравствуйте, Centaur, Вы писали:

C>В Firefox’е — View | Page style | No style. Помогает от сайтов, свёрстанных неудобным шрифтом/цветом/размером, если на него больше не планируется ходить. (Если планируется — расширение Stylish в руки.)

Очень интересно, не знал о таком.
[ posted via RSDN@Home 1.1.4 stable SR1 r568, accompanied by silence ]
- Искренне ваш, Поросенок Пафнутий
Re[2]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Аноним  
Дата: 19.02.10 14:17
Оценка:
Здравствуйте, Centaur, Вы писали:

да. супер-супер! но у одного пользователя с IE6 не работает
Re[3]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Blob Беларусь  
Дата: 20.02.10 17:28
Оценка:
А>но у одного пользователя с IE6 не работает

это из-за "position: fixed;" — работает в IE7 и выше
Re[3]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Centaur Россия  
Дата: 21.02.10 07:28
Оценка:
Здравствуйте, Аноним, Вы писали:

А>да. супер-супер! но у одного пользователя с IE6 не работает

Так я ж там писал — костыли по вкусу, и ссылку приводил.
Re[2]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Holms США  
Дата: 26.02.10 00:59
Оценка:
Здравствуйте, Centaur, Вы писали:

Может еще поможете с такой версткой




Content растягивается в зависимости от того что внутри.
Главная проблема что-бы Menu2 всегда был прилеплен к нижней стороне левой части.
Footer не прилеплен к нижней части страницы, двигается вверх вниз в зависимости от контента.


Спасибо
... << RSDN@Home 1.2.0 alpha 4 rev. 1463>>
The life is relative and reversible.
Re[3]: Как сверстать такую страницу (HEADER + CONTENT + FOOT
От: Holms США  
Дата: 26.02.10 01:03
Оценка:
Здравствуйте, Holms, Вы писали:

H>Здравствуйте, Centaur, Вы писали:

H>Может еще поможете с такой версткой

H>


H>Content растягивается в зависимости от того что внутри.
H>Главная проблема что-бы Menu2 всегда был прилеплен к нижней стороне левой части.
H>Footer не прилеплен к нижней части страницы, двигается вверх вниз в зависимости от контента.

Забыл добавить, левая часть фиксированый ширины, все остальное на всю страницу.
... << RSDN@Home 1.2.0 alpha 4 rev. 1463>>
The life is relative and reversible.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.