|
Сегодня мы немного поговорим о верстке. Я расскажу о паре приемов, которыми обычно пользуюсь при создании сайтов.
Начнем, пожалуй, с глобального — вёрстка дивами в несколько колонок. Я обычно пользуюсь отрицательным значением Margin, чтобы притянуть правый блок. Это избавляет код от абсолютного позиционирования дивов, что значительно упрощает работу с кодом и делает страничку более адекватной к кроссбраузерности.
Итак, допустим нам надо сделать страничку вот с таким макетом:
С шапкой и футером все понятно — им задается параметр width=100%; и, если требуется, какое–то значение height и дело с концом. А вот основную часть можно сделать несколькими способами. Вот тут–то я и отдаю предпочтение следующей верстке: Задаем зеленому диву выравнивание по левому краю и ширину в 100% (да, да. Именно сто процентов). Но кроме этого притягиваем серый див с помощью отрицательного значения margin-right:
1
2
3
4
5
| .content {
float:left; /* выравниваем по левому краю */
width:100%; /* задаем ширину 100% */
margin-right:-300px; /* отрицательным значением притягиваем правый блок */
} |
Соответственно выравниваем серый див по правому краю и задаем ширину в 300px:
1
2
3
4
| .nav {
float:right;
width:300px;
} |
Не забываем одну маленькую деталь: Если дивы имеют границу (border:1px; например), то нужно увеличить значение на величину границы справа и слева, т.к. бордюры обводят div снаружи, увеличивая тем самым его размеры.
Теперь перейдем к футеру. Поскольку плавающие элементы обрабатываются отдельно от остальных, нам нужно сделать так, чтобы зеленый и серый блоки не заезжали на футер при растягивании по вертикали. Для этого зададим нашему подвалу параметр clear:both; вот так:
1
2
3
4
| .footer {
clear:both;
width:100%;
} |
Этим мы вернем обработанные плавающие дивы в общий поток и вся остальная верстка пойдет после них безо всяких наездов друг на друга.
Кстати, если бы нам нужна была верстка в три колонки, чтобы резиновой была только средняя, тогда нам нужно было бы добавить перед центральным блоком еще один div, с выравниванием по левому краю и заданной шириной (float:left; width:300px; например) а значение margin–right у центрального блока соответственно уменьшить на эту ширину (margin-right:-600px;).
Теперь немного коснемся скругленных углов у дивов. Я делаю их всегда картинками, поскольку если уж посетитель смотрит сайт без картинок — значит ему до лампочки все навороченные шапки, менюшки и уж тем более скругленные углы. И я не собираюсь заставлять его качать лишний код, чтобы он получил сомнительное удовольствие от созерцания этих самых углов.
Итак, тут всё просто. Закругленные углы делаются обычными вложенными друг в друга дивами у каждого из которых прописан в CSS один из уголков. Для наглядности покажу картинку:
Делается это вот таким кодом:
1
2
3
4
5
6
7
8
9
| <div style="background-color:#999; background-image:corner_left_top.gif; background-position:left top; background-repeat:no-repeat;">
<div style="background-image:corner_right_top.gif; background-position:right top; background-repeat:no-repeat;">
<div style="background-image:corner_right_bottom.gif; background-position:right bottom; background-repeat:no-repeat;">
<div style="background-image:corner_left_bottom.gif; background-position:left bottom; background-repeat:no-repeat; padding:10px;">
Содержимое дива
</div>
</div>
</div>
</div> |
При этом не забываем задать внешнему диву цвет фона таким же, как и цвет уголков (background-color:#999;). А у внутреннего дива настроить отступы (padding:10px;) такими, чтобы текст не залезал на уголки. Как видно, всё на самом деле очень просто. Такой блок можно сделать как статичным, так и резиновым по ширине и высоте и уголки от этого не пострадают.
От этого варианта можно отталкиваться при создании самых разных блоков с закругленными углами. Например, если блок статичный по ширине, достаточно всего два дива: один для верхних углов и второй для содержимого и нижних углов. На самом деле вариантов куча и все они в огромном количестве есть в интернете, стоит только поискать. Уж извините, но все я расписывать не буду.
Ну и самое интересное: Списки. Многие верстальщики почему–то не любят работать со списками, хотя если наблатыкаться, то с ними просто чудеса можно творить. Например вот такое горизонтальное меню сделано при помощи списка:
Причем кода намного меньше, чем если бы оно было сделано дивами. Для наглядности я прокомментирую строки в самом коде, сначала CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .links_ul li {
list-style-type:none; /* убираем обозначение пунктов списка */
display:block; /* делаем каждый пункт блочным элементом */
float:left; /* выравниваем каждый пункт по левой стороне */
}
.links_ul a:link,
.links_ul a:visited {
float:left; /* без этого не работает в кривом IE6 */
width:90px; /* ширина кнопки */
height:30px; /* высота кнопки */
padding:3px; /* отступ внутри */
margin:3px; /* отступ снаружи */
text-align:center; /* выравниваем текст по центру */
background-color:#9CF; /* задаем цвет фона */
border:1px solid #06c; /* задаем цвет бордюров */
line-height:30px; /* ширина строки, для выравнивания по середине */
color:#000; /* свет ссылок */
font-weight:bold; /* жирный шрифт ссылок */
}
.links_ul a:hover,
.links_ul a:active {
background-color:#3C6; /* меняем цвет фона при наведении мыши */
} |
И HTML:
1
2
3
4
5
6
| <ul class="links_ul">
<li><a href="#">Куда идем</a></li>
<li><a href="#">Мы с Пятачком</a></li>
<li><a href="#">Большой</a></li>
<li><a href="#">Секрет</a></li>
</ul> |
Ну вот. Симпатичная основа для меню без использования графики и лишнего кода.
|
Спасибо большое! =) Очень лаконично и полезно. Мне это очень пригодилось (я только начинаю переходить с табличной верстки на CSS). Было бы интересно почитать ваши новые статьи о таблицах стилей.
Здравствуйте,мне очень понравились эти работы и мне нужен их автор,нужно сайт красивенько оформить,ну тоесть шапку сделать и всё такое,и скок денег,(желательно бесплатно т.к. сайт стоит на UCOZe)
если что автор обращйся в асю 628-042-589
..остальное дело техники (css) =)
Да я согласен с нижеподписавшимися, CSS тема необъятная, но очень интересная. буду с нетерпением ждать новых статей. Спасибо.