Тема по сути стара как мир, но, по моим наблюдениям, актуальности не теряет и новички все также продолжают делать ошибки.
Итак, первый вопрос о высоте таблиц.
Почему при установке DOCTYPE в начале документа не работает атрибут HEIGHT у таблицы?
Итак, первый вопрос о высоте таблиц.
Почему при установке DOCTYPE в начале документа не работает атрибут HEIGHT у таблицы?
<table height="100%">
<tr>
<td>
Таблица
</td>
</tr>
</table>
Проблема в том, что вообще в спецификации HTML нет атрибута height у таблицы. Т.е. его использование - это ошибка изначально.Так почему же это работает когда не указан DOCTYPE? Дело в том, что режим рендеринга страницы браузером определяется именно типом документа (DOCTYPE). Но когда DOCTYPE не указан браузер отрисовывает страницу в так называемом "quirks mode" не пытаясь соответствовать какому-то конкретному стандарту.
В режиме соответствия стандартам это работать не будет. Т.е. если у страницы указан полный DOCTYPE или если указан DOCTYPE XHTML
Так зачем мне указывать DOCTYPE?
Отвечу кратко - это гарантирует, или по крайней мере позволяет надеяться, что страница будет одинакого выглядеть в разных браузерах, а во-вторых - следование стандартам - это к тому же правило хорошего тона и в некоторых случаях может избавить вас от лишних проблем.
Так как же сделать, чтобы это работало?
Чтобы работал именно атрибут height - никак, а вот чтобы добиться того же результата нужно использовать CSS.
Для начала нужно задать CSS самого тела страницы:
В режиме соответствия стандартам это работать не будет. Т.е. если у страницы указан полный DOCTYPE или если указан DOCTYPE XHTML
Так зачем мне указывать DOCTYPE?
Отвечу кратко - это гарантирует, или по крайней мере позволяет надеяться, что страница будет одинакого выглядеть в разных браузерах, а во-вторых - следование стандартам - это к тому же правило хорошего тона и в некоторых случаях может избавить вас от лишних проблем.
Так как же сделать, чтобы это работало?
Чтобы работал именно атрибут height - никак, а вот чтобы добиться того же результата нужно использовать CSS.
Для начала нужно задать CSS самого тела страницы:
html, body {margin: 0px;padding: 0px;height: 100%;border: none;}
Для чего это нужно?
Дело в том, что таблица растягиваться на всю высоту элемента, в котором она содержится, т.е. в данном случае на высоту элемента BODY. Но он может не иметь высоту области отображения страницы в браузере, поэтому нам нужно задать высоту BODY принудительно.
Теперь создадим стиль для нашей таблицы:
Дело в том, что таблица растягиваться на всю высоту элемента, в котором она содержится, т.е. в данном случае на высоту элемента BODY. Но он может не иметь высоту области отображения страницы в браузере, поэтому нам нужно задать высоту BODY принудительно.
Теперь создадим стиль для нашей таблицы:
#full_height_table {height: 100%;}
Ну а HTML должен быть таким:
<body><table id="full_height_table"><tr><td>Таблица</td></tr></table></body>
Теперь у нас все замечательно работает и таблица имеет высоту в 100%.
Теперь второй вопрос.
Как в XHTML центрировать контент из блочных элементов?
Атрибут ALIGN="center" теперь нам не поможет. Чтобы центрировать блочный элемент по горизонтали нужно задать для него CSS со праметрами margin-left и margin-right.
Теперь второй вопрос.
Как в XHTML центрировать контент из блочных элементов?
Атрибут ALIGN="center" теперь нам не поможет. Чтобы центрировать блочный элемент по горизонтали нужно задать для него CSS со праметрами margin-left и margin-right.
#my_centered_div {margin-left: auto;margin-right: auto;}
Центрированный элемент
Это касается блочных элементов, чтобы центрировать текст нужно использовать CSS text-align: center;
Чтобы центрировать по вертикали нужно использовать свойство CSS родительского элемента vertical-align, но это подойдет только для текста, для блочного элемента следует добавить свойство display: table-cell;. Однако в Internet Explorer это работать не будет. Приемы как сделать вертикальное центрирование блочного элемента в IE можно посмотреть тут.
Чтобы центрировать по вертикали нужно использовать свойство CSS родительского элемента vertical-align, но это подойдет только для текста, для блочного элемента следует добавить свойство display: table-cell;. Однако в Internet Explorer это работать не будет. Приемы как сделать вертикальное центрирование блочного элемента в IE можно посмотреть тут.
#my_centered_div_container {vertical-align: middle;display: table-cell;}
Центрированный элемент
Небольшое демо:
Блочный элемент
Свойства CSS (кликайте и смотрите результат выше):
margin-left: 0px; margin-right: auto;
margin-left: auto; margin-right: auto;
margin-left: auto; margin-right: 0px;
И в заключение
Старайтесь задавать все параметры внешнего вида через CSS и вынесите CSS в отдельный файл, не прописывайте стили внутри страницы. В дальнейшем это избавит вас от многих проблем, если вы захотите изменить внешний вид и поведение страницы.
Старайтесь задавать все параметры внешнего вида через CSS и вынесите CSS в отдельный файл, не прописывайте стили внутри страницы. В дальнейшем это избавит вас от многих проблем, если вы захотите изменить внешний вид и поведение страницы.
