TIPS OF WEB - заморочки с css
Vadias
Спецвыпуск Xakep, номер #025, стр. 025-106-1
(painter@gameland.ru, www.freehand.str.ru)
Всем известно, что веб-страницы в большинстве своем верстаются с помощью таблиц, так как только они из всего языка HTML позволяют более менее точно распихать элементы паги по нужным местам. Однако мало кто знает, что этому способу есть альтернатива - блоки CSS.
TIPSa 1
CSS позволяет создавать блоки определенной юзером ширины и высоты, задавать им разнообразные свойства и рассовывать их по странице в любое место с пиксельной точностью. Блок может содержать как текст, так и изображение, и вообще любые данные. Также он может вкладываться в другой блок (вложенность неограниченна). Таблицы в случаях глубокой вложенности начинают жестоко тормозить браузер, в то время как CSS-блоки обрабатываются довольно быстро.
TIPSa 2
Как создать простейший CSS-блок нужной нам ширины? Для этого сначала придется написать код его свойств и вставить в страницу либо в файл со стилями (это тот, который оканчивается на .css):
<STYLE TYPE="text/css">
#css-block {
width: 40px;
</STYLE>
Заметь, перед именем "css-block" стоит значок "#" - это значок ID. По правилам это значит, что блок такого типа будет единственным на странице. Если же ты хочешь усыпать все поле юзерского браузера такими блоками, правильнее будет поставить не "#", а точку, вот так: .css-block. В таком случае это будет класс.
Теперь в любое место страницы вставляем непосредственно блок. Делается это тегами <DIV>:
<DIV ID="css-block">
Этот драный блок имеет ширину 40 пикселей
</DIV>
TIPSa 3
На большинстве сайтов используется трехколоночная верстка: первая, узкая, колонка - навигация по сайту, вторая, самая широкая, - текст (новости и прочая информация), третья, узкая, - разная мелочь, реклама, голосования и тому подобное. Таким образом, мы можем сделать три колонки блоками, ведь распределять их ширину можно не только пикселями, но и процентами. Следующий код делает именно такую страницу:
<STYLE TYPE="text/css">
#left {
width: 25%;
position: absolute }
#center {
width: 50%;
position: absolute;
left: 25% }
#right {
width: 25%;
position: absolute;
left: 75% }
</STYLE>
<div id="left">
Навигация
</div>
<div id="center">
Новости
</div>
<div id="right">
Реклама и мелочь
</div>
Здесь мы абсолютно позиционируем наши элементы, поэтому в блоках "center" и "right" делаем отступ слева 25 и 75 процентов соответственно.
TIPSa 4
Наружные поля (margins) в нашем случае не обязательны, но ты можешь иметь в виду, что следующий стиль:
#xak {
margin: 10px}
создаст вокруг блока "xak" поля шириной в 10 пикселей.
В обычных случаях все содержимое страницы имеет некоторый отступ от края браузера (сверху и слева). Однако это предусмотрено в основном только для текста. Чтобы убрать эти отступы, надо подредактировать тег <body>:
<body leftmargin="0" topmargin="0">.
TIPSa 5
Чтобы текст одного блока не прилипал к тексту другого, следует выставить все необходимые отступы. Сделаем внутренние отступы, скажем, в 5 пикселей (имей в виду, тогда расстояние содержимого соседних колонок составит 5+5=10 пикселей). Это делается так: