Использование однопиксельного прозрачного giFа
Использование однопиксельного прозрачного изображения в формате GIF является одним из самых древних и популярных решений проблемы отступа в HTML. Идея данного метода заключается в том, что нужная высота или ширина (или и то и другое) выставляются в атрибутах WIDTH и HEIGHT элемента IMG, который представляет собой однопиксельный прозрачный GIF. Растягиваясь, это изображение визуально никак не изменяется, т.е. остается прозрачным. Безусловным преимуществом этого подхода является то, что с его помощью можно задавать как горизонтальные так и вертикальные отступы.
Пример использования однопиксельного прозрачного GIFа
<img src="images/spacer.gif" width="10" height="25" border="0" alt="" />
Популярность этого метода объясняется тем, что такое решение понимают практически все браузеры одинаково. Несмотря на то, что с появлением современных браузеров и хорошей поддержкой CSS, использование такого решения становится более редким, но все еще приемлемым. Разумеется, такой подход не добавляет ясности в структуру HTML кода, но скорее является вынужденной мерой при составлении особенно тех документов, которые должны поддерживать максимальное количество доступных в Интернет браузеров.
Использование css свойств
Не стоит увлекаться использованием однопиксельного прозрачного изображения, если вам не нужна совместимость документа со старыми браузерами. Вместо этого используйте CSS атрибуты, такие как margin (см. 5.5.9), padding (см. 5.5.10) и text-indent.
Проверка документов на соответствие спецификациям
Для того чтобы убедиться, что ваш документ соответствует заданной (и описанной в DOCTYPE) спецификации, существует специальный сервис, или так называемый валидатор, предоставленный консорциумом W3C и доступный по адресу: http://validator.w3.org/
W3C валидатор является весьма удобным средством для проверки валидности документов и выявления ошибок. Он четко покажет в какой строке ошибка и на что следует обратить внимание для документов данного типа. Помимо проверки HTML и XHTML это средство также пригодно для оценки документов, имеющих родство с XHTML, таких, как, например XHTML+MathML, XHTML+MathML+SVG, а также SVG.
Проверка CSS файла также возможна, используя соответствующий W3C сервис, доступный по адресу: http://jigsaw.w3.org/css-validator/
Я думаю нет нужды говорить, что следование общепринятым стандартам написания веб-документов вносит вполне очевидную упорядоченность в многоликом изобилии Интернета. Это, несомненно, является хорошим тоном любого веб-разработчика, от индивидуальной личности до крупной компании.
Основные виды layout веб-страниц
Все примеры ориентированы на реализацию при <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. Фиксированный (fixed) - имеет фиксированную ширину контента.
HTML:
<div id="main">
<div id="header">
header
</div>
<div id="leftcolumn">
left column
</div>
<div id="content">
content
</div>
<div id="rightcolumn">
right column
</div>
<div id="footer">
footer
</div>
</div>
CSS:
#main {
margin: 0 auto;
width: 710px;
}
#header {
width: 710px;
height: 50px;
}
#footer {
width: 710px;
height: 50px;
clear: both;
}
#leftcolumn {
width: 100px;
float: left;
}
#content {
width: 500px;
float: left;
}
#rightcolumn {
width: 110px;
float: left;
}
1.1. Может содержать резиновые шапку (header) и/или подвал (footer).
HTML:
<div id="header">
header
</div>
<div id="main">
<div id="leftcolumn">
left column
</div>
<div id="content">
content
</div>
<div id="rightcolumn">
right column
</div>
</div>
<div id="footer">
footer
</div>
CSS:
#main {
margin: 0 auto;
width: 710px;
}
#header {
width: 100%;
height: 50px;
}
#footer {
width: 100%;
height: 50px;
clear: both;
}
#leftcolumn {
width: 100px;
float: left;
}
#content {
width: 500px;
float: left;
}
#rightcolumn {
width: 110px;
float: left;
}
2. Резиновый (flexible) - имеет динамически меняющуюся ширину контента, зависящую от размера окна браузера.
HTML:
<div id="main">
<div idclass="header">
header
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
CSS:
#main {
width: 100%;
}
#header {
width: 100%;
height: 50px;
}
#footer {
width: 100%;
height: 50px;
clear: both;
}
#content {
width: 100%;
float: left;
}
2.1. Может содержать одну или более колонок фиксированной ширины.
HTML:
<div id="main">
<div id="header">
header
</div>
<div class="content-holder">
<div id="leftcolumn">
left column
</div>
<div id="rightcolumn">
right column
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
Замечание: Если ширина правой колонки меньше чем отведенное для нее в contentHolder'е место и если между rightcolumn и content должен быть отступ (допустим в 5px), то для IE (как 6-й так и 7-й версий) надо указать левый отступ для rightcolumn.
CSS:
* html #content {
margin-left: 5px;
}
*+html #content {
margin-left: 5px;
}
Замечание:Сокращать до *html.content,*+html.contentнельзя.
CSS:
#main {
width: 100%;
}
#header {
width: 100%;
height: 50px;
}
#footer {
width: 100%;
height: 50px;
clear: both;
}
.content-holder {
padding: 0 110px 0 100px;
}
#leftcolumn {
width: 100px;
float: left;
display: inline; /* решение проблемы в IE 1*/
position: relative;
margin-left: -100px;
}
#rightcolumn { width: 110px; float: right; display: inline; /* решениепроблемывIE */ position: relative; margin-right: -110px; }
#content {
width: 100%;
float: left;
}
2.2 Может содержать одну или более колонок относительной ширины.
HTML:
<div id="main">
<div id="header">
header
</div>
<div class="content-holder">
<div id="leftcolumn">
left column
</div>
<div id="rightcolumn">
right column
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
CSS:
#main {
width: 100%;
}
#header {
width: 100%;
height: 50px;
}
#footer {
width: 100%;
height: 50px;
clear: both;
}
.content-holder {
padding: 0 22% 0 20%;
}
#leftcolumn {
width: 20%;
float: left;
display: inline; /* решение проблемы в IE */
position: relative;
margin-left: 20%;
}
#rightcolumn {
width: 22%;
float: right;
display: inline; /* решениепроблемывIE */
position: relative;
margin-right: 22%;
}
#content {
width: 100%;
float: left;
}