X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Старая кроссбраузерная верстка, нужен современный аналог, небольшое упражнение по переучиванию на современный лад
yury_mw
yury_mw
Topic Starter сообщение 12.6.2009, 15:38; Ответить: yury_mw
Сообщение #1


Итак, есть вот такой вот коротенький код:
<html>
<head>
</head>
<body topMargin=0 leftMargin=0 marginHeight=0 marginWidth=0>
    <table cellspacing=0 cellpadding=0 border=1 width=700 height=100% align=center>
        <tr><td height=1>top</td></tr>
        <tr vAlign=top><td>middle</td></tr>
        <tr><td height=1>bottom</td></tr>
    </table>
</body>
</html>

для наглядности поставлен атрибут border=1 (при реальной верстке, естественно, использовался border=0)

Фактически, все просто:
* одноколоночная верстка страницы с местами под шапку, под контент и нижний отбойник.
* нерезиновая, 700px в ширину, отцентрованная по горизонтали в окне браузера.
* шапка и контент занимают ровно столько места, сколько нужно для размещения начинки и не более того.
* контент же занимает столько места
** (если контента мало) сколько нужно, чтоб было занято все окно браузера по высоте
** (если контента много) - соответственно область контента растягивается по-необходимости

Задача: сверстать это все с соблюдением новомодных стандартов от W3C
А. таблицей, вынеся ее оформление в css
и
B. блочной версткой

Вроде простая задача, но либо приходится применять совершенно неадекватные навороты, либо не соблюдается кроссбраузерность.
Что прикольно - даже простое добавление доктайпа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
к этому коду сбивает верстку набок. ;)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 12.6.2009, 16:20; Ответить: v1ex
Сообщение #2


html:
<!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">
  <head>
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  </head>
  <body>
    <div class="header">
      
    </div>
    <div class="middle">
    
    </div>
    <div class="footer">
    
    </div>
  </body>
</html>

css:
body
{
  margin: 0px;
  padding: 0px;
}

.header
{
  /*свои стили*/
}
.middle
{
  min-height: 400px;
}
.footer
{
  /*свои стили*/

}

чтоб было занято все окно браузера по высоте

http://tigir.com/javascript.htm, читаем "Как узнать ширину и высоту клиентской (рабочей) области окна браузера?"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
Topic Starter сообщение 12.6.2009, 16:34; Ответить: yury_mw
Сообщение #3


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

ЗЫ
в вашем коде
момент из п.2 нерезиновая, 700px в ширину, отцентрованная по горизонтали в окне браузера не раскрыт никак ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 12.6.2009, 17:56; Ответить: v1ex
Сообщение #4


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

Именно. Только я вот не вижу никакого смысла так делать, можете объяснить зачем?
омент из п.2 нерезиновая, 700px в ширину, отцентрованная по горизонтали в окне браузера не раскрыт никак wink.gif

Сорри, из головы вылетело:
.header
{
  margin: auto;
  width: 700px;
}
.middle
{
  margin: auto;
  min-height: 400px;
}
.footer
{
  margin: auto;
  width: 700px;

}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
Topic Starter сообщение 12.6.2009, 18:28; Ответить: yury_mw
Сообщение #5


(v1ex @ 12.6.2009, 17:56) *
Именно.

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

все же, думается, должны быть более адекватные задаче средства.
не может быть, чтоб блочная верстка была настолько ущербна, чтоб в ее арсенале не было средств, которые есть в допотопном html.

(v1ex @ 12.6.2009, 17:56) *
Только я вот не вижу никакого смысла так делать, можете объяснить зачем?

Странный вопрос.
Причин много может быть.
Ну, например, для того, чтоб при переключении между страничками с небольшим (но разным) количеством контента, отбойник визуально не скакал вверх вниз, а был всегда внизу окошка браузера, где ему собсно и положено быть.
Почему бы так не сделать, особенно, если это реализуется простым добавлением атрибута в табличке height="100%" ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 12.6.2009, 19:11; Ответить: v1ex
Сообщение #6


(yury @ 12.6.2009, 20:28) *
а можно код в студию?
а то мне кажется, что оно как-то не сильно коротко и просто будет...

все же, думается, должны быть более адекватные задаче средства.
не может быть, чтоб блочная верстка была настолько ущербна, чтоб в ее арсенале не было средств, которые есть в допотопном html.

Код писать не буду, там и так все понятно. Алгоритм вы примерный написали. Осталось только найти функцию, которая будет вычислять высоту шапки и подвала.

(yury @ 12.6.2009, 20:28) *
Странный вопрос.
Причин много может быть.
Ну, например, для того, чтоб при переключении между страничками с небольшим (но разным) количеством контента, отбойник визуально не скакал верх вниз, а был всегда внизу окошка браузера, где ему собсно и положено быть.
Почему бы так не сделать, если это реализуется простым добавлением атрибута в табличке height="100%" ?

Согласен, причины есть, но на практике они редко востребованы.
А вот ваша причина мне кажется не совсем адекватной... Во первых, на нормальных сайтах обычно контента больше чем можно уместить в клиентской области по вертикали. Во вторых, если даже контента будет мало, пустое пространство где должен быть контент, будет смотреться тупо. Тем более не на резине.

Вообще можно приделать футер следующим образом:
<!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">
  <head>
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  </head>
  <body>
    <div class="box">
    </div>
    <div class="footer">
      Тра-та-та, футер
    </div>
  </body>
</html>

body
{
  margin: 0px;
  padding: 0px;
}

.box
{
  margin-bottom: 30px;
}

.footer
{
  background-color: #006699;
  bottom: 0px;
  height: 30px;
  position: fixed;
  width: 100%;
}

Он абсолютно всегда будет оставаться внизу страницы.
Только последний элемент страницы, должен иметь отступ снизу размером с ширину футера.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
Topic Starter сообщение 12.6.2009, 19:46; Ответить: yury_mw
Сообщение #7


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

Это вы нормальных мониторов не видели ;)
  bottom: 0px;
  position: fixed;

для данного случая никак не годится - если контента будет много, он будет перекрыт "футером".
  margin-bottom: 30px;

конечно, поможет вытащить контент из-под футера скролом, но смотрится кривовато.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 12.6.2009, 20:05; Ответить: v1ex
Сообщение #8


Это вы нормальных мониторов не видели wink.gif

Это вы к чему? Причем здесь мониторы? Если, вы к тому, что у меня маленький монитор, где все умещается, вы глубоко ошибаетесь ;)

Решения может и есть, но я знаю только одно, т.к. этим пользуюсь очень редко.

конечно, поможет вытащить контент из-под футера скролом, но смотрится кривовато.

Каким еще скоролом? О_о
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
Topic Starter сообщение 12.6.2009, 20:10; Ответить: yury_mw
Сообщение #9


Это вы к чему?

это я к тому что бывают мониторы, на которых помещается ну очень много контента.
это сказано никак не в обиду вашему монитору ;)
Каким еще скоролом? О_о

скрол - прокрутка, калька от англ. scroll
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
v1ex
v1ex
сообщение 12.6.2009, 21:00; Ответить: v1ex
Сообщение #10


Я знаю что такое скрол, вы мне объясните, как вы скролом собираетесь из под футера контент выдернуть. О_о
Я ведь сделал, отступ, что бы контент не лез под футер....
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) ✅ Dolphin{anty} — современный антидетект-браузер -❗️10 бесплатных профилей каждому❗
65 DolphinAnty 21025 20.3.2024, 17:06
автор: DolphinAnty
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСовременный сервис для быстрого и безопасного обмена валют.
12 CryptoTims 4255 13.3.2024, 23:14
автор: CryptoTims
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91685 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Нужен сайт с автонаполнением по XML
1 REGNET 1133 7.3.2024, 15:08
автор: REGNET
Открытая тема (нет новых ответов) Нужен райтер на постоянку
13 Kiloan_Frost 3310 6.3.2024, 22:24
автор: vitaliraduga


 



RSS Текстовая версия Сейчас: 29.3.2024, 17:07
Дизайн