Наверняка Вы хотя бы один раз в жизни слышали такое нехорошее слово как ВЁРСТКА?! И чуть позже верстальщик. Всё это связано с типографским делом. А вёрстка, — формирование удобного для восприятия печатного материала: книг, газет, журналов, открыток... По-простому, — из набора текста и иллюстраций собрать, что-то путнее и похожее на что-то?!! С появлением в интернете страниц, сайтов и прочей белиберды, вёрстка по-тихому переползла и к WEB-дизайнерам!
Если внимательнее вникнуть в анатомию WEB-страниц, то? То, все они состряпаны из прямоугольных областей страничного пространства. Будь-то: изображение, текст, таблицы... Ну таблицы они и в Африке таблицы, в смысле прямоугольные. Изображение, как бы оно не выглядело, в каком виде, оно всегда заключено в прямоугольную форму. Ну, а текст, он как может быть прямоугольным? Он ведь тоже заключен во что-то? В окне браузера, странице, в абзаце. Но Вы не видите этого абзаца. Правильно, по умолчанию он имеет белый фон и сливается с таким же белым фоном страницы! Вы хотите его увидеть, пожалуйста. Используя псевдокласс и назначив ему правило, вот такое: p:hover {background-color: yellow;}. То есть при наведении мышки на абзац фон окрасится в жёлтый цвет! Вот как выглядит при этом одна из страниц (фрагмент) моего бывшего сайта рис1а. Абзац тег <P> является элементом уровня БЛОКА. Под блоками в общем виде подразумевают прямоугольные области... Но в основном упираются в блок с разговорным названием ДИВ (Ы). Когда-то в моём компьютерном детстве, точнее о моём сайте, один интернет-пацан с восхищением отозвался:«Какой у тебя дивный сайт?!» И только потом я въехал! Никакой он не дивный, а просто создан с помощью дивов! Это так элемент-контейнер <DIV> обозвали мерзавцы! Создавался он (мой сайт) на первых порах с помощью редактора FrontPage. А она (Page) девка непутёвая, что хачит, то делает?! Она и применила эти дивы, а я лох и не подозревал...
Итак о блоках. Вот на рис1 Вы видите как бы графическую интерпретацию сущности блока. Прямоугольник зелёного цвета content то есть СОДЕРЖИМОЕ страницы, в нашем случае текст. Вокруг РАМКА, — border. Между контентом и рамкой некое пространство, ПОЛЯ, — padding. И наконец вокруг рамки, — margin, ОТСТУП. Это расстояние до ближайшего блока, края страницы.Внизу часть CSS, правила для идентификатора #text.
Что же хорошего в этих ДИВАХ? Иногда их называют слоями. Кто знаком с фотошопом, тот имеет представление, что это такое?! Только в фотошопе слои можно передвигать мышкой (куда надо?), а в нашем случае только с помощью CSS. А там самим решать куды ставить?! В этих чёртовых CSS для управлением местонахождения дива есть волшебное свойство position и его четыре значения. Вот они, эти четыре значения: static, relative, absolute и fixed. Разберёмся с этими значениями. Реакция браузера показана на рис2. Итак:
1) static (значение по умолчанию) — статическое. Для примера взяты три разноцветных блока. Жёлтый тот к которому мы и будем применять значения. Ну, а остальные на подтанцовках. Все блоки ведут себя так, как будто нет никаких значений и стало быть участвуют в НОРМАЛЬНОМ ПОТОКЕ! А, это значит, что они будут располагаться один над другим. Также как абзацы-блоки.
2) relative — относительное. Чтобы понять, что к чему, нам нужно нашему блоку пришпандорить координаты в пространстве с помощью значений свойств: left, top, right и bottom. Что означает, что мы наш квадратик передвинем в пространстве, отодвигая его от: левого края, от верха, правого края и снизу. Но практически достаточно скажем только left и top. Я так и делал всё время. Что произошло? Квадратик сдвинулся, а остальные и ухом не повели, типа ничего для них не изменилось?!
3) absolute — абсолютное. Всё те же leftы, topы, но квадратик исключается из нормального потока. Те двое смыкают ряды и живут сами по себе... Но если начать прокрутку страницы, вся троица поедет вместе не сговариваясь как на рис2а.
4) fixed — фиксированное. Всё такое же как и в пункте 3 с абсолютным позиционированием. Вот только при прокрутке те двое поедут вверх, а жёлтый останется на месте рис2а!!! WEB-дизайнеры с восторгом говорят, что в данном случае блок (жёлтый) ведёт себя так, как будто прибит к окну гвоздями! То есть, если нужно с помощью такого блока какую-то информацию постоянно держать в окне.
На рис3 показана реакция браузера на ещё одно интересное свойство z-index. Пронумерованные три блока. К каждому применено свойство z-index, причём для первого блока значение равно 3. Второму — 2. Третьему — 1. Результат на рис3 левый фрагмент. Чем меньше значение тем ниже располагается блок. Поменяем значения между первым и третьим блоками. Результат на рис3 справа. Как видите блоки поменялись местами. Теперь Вы поняли насколько блоки с помощью CSS мобильнее чем таблицы?! Управляются во всех трёх координатах!
На рис4 Вы видите сформированные три столбца с текстом внутри. Средний столбец с невидимыми границами и белым фоном. Этот пример как бы пограничный?! О чём это я? Если до этого момента мы говорили о применении блоков с помощью CSS и никак иначе, то? То на рис4 всё можно осуществить как с помощью таблиц, и так же с помощью блоков и СSS. На мой взгляд с помощью таблиц даже проще?! Решение с помощью блоков обрастёт CSS-прибамбасами. Вот почему наблюдается некое противостояние таблиц и дивов! Точнее WEB-дизайнеров любителей как TABL так и DIV!!! К слову FrontPage лепит всё вместе и то и это, как ему взбрендит?! Вот такой совместный проект Вы и виде на рис5. Таблица с двумя ячейками, а сверху как медным тазом накрывает их блок с абсолютным позиционированием. И последнее, на любителя, ниже листинг этого действа. Отличие в том, что у Вас нет моего изображения и все квадратики будут пустыми...
Нужно всё, что находится ниже, между разделительными линиями скопировать и вставить в БЛОКНОТ в пустой документ. Затем сохранить в виде имя.htm Найти в своих папках этот документ. Щёлкнуть мышкой и в Вашем основном браузере откроется страница с такой вот картинкой как на рис5. Но без непутёвой девки! Вы сами можете вставить своё изображение вместо lvenus.gif ; Желательно чтобы размер был не более чем 105 X 101 px, потому как размер блоков ограничен. Разделительные линии копировать не нужно!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <HTML lang=ru xml:lang="ru" сайт</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <STYLE type=text/css> #text H2 { FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif } H1 { COLOR: #369 } #exp {position: absolute; width: 101px; height: 105px; border: dashed 3px; top: 127px; left: 89px; background: blue; } </STYLE> <BODY> <DIV> <H1>Совместное использование таблиц и блоков</H1> <div id="exp"><img border="0" src="1venus.gif" width="105" height="101"></div> <table border="1" width="290" height="180"> <tr> <td bgcolor="#00FF00" align="center"><img border="0" src="1venus.gif" width="105" height="101"></td> <td bgcolor="#FFFF00" width="144" align="center" valign="top"> <img border="0" src="1venus.gif" width="105" height="101"></td> </tr> </table></DIV></BODY></HTML>