Возможные значения margin и padding.

⇐ ПредыдущаяСтр 6 из 9Следующая ⇒

В примере выше присудив свойствам margin и padding по одному значению, мы определили поля и отступы элемента со всех четырех его сторон. Для того чтобы указать разные размеры полей и отступов для каждой из сторон элемента, необходимо указывать два, три или четыре аргумента через пробел. Причем в зависимости от количества значений результат будет разным.

Вот примеры:

margin: 5px; - одно значение.
Одно значение - Поля одинаковые со всех сторон.

margin: 5px 40px; - два значения.
Первое значение - Устанавливает поля от верхней и нижней границ.
Второе значение - Устанавливает поля от левой и правой границ элемента.

margin: 5px 40px 20px; - три значения.
Первое значение - Устанавливает поле от верхней границы элемента.
Второе значение - Устанавливает поля от левой и правой границ элемента.
Третье значение - Устанавливает поле от нижней границы элемента.

margin: 5px 40px 20px 1px; - четыре значения.
Первое значение - Устанавливает поле от верхней границы элемента.
Второе значение - Устанавливает поле от правой границы элемента.
Третье значение - Устанавливает поле от нижней границы элемента.
Четвёртое значение - Устанавливает поле от левой границы элемента.

С padding дело происходит по тому же принципу, как и с margin, отступы от внутренних границ элемента до содержания приобретают размеры в зависимости от количества аргументов и их значений.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Поля и отступы< /title>
< style type=" text/css" >
div.block1 {
width: 260px;
background-color: #c5ffa0;
border: 2px solid #a68754
}
div.block2 {
background-color: #c0e4ff;
border: 2px solid #a68754;
margin: 20px 5px 20px 40px;
padding: 5px 25px
}
< /style>
< /head>
< body>
< div class=" block1" >
< div class=" block2" >
< samp> Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом! < /samp>
< /div>
< div class=" block2" >
< samp> Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем! < /samp>
< /div>
< /div>
< /body>
< /html>

Дочерние свойства margin и padding.

Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.

У margin зто:

· margin-top - Поле от верхней границы элемента родителя,

· margin-left - Поле от левой границы элемента родителя,

· margin-right - Поле от правой границы элемента родителя,

· margin-bottom - Поле от нижней границы элемента родителя.

И у padding соответственно:

· padding-top - Отступ от верхней границы элемента до его содержания,

· padding-left - Отступ от левой границы элемента до его содержания,

· padding-right - Отступ от правой границы элемента до его содержания,

· padding-bottom - Отступ от нижней границы элемента до его содержания.

Ну думаю понятно.. если возникает необходимость определить отступ или поле от одной единственной стороны элемента лучше воспользоваться одним из вышеперечисленных свойств.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Поля и отступы< /title>
< /head>
< body>
< div style=" width: 250px; background-color: #c5ffa0; border: 2px solid #a68754" >
< div style=" background-color: #c0e4ff; border: 2px solid #a68754; margin-left: 40px; padding-right: 50px " >
< samp> Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом! < /samp>
< /div>
< br>
< div style=" background-color: #c0e4ff; border: 2px solid #a68754; margin-right: 40px; padding-left: 50px " >
< samp> Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем! < /samp>
< /div>
< /div>
< /body>
< /html>

Полезные советы:

Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций.

· Избегайте коротких, и уж тем более, нулевых отступов от содержимого к границам элемента, особенно это касается текстовых блоков. Текст с маленькими полями и отступами читается трудно и " вязко".

· Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.

· Один из способов акцентирования внимания посетителя страницы на нужном Вам месте - это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к " особым" местам в тексте..

Глава 9

Курсоры.

Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка.. то есть когда пользователь наведет курсор на такой элемент он, курсор то бишь, поменяет свой вид.

Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры - файлы в формате cur, ani или svg.

Теперь по порядку..

Стандартные курсоры.

Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно " руки", если на некий текст, то курсор становится вида " работа с текстом", а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид " стрелка".

Так вот, для того чтобы изменить внешний вид курсора свойству cursor необходимо указать одно из возможных значений:

· auto - курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)

· crosshair - перекрестие

· default - встроенный(основной)

· e-resize - стрелка на " восток"

· hand - указатель аналогия pointer

· help - помощь

· move - перемещение

· n-resize - переместить на " север"

· ne-resize - переместить на " северо-восток"

· nw-resize - переместить на " северо-запад"

· pointer - указатель

· progress - продолжение операции

· s-resize - переместить на " юг"

· se-resize - переместить на " юго-восток"

· sw-resize - переместить на " юго-запад"

· text - текст

· w-resize - переместить на " запад"

· wait - ожидание

Кроме того некоторые браузеры поддерживают дополнительные формы курсоров:

· all-scroll - переместить во все стороны

· col-resize - переместить по горизонтали

· no-drop - указатель " нет доступа"

· not-allowed - нет доступа

· row-resize - переместить по вертикали

· vertical-text - вертикальный текст

Следует понимать, что данные значения являются, не каким либо конкретным изображением курсора, а определяют тип курсора. Внешний вид курсора зависит от настроек операционной системы пользователя.

Проведите курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор в Вашем браузере.

Провели? А теперь если есть желание можете зайти в " Пуск" > " Панель управления" > " Мышь" > закладка " Указатели" > из списка " Схема" выберите любую другую схему.. Теперь можете снова провести по списку выше, чтобы увидеть, как теперь выглядят курсоры.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Стандартные курсоры< /title>
< /head>
< body>
< div style=" cursor: wait; padding: 30px; background-color: #c0e4ff; border: 2px solid #008000; height: 300px; width: 300px" >
Буду думу думать..
< p style=" width: 150px; text-align: center; cursor: help; background-color: #c5ffa0; border: 2px solid #008000" > Кнопка " помощь" < /p>
< /div>
< /body>
< /html>

Пользовательские курсоры.

Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству cursor значение: url(" путь к курсору" ).

Например:

div { cursor: url(" my.cur" ); }

Так же можно указать несколько пользовательских курсоров, через запятую, в этом случае браузер будет пытаться отобразить первый из перечисленных, если у него это не получится, возьмется за второй.. и т. д. А не получится может из-за того, что браузер не поддерживает определённый формат файла-курсора. Как уже говорилось выше можно использовать файлы в формате cur, ani или svg - такие курсоры поддерживаются, начиная с IE6, Firefox 1.5. Однако Firefox 1.5 не поддерживает формат ani, а IE6 в свою очередь, не понимает формат svg.

Поэтому список курсоров составляют из файлов разных форматов.. например, так:

div { cursor: url(" my.cur" ), url(" my.svg" ); }

И уж что б совсем обезопасить себя в конце списка рекомендуется ставить один из курсоров из стандартного набора.

Вот так:

div { cursor: url(" my.cur" ), url(" my.svg" ), help; }

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< style type=" text/css" >
div {
cursor: url(" cursors/my.ani" ), crosshair;
width: 200px;
padding: 10px;
text-align: center;
background-color: #c5ffa0; border: 2px solid #008000
}
< /style>
< title> Пользовательские курсоры< /title>
< /head>
< body>
< div>
Если нацелив курсор на этот блок вместо " навороченного" курсора Вы видите обыкновенное перекрестие значит Ваш браузер не поддерживает формат ani
< /div>
< /body>
< /html>

Ну и в конце..

Свойство cursor, имеет еще одно значение - inherit. которое говорит о том, что свойство наследуется от элемента-родителя.

Полезные советы:

· В подавляющем большинстве случаев не стоит вообще трогать курсоры, оставьте всё как есть. Пользователя могут ввести в заблуждение нестандартные курсоры, например, когда при наведении на ссылку вместо привычной " руки" появляется что-то другое. Пользовательские курсоры уместны лишь там, где они действительно необходимы.

· Помните что любой курсор должен быть как минимум двухцветным. Это нужно для того чтобы его было видно на фоне такого же цвета как и сам курсор.. представьте одноцветный белый курсор на белом фоне.. вот уж задачка будет какой ни будь домохозяйке!! : )

Ааа.. у меня стрелка потерялась!!.. вирусы!!.. проклятый Бил Гейтс!!..: ) и давай лупить кулаком по системному блоку..: )

Короче паники с истериками нам не нужны..

Глава 10

Форматирование.

В этой главе речь пойдет о форматировании элементов, на самом деле речь об этом уже шла в седьмой главе, в которой мы говорили о размерах элемента - width и height, минимальных и максимальных размеров элемента - max-height, max-width, min -height, min-width и свойстве overflow. Все свойства из седьмой главы относятся к категории " форматирование элементов" однако знания лучше получать порциями, чтобы каши в голове не случилось, вот я и решил придержать кой какой материал на потом..

Потом настало! так что готовьтесь переваривать информацию на медленном огне..

Показ элементов.

Свойство display указывает браузеру, как тот или иной элемент должен быть показан на странице, другими словами определяет параметры вывода браузером элемента на экран.

Display имеет кучу возможных значений, однако, большинство из них поддерживаются далеко не всеми браузерами, поэтому мы поговорим лишь о тех которые будут корректно работать во всех браузерах, а таковых всего три:

· block - Показывает элемент как блочный. Происходит перенос строк вначале и в конце элемента.

· inline - Показывает элемент как встроеный. Элемент не переносятся на следующую строку.

· none - Запрещает показ элемента. Элемент " удаляется" из общего потока, его занимаемое пространство на экране не резервируется.

Теперь " расшифрую" написанное и покажу примеры..

Начнем с block и inline

Помните, в той же седьмой главе мы говорили о том, что все элементы можно разделить на строчные и блочные? так вот значения block и inline свойства display позволяет самостоятельно указывать, какие элементы мы хотим сделать строчными, а какие блочными, что позволяет решить ряд задач при верстке сайта с помощью CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< style type=" text/css" >
.menu {
display: block;
color: #006080;
font-size: 14px;
font-weight: bold;
padding: 5px;
}
h2 {
padding: 5px;
color: #800080;
font-size: 16px;
}
< /style>
< title> display: block; < /title>
< /head>
< body>
< p> В этом примере показано как можно сделать вертикальное меню присвоив ссылке (элемент < a> ) свойство display с значением block.< /p>
< hr>
< h2> Меню: < /h2>
< a href=" #" class=" menu" > Все о слонах.< /a>
< a href=" #" class=" menu" > Купить слона.< /a>
< a href=" #" class=" menu" > Взять слона на прокат.< /a>
< hr>
< p> Как видите ссылки стали блочными.. то есть в начале и в конце элемента < a> происходит перенос строки, хотя по умолчанию ссылка должна была идти в общем потоке текста.< /p>
< /body>
< /html>

А вот пример использования значения inline:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> display: inline; < /title>
< /head>
< body>
< p> Вот пример того как можно зпретить параграфу перенос строки< /p>
< hr>
< p style=" display: inline; background: #c5ffa0; padding: 5px; " > Это параграф.< /p>
< p style=" display: inline; background: #c0e4ff; padding: 5px; " > И это параграф! < /p>
< p style=" display: inline; background: #c5ffa0; padding: 5px; " > И снава параграф!! < /p>
< /body>
< /html>

Идем дальше.. значение none свойства display запрещает элемент к показу. Браузер удаляет элемент с таким значением из общего потока.

Небольшой пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> display: none; < /title>
< /head>
< body>
А где второй блок???
< hr>
< div style=" background: #c5ffa0" > Блок 1< /div>
< div style=" display: none" > Блок 2< /div>
< div style=" background: #c0e4ff" > Блок 3< /div>
< /body>
< /html>

Конечно, от такого примера толку в практике ноль, какой смысл прописывать блок, а потом умышленно скрывать его!?? Однако это свойство незаменимо на страницах где присутствует динамика.. например для создания раскрывающегося списка.

Помнится мне, я Вам уже показывал этот пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> display: none и скрипты< /title>
< script>
function show_hide(id){
var item = document.getElementById(id);
if (item.style. display == 'none' ) {item.style. display = 'block'; }
else item.style. display = 'none' ;
}
< /script>
< /head>
< body>
< div id=" block" style=" display: none " >
< h2 style=" color: #ff00ff" > А вот и я!! < /h2>
< img src=" rosemammoth.gif" >
< /div>
< a href=" javascript: show_hide('block')" title=" Развернуть/Свернуть" style=" color: #ff00ff" > Нажми на меня!! < /a>
< hr>
< div id=" block1" style=" display: none " >
< h2 style=" color: #0000ff" > А здесь я!! < /h2>
< img src=" mammoth.jpg" >
< /div>
< a href=" javascript: show_hide('block1')" title=" Развернуть/Свернуть" style=" color: #0000ff" > И на меня нажми!! < /a>
< /body>
< /html>

Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки < div> присваивая ему свойства display: none или display: block, и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать для каких целей предназначено свойство display: none.

Ну и для общего развития.. Как уже говорилось выше block, inline и none это далеко не все возможные значения свойства display.

Вот остальные:

· list-item - элемент выводится как блочный и добавляется маркер списка.

· run-in - устанавливает элемент как блочный или строковый в зависимости от контекста.

· compact - устанавливает элемент как блочный или строковый в зависимости от контекста.

· marker значение используется совместно с псевдоэлементами before и after, генерирует блок маркера

· table - элемент объявляется таблицей

· inline-table - элемент объявляется строкой таблицы

· table-row-group - элемент объявляется группой строк ячеек таблицы

· table-header-group - элемент объявляется группой строк ячеек таблицы, располагается в начале таблицы

· table-footer-group - элемент объявляется группой строк ячеек таблицы, располагается в конце таблицы

· table-row - элемент отображается как строка таблицы

· table-column-group - определяет, что элемент является группой одной или более колонок таблицы

· table-column - элемент объявляется колонкой ячеек таблицы

· table-cell - элемент объявляется ячейкой таблицы

· table-caption - задает заголовок таблицы

Но использовать их в деле я бы не рекомендовал.. по той простой причине, что многие браузеры не поддерживают данные значения.. поэтому заострять внимания на них не будем.

Видимость элемента.

Свойство CSS visibility предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента с помощью свойства visibility элемент становится, не виден, однако место, которое он занимает, остается за ним.

Возможные значения свойства visibility:

· inherit - Элемент отображается так как указанно в элементе родителе.

· visible - Отображает элемент. (по умолчанию).

· hidden - Скрывает элемент. В отличии от display: none оставляет за элементом площадь которую он занимает. Проще говоря если display: none " удаляет" элемент то hidden делает его " прозрачным".

· collapse - Скрывает колонки и строки таблицы идентично display: none, Если свойство применяется к другим элементам, не имеющим отношения к таблицам, то результат будет таким же, как hidden.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> visibility< /title>
< /head>
< body>
< p> Блок 2 скрыт, однако место, которое он занимает, зарезервировано за ним.< /p>
< div>
< span style=" background: #c5ffa0; padding: 5px; " > блок 1< /span>
< span style=" visibility: hidden; background: #c0e4ff; padding: 5px; " > блок 2< /span>
< span style=" background: #c5ffa0; padding: 5px; " > блок 3< /span>
< /div>
< hr>
< p> Строка 2 скрыта " удалена", если только дело происходит не в Internet Explorer< /p>
< table border=" 1" >
< tr>
< td> Строка 1< /td>
< /tr>
< tr style=" visibility: collapse; " >
< td> Строка 2< /td>
< /tr>
< tr>
< td> Строка 3< /td>
< /tr>
< /table>
< /body>
< /html>

Обратите внимание visibility: collapse; не поддерживается браузером Internet Explorer.

Видимая часть элемента.

Свойство clip определяет видимую область элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, " обрезается" и становится невидимым. На данный момент единственно доступная форма области - прямоугольник.

clip работает только для абсолютно позиционированных элементов и показывает лишь ту его часть, что входит в прямоугольную область заданную четырьмя значениями от левого и верхнего краёв данного элемента.

Значения:

· rect( сверху справа снизу слева ) - Обрезает элемент сверху, справа, снизу и слева в соответствии с заданными, в скобках, четырьмя значениями, которые могут выражаться в процентах от ширины/длины элемента, пикселях или любых других единицах измерения принятых в CSS.

· auto - Оставляет элемент или одну из сторон элемента без изменений (по умолчанию).

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> clip< /title>
< /head>
< body>
< div style=" position: absolute; clip: rect(15px auto auto 15px); width: 100px; height: 100px; background: #c5ffa0; border: double 5px #008000" >
Этот блок частично обрезан слева и сверху
< /div>
< /body>
< /html>

О том, что такое position: absolute; - абсолютно позиционированный элемент и вообще что такое позиционирование мы поговорим в отдельной главе.

Полезные советы:

· В виду того, что свойство visibility: collapse; не поддерживается браузером Internet Explorer рекомендую, при работе с таблицами использовать display: none, результат будет аналогичным collapse только работающим в IE.

· Свойства display, visibility и clip в сочетании с скриптами, а так же псевдоэлементами позволяют достичь весьма интересных результатов.

Глава 11

Поплавки.

Эх рыбалка.. хорошо бы было сейчас закинув удочку посидеть на каком ни будь тихом пруду под пенье птиц и шорох камыша.. сидишь себе наблюдаешь за поплавком, потягиваешь пивко, где то неподалёку горит костер.. запах ухи смешавшись с ароматами разнотравья кружит голову и ты окунаешься в нирвану.. в мир спокойствия и гармонии..

Ладно, будем считать, что отдохнули перед очередной порцией информации.. и хотя в этой главе речь пойдёт о поплавках диалоги будут вовсе не о рыбалке..

Итак, свойство float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем " поплавок". А элемент с таким свойством называют " всплывающим"

Теперь побольше конкретики и примеров..

Обтекание элемента

Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.

Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.

Значения свойства float:

· left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа.

· right - Выравнивает элемент по правому краю, остальные элементы обтекают его слева.

· none - Выравнивание элемента не задается. (по умолчанию)

Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией " всплывёт" с левой стороны.

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> float< /title>
< /head>
< body>
< div style=" border: solid 1px black; width: 220px" >
< div style=" float: left; " >
< img src=" graphics/fon.jpg" >
< /div>
Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, " всплывает" слева.
< /div>
< /body>
< /html>

А вот в примере ниже показано как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> float< /title>
< /head>
< body>
< div style=" float: right; background: #c5ffa0; border: solid 1px black; padding: 10px; width: 420px" >
< span style=" float: left; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px" > блок выровнен по левому краю< /span>
< span style=" float: right; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px" > блок выровнен по правому краю< /span>
содержание блока div обтекает выровненные элементы span слева и справа
< /div>
< /body>
< /html>

Запрет обтекания

Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон.

Значения:

· both - Запрещает обтекание элемента с левой и правой стороны.

· left - Запрещает обтекание элемента с левой стороны.

· right - Запрещает обтекание элемента с правой стороны.

· none - Запрет на обтекание элемента не задается.(по умолчанию)

Вот пример где clear отменяет действие float

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> clear< /title>
< /head>
< body>
< div style=" background: #cc0; width: 150px; height: 50px; float: left; " > Этот блок всплывает слева.< /div>
< div style=" background: #c0c; width: 150px; height: 100px; float: left; " > И этот блок всплывает слева.< /div>
< div style=" background: #0c0; width: 300px; height: 80px; clear: left; " > А этот блок отменяет обтекание с левой стороны.< /div>
< /body>
< /html>

Блочная вёрстка.

В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц ( http: //webremeslo.ru/html/glava4.html ) и фреймов ( http: //webremeslo.ru/html/glava7.html ), теперь имея накопленный багаж знаний, настало время познакомить Вас с блочной версткой сайта, используя блоки div и свойства CSS.

Разберём классический макет верстки сайта из трёх колонок, а так же " шапки" и " подвала".. в котором правая и левая колонки имеют фиксированную ширину, а центральная колонка " резиновая" т.е. занимает собой всё оставшееся место.

Взгляните на пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Блочная вёрстка< /title>
< /head>
< body style=" background: #cc0; margin: 0; " >
< div style=" clear: both; background: #0c0; padding: 5px; " > Логотип< /div>
< div style=" float: left; background: #c0c; padding: 5px; width: 170px" > Меню< /div>
< div style=" float: right; background: #c0c; padding: 5px; width: 170px" > Реклама< /div>
< div style=" margin: 0 180px; background: #0cc; padding: 5px; " > Основное содержание< br> < br> < br> < br> < br> И ещё куча текста..< /div>
< div style=" clear: both; background: #0c0; padding: 5px; " > Подвал< /div>
< /body>
< /html>

Что было понятно " расшифрую" каждую строчку из примера выше:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Блочная вёрстка< /title>
< /head>

- Думаю понятно..: ) стандартное начало любой страницы..

< body style=" background: #cc0; margin: 0; " >

- Используем margin: 0 для того чтобы обнулить поля в окне браузера.

< div style=" clear: both; background: #0c0; padding: 5px; " > Логотип< /div>

- Создаём контейнер с будущим логотипом и запрещаем его обтекание с обеих сторон, используя clear: both , теперь что бы не случилось, последующие блоки будут идти снизу, а шапка сайта как ей и положено будет располагаться сверху.

< div style=" float: left; background: #c0c; padding: 5px; width: 170px " > Меню< /div>

- Левая колонка с " Меню" выровнена по левому краю свойством float: left и имеет фиксированный размер в 170 пикселей.

< div style=" float: right; background: #c0c; padding: 5px; width: 170px " > Реклама< /div>

- Правая колонка с рекламой выровнена по правому краю свойством float: right; и тоже имеет фиксированный размер 170 пикселей.

< div style=" margin: 0 180px; background: #0cc; padding: 5px; " > Основное содержание< /div>

- Центральная колонка никак не выравнивается, но занимает своё место по центру, так как имеет широкие поля слева и справа margin: 0 180px , тем самым не накладываясь на правую и левую колонки. Почему поля 180 пикселей, а не 170 в соответствии с ширенной колонок " Меню" и " Реклама"? Отвечаю: потому что кроме ширины width: 170px эти колонки имеют ещё и отступы со всех сторон padding: 5px складываем 170+5+5= 180 - такая вот арифметика..

< div style=" clear: both; background: #0c0; padding: 5px; " > Подвал< /div>

- Ну и " подвал" блок, в котором, как правило, располагаются контактные данные и авторские права, так же как логотип запрещает на всякий случай обтекание слева и справа clear: both и тем самым устремляется вниз страницы.

< /body>
< /html>

- Это нужно " расшифровывать"? : )

В данном примере стилевое описание блоков div происходит с помощью атрибута style - на самом деле это глупо.. привел такой пример, что бы просто понятнее было разобраться в коде, а вообще при блочной верстке обычно назначают каждому блоку свой идентификатор id ( см. Глава 6 Классы и идентификаторы. )и всё это дело с остальными потрохами выносят в отдельный css файл..

Полезные советы:

· Верстка блоками div стремительно набирает популярность, и позволяет сверстать сайт практически любой сложности, однако не всегда стоит полностью отказываться от табличного способа верстки. Зачастую верным решением является комбинированный способ верстки, где грубым " каркасом" сайта является таблица, наполненная блоками div которые выполняют более тонкие задачи верстки сложного по структуре сайта.

Глава 12

Позиционирование.

Для начала разберемся с самим понятием позиционирование. Позиционированием называют определение конкретного месторасположения на странице того или иного элемента (бокса). Позиционирование бывает абсолютным, относительным, фиксированным и статическим.

Потороплюсь с примером, ниже будем разбираться, что в нем написано.

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Позиционирование.< /title>
< /head>
< body>
< div style=" float: left; background: #c00; border-style: double; padding: 5px; height: 1500px; width: 300px" >
< div style=" position: relative; left: 10px; top: 50px; background: #c0c; border-style: double; padding: 5px; width: 200px" > Блок позиционирован относительно крёв элемента родителя.< /div>
< /div>
< div style=" position: absolute; left: 200px; top: 350px; background: #cc0; border-style: double; padding: 5px; width: 200px" > Блок абсолютно позицонорован и выведен из общего потока, его положение задаётся от краёв окна браузера. Как видите данный блок может накладываться на другие элементы страницы.< /div>
< div style=" position: fixed; left: 150px; top: 150px; background: #0cc; border-style: double; padding: 5px; width: 200px" > А это фиксированный блок, тоже выведен из общего потока однако при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.< /div>
< /body>
< /html>

Итак, для того, что бы позиционировать какой либо элемент к нему применяют свойство position и одно из его возможных значений:

· absolute - Абсолютное позиционирование элемента.

· relative - Относительное позиционирование элемента.

· fixed - Фиксированное позиционирование элемента.

· static - Статическое позиционирование элемента. (Элемент отображаются как обычно.)

· inherit - Наследует значение элемента родителя.

Теперь давайте углубляться..

⇐ Предыдущая 1 2 3 4 567 8 9 Следующая ⇒