Смежные статьи: Выравнивание надписей серверных элементов ASP.NET с помощью стилей CSS и Урок верстки из .psd
Пару дней назад один посетитель данного сайта, Максим, попросил меня показать, как сверстан сайт skillcoding.com.
Максим, дело в том, что весь контент сайта (любой страницы) сформирован таким образом, что полностью разъезжается на всю ширину окна браузера, не зависимо от разрешения экрана и абсолютной ширины монитора.
Хотя сам я мало чего понимаю в html-верстке (профиль программера, а не верстальщика), но все же многолетняя совместная работа с верстальщиками не могла не сказаться положительно в плане моих познаний html/css.
Конечно, любой прогер ASP.NET обязан хотя бы владеть основами html/css, иначе ничего путнего с чистого ASP.NET по получиться.
Итак, смотри - вопрос заключается в следущих аспектах:
а) как скомпоновать блоки на сайте так, что б сверху был один горизонтальный header, в центре три вертикальных блока, крайние заданной ширины и прилегающие к краям экрана, средний «резиновый» и размещающийся между крайними блоками. Под всеми этими блоками размещается futer, занимающий, как и header горизонтальное 100% положение.
б) как заставить все блоки находиться в точно заданных позициях не накладываясь друг-на-друга и не съезжая при изменении внутри них контента.
Поехали.
Верстка основана на тегах <div>.
<!-- шапка -->
<div id="header">Шапка</div>
<!-- левый вертикальный -->
<div id="left">левый блок</div>
<!-- правый вертикальный -->
<div id="right">правый блок</div>
<!-- центральный блок (для динамического контента)-->
<div id="middle">центральная резина</div>
<!-- футер -->Вот имеем 5 блоков div.
<div id="footer">футер</div>
Скажу, что в табличной верстке такое позиционирование задать проще простого. Одна таблица table, три строки tr и три столбца на каждую td. Верхняя и нижняя строки содержат по одному столбцу, colspan которых установлено в 3.
Средняя строка имеет 3 столбца. Ширина таблицы 100%. Вот и имеем резиновую верстку с точно позиционируемыми блоками.
Почему я не использую табличную верстку сейчас объяснять не стану.
Гораздо более интереснее увидеть стили, которые позволяют выше описанным div-ам занять свое место на екране.
#header
{
width: 100%;
margin: 0px;
text-align: center;
background-color:#ff9999;
}
#right
{
float: right;
width: 200px;
margin: 20px 0px 0px 0px;
text-align: right;
background-color:#99ff99;
height: 400px;
}
#middle
{
margin: 20px 220px 10px 220px;
background-color:#9999ff;
height: 400px;
text-align: center;
}
#footer
{
margin: 0;
border: solid 1px Dark;
background-color: #dbc1c1;
font-size: 10px;
text-align: center;
clear:both;
}
#left
{
background-color:#fdff5e;
margin: 20px 0px 0px 0px;
width: 200px;
float:left;
height: 400px;
}
Думаю, здесь все ясно как белый день. Дополнительные стили введены для того, что б было нагляднее увидеть местопозиционирование каждого блока.
А реально, всю ситуацию разруливает следующее:
#header
{
width: 100%;
}
#right
{
float: right;
width: 200px;
}
#middle
{
margin: 20px 220px 10px 220px;
}
#footer
{
clear:both;
}
#left
{
width: 200px;
float:left;
}
Ключевым свойством является float. Благодаря ему мы указываем блоку как позиционировать себя относительно соседнего блока. Соседний считается предыдущий и следующий в html-разметке. Именно в том порядке, в котором мы их указали на странице.
Кстати Макс, попробуй правый и центральный блок поменять местами в разметке. И ты увидишь, что правый блок не приляжет к хедеру, а опустится под центральный.
Я понимаю почему ты не мог так долго совладать с позиционированием – сам долго мучался пока заставил дивы ложиться так, как требуется.
Поиграй с отступами и шириной блоков, что б добиться требуемой ширины и расстояний между блоками.
А получиться должно следующее:
