[HTML] Вертикальное центрирование контента

yura4773

Задача
Иногда требуется, чтобы какая-то информация на веб-странице центрировалась по вертикали или располагалась по нижнему краю видимой части страницы. (Например небольшая формочка в центре и/или подпись внизу как на странице www.ya.ru.)
Вариант решения
Этого можно добиться, создав в качестве основы страницы таблицу с шириной и высотой 100% (как и сделано на www.ya.ru) (см. пример кода ниже).
Проблема (предложенного варианта)
Беда в том, что в HTML 4.01 у элемента TABLE нет атрибута height (т.е. предлагаемый вариант кода не является корректным HTML-кодом с точки зрения спецификации HTML 4.01 и если в HTML коде присутствует необходимое по спецификации объявление типа документа (document type declaration):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

...этот трюк работать перестаёт (таблица не растягивается по вертикали на всю видимую часть страницы).
Вопрос
Не знает ли кто из присутствующих, как решить поставленную задачу, оставаясь в рамках спецификации HTML 4.01?
Пример кода
Так правильно (с точки зрения спецификации но не работает (контент не центрируется по вертикали в броузере(*:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ru">

  <head><title>Test</title></head>

  <body>

    <table width="100%" height="100%">

      <tr><td align="center" valign="middle">

        <h1>Centered text</h1>

    </table>

  </body>

</html>

Если убрать две первые строки - то неправильно (с точки зрения спецификации но работает (контент центрируется в броузере(*.
(*) Пример тестировался в IE 6 и Opera v7.5.
Примечание
Если использовать такую форму объявления типа документа (опять же с www.ya.ru):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

...то обсуждаемый "трюк" работает, но это опять же не соответствует спецификации.

stm7884696

попробуй через CSS... (типа пропиши высоту стилем)
если у тебя жесткий размер по вертикали, то просто задай абсолютное позиционирование...
А вообще - зафиг оно тебе нужно? Зделай как яндекс... Им студия артемия лебедева пишет.. Значит правильно... А этот В3К валидатор гонит не по деццки... там у них на сайте неправильно обработка твоей страницы идет... Так что не беспокойся...
ЗЫ Если все же найдешь, как правильно - напиши... (интересно ради интереса

)

yura4773

попробуй через CSS... (типа пропиши высоту стилем)

Походу с CSS'ом та же лажа: при замене строки


    <table width="100%" height="100%">

на строку


    <table style="width:100%;height:100%">

ситуация в точности повторяется. :-\
Я вообще-то в CSS'е, к сожалению, профан... Т.ч. если кто знает, как с его помощью это можно сделать - подскажите, плз.

если у тебя жесткий размер по вертикали, то просто задай абсолютное
позиционирование...

Не, не катит: хоца, чтобы при любом размере окна контент был в серединке (по нижнему краю (если, конечно, умещается по вертикали.

А вообще - зафиг оно тебе нужно? Зделай как яндекс... Им студия артемия лебедева пишет.. Значит правильно...

И вовсе не значит. Они пишут так, как им проще.

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

А этот В3К валидатор гонит не по деццки... там у них на сайте неправильно обработка твоей страницы идет...

Хм? Мона поподробнее? Что-то мне не особо верится, чессзать... :-\

ЗЫ Если все же найдешь, как правильно - напиши...

Постараюсь не забыть, если что... Но вообще-то я надеюсь найти ответ здесь.

Dasar

Задавай через JavaScript.

vini

Как добиться в IE, Mozilla и Opera выравнивания текста по центру документа с помощью тега table и атрибута height?
Время от времени меня спрашивают, как заставить работать следующий код в Opera 7.0, а также в Internet Explorer 6 и Mozilla, когда страница в режиме Standards compliance mode:

<table width="100%" height="100%">
<tr>
<td align="center">текст, который должен располагаться в центре страницы</td>
</tr>
</table>

Почему текст получается прижатым к верхней границе документа, вместо того, чтобы расположиться в центре? Прежде всего дело в том, что в спецификации HTML 4.01 у тега table нет атрибута height, и поэтому браузеры в режиме совместимости со стандартами (а Opera 7.0 в любом случае) его игнорируют. Но самое интересное, что они перестают его игнорировать, если в CSS указать следующую конструкцию для растягивания канвы документа:

html,body{
height:100%;
margin:0px;
padding:0px
}

Собственно, вам даже не нужно что-то менять в самом HTML коде, в котором у вас прописана (быть может давно, когда вы и не думали, что когда-нибудь height могут «отменить») высота таблицы.
Предвидя вопросы, хочу сделать пару замечаний по приведённому стилевому описанию.
Во-первых, нужно указывать оба элемента html и body, так как просто body недостаточно. Например, для Mozilla в Standards compliance mode канвой является именно элемент html, а не body.
Во-вторых, если убрать обнуление margin и padding, то опять же в режиме совместимости со стандартами у страницы появится неприятная вертикальная полоса прокрутки.
Ну и напоследок хочу отметить, что в любом случае документ, в котором содержится тег table с атрибутом height, не пройдёт проверку. Если уж вам будет греть душу сознание того, что ваши документы valid, советую заменить этот атрибут на CSS свойство height, не забыв, тем не менее, указать в таблице стилей приведённое выше решение для растягивания канвы.

yura4773

О. Пасибки.

Изврат, конечно, но лучше, наверно, не сделаешь.

И ведь сайт этот (htmlcoder.visions.ru) я заприметил в своё время... Жаль, что не пролистал основательно...

yura4773

Тоже вариант.

А он будет корректировать высоту при изменении размеров окна?

Dasar

если повесишь JavaScript на изменение размеров страницы - то будет.

stm7884696

А этот В3К валидатор гонит не по деццки... там у них на сайте неправильно обработка твоей страницы идет...
Хм? Мона поподробнее? Что-то мне не особо верится, чессзать... :-\

Можно... В свое время, летом, верстал одну страничку... В TopStyle 3.10 ... Ну там есть автопроверка на валидность у В3К... Ну я и начал жать... Дык у меня ошибок навыдавало - мама не горюй... Причем иногда ругалось даже на то, то в спецификации у них на сайте написано... Потом почитал, форумы и статьи по этому поводу , и понял, что походу тама все сырое еще просто... Так например у меня ругаеться на то, что тег <body> не закрыт, если в него <div> вставить, а потом его закрыть </body>.. Ну или атрибут target в теге <a>, который там же в спецификации разрешен...
Так что я теперь на валидность не особо заморачиваюсь... Особенно послетого, как разверстал под xhtml 1.0 strict пару страничек... Ибо все равно это нафиг никому не нужно, а гемора - море...
Теперья пишу, что бы работало..
ЗЫ Может В3К и лучше всех рюхают в спецификациях и всем таком, но IE, Mozilla & Opera плевать хотели на точное соблюдение всех спецификаций и еще ни разу полностью все не соблюдали... Отсюда вывод, если писать строго по В3К - то тебя просто не поймут некоторые браузеры...

yura4773

Спасибо за подробный ответ. Жаль, что не всё так идеально, как хотелось бы...
А насчёт соответствия спецификации - это для меня вопрос принципиальный, а не практический. Спецификация определяет, что является "правильным". Если разработчики браузеров не считают для себя нужным делать "правильно" - это вопрос их личного выбора. Но это не даёт мне морального права поступать так же. От того, что десяток руководителей посчитали целесообразным упростить процесс разработки в ущерб качеству - страдают десятки тысяч разработчиков, вынужденные вместо написания "правильного" кода - заниматься подгонкой своих приложений под множество кривых браузеров...
Да нет, ну я, конечно, не такой безнадёжный идеалист. Я понимаю, что никому не нужен формально правильный код, который нигде не работает на практике. Но всё же думаю, что надо стараться делать максимально правильно, а уж потом корректировать результат, подгоняя его под неидеальные условия эксплуатации.

sveta75

Спецификация определяет, что является "правильным".

Спецификации это не заповеди, и W3C это не бог, так что прекратите сокрушаться о несовершенстве этого и других миров.

a10063

Спецификации это не заповеди, и W3C это не бог

но W3C взялся за такое неблагодарное дело, как создание спецификации
все же стоит ценить этот труд

stm7884696

ценить может и стоит..
А вот играть точно стоит по правилам реального мира...

yura4773

Не знаю, м.б. это только желаемое, выдаваемое за действительность, но...

Валидный код браузер выведет быстрее, чем невалидный. Валидный код браузер выведет лучше, чем невалидный. Все больше и больше браузеры подчиняются стандартам, и потому все более важным является валидный и стандартный HTML-код.

Взято отсюда и, видимо, является переводом этого.

stm7884696

оба эти сайта мне ни о чем не говорят... Не бывает такого, что бы люди ловили рыбу, а потом пришел шахматист и стал подгонять лов рыбы под свои стандарты...

artimon

оба эти сайта мне ни о чем не говорят...

Нашёл чем гордится.

dedwowan

А что, должны говорить?)

Оставить комментарий