Четверг, 23-Ноябрь-2017, 4.57 AM

Dletemplate.ru

Категории раздела
Наш опрос
Оцените мой сайт
Всего ответов: 105
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Статьи

Главная » Статьи » CSS

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

Источник: http://www.internet-technologies.ru/articles/article_392.html
Категория: CSS | Добавил: mas (16-Сентябрь-2006)
Просмотров: 1831 | Комментарии: 2 | Рейтинг: 1.0/1
Всего комментариев: 1
1  
Добрый вечер,
С ребятами на днях и запускали бумажного змея.
повеселились,наснимали кучу фоток и роликов,выложили фотки в фейсбук, контакт, одноклассники, инстаграм, Живой Журнал ,но лайкали и репостили слабо,друзья посоветовали,замечательный сайт http://piar-grupp.eu/shop/raskrutka-facebook/category/16-raskrutka-facebook , крутанали это событие тем,что 50 тысяч просмотров роликов, накрутили кучу подписчиков на публичную страницу, сотни репостов на новости, тысчяи лайков на фотки . раскрутились и остались удовлетверены!!

Имя *:
Email *:
Код *: