Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Web - полезные советы по веб-строительству - Кроссбраузерное выравнивание по центру (table height=100%)


Компания ИнфоСтарз
Компьютеры и Интернет
Безопасность от взломов
WEB-Дизайн
Компьютерная техника
Лучшие провайдеры
Программирование
SOFT
Сервисы, почта

БЕСПЛАТНЫЙ
ХОСТИНГ ФАЙЛОВ

Книги
Музыка
Мелодии для мобильных
 
Изображения
 
Видео
 
Игры
 
Программы

 


Добрый день, уважаемые читатели!

Наша сегодняшняя тема: "Кроссбраузерное выравнивание по центру (table height=100%)".

Как заставить работать следующий код в 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, не забыв, тем не менее, указать в таблице стилей приведённое выше решение для растягивания канвы.

По материалам сайта

Обращаю Ваше внимание, что очень много полезной информации можно найти на новом портале RSSportal.ru. В разделе Компьютеры/Интернет - Программирование можно найти много новостных лент на тему сайтостроительства, html-верстки, приемов css. При этом Вам необязательно пользоваться специальными программами и знать что-нибудь про RSS: вся информация доступна на сайте.

Если Вы продвинутый пользователь, то для Вас много интересной информации и удобных настроек. Регистрируясь, Вы получаете возможность сохранять список интересных лент, управлять ими и настраивать их на свой вкус.

Продолжается внутренне тестирование сервиса по созданию RSS-ленты любого сайта через RSS портал: в ближайшее время Вам достаточно будет ввести адрес страницы с Вашими новостями  (или любой другой информацией), начало и конец этого блока с новостями и мы создадим для Вас RSS-ленту!

Если Вы хотите, чтобы мы сообщили Вам о запуске этого сервиса, оставьте заявку здесь.

До скорых встреч!

ОН:

Мадемуазель! Разрешите молодому троллю узнать Ваше имя, чтоб я и мой отряд могли слагать песни о Вашей Красоте!
ОНА:
Шикарнозадая
ОН: Ой-йо…

В избранное