10.Плавающие элементы в css.

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

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

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

Элементы после плавающего элемента будут обтекать вокруг него.

Элементы до плавающего элемента не будут подвержены воздействию.

Если изображение плавает справа, следующий за ним текст будет пристыкован слева от него:

Пример

img

{ float:right;}

Если вы располагаете несколько плавающих элементов друг за другом, они будут "плавать" друг за другом, если позволяет пространство.

Здесь мы сделали галерею изображений, используя свойство float:

Пример

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

Элементы после плавающего элемента будут "плавать" вокруг него. Чтобы избежать этого, используйте свойство clear.

Свойство clear указывает, какие стороны элемента запрещены к воздействию других плавающих элементов.

Добавим строку текста к галерее изображений, используя свойство clear:

Пример

.text_line

{

clear:both;

margin-bottom:2px;

}

11.Построение навигационных меню с помощью css. Вертикальное меню.

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

При помощи CSS вы можете изменить скучные HTML меню вотличного вида навигационные панели.

Панель навигации использует стандартный HTML в качестве базы.

Панель навигации - это по сути список ссылок, так что использование элементов <ul> и <li> вполне логично:

Пример

<ul>

<li><a href="#home">Домой</a></li>

<li><a href="#news">Новости</a></li>

<li><a href="#contact">Контакты</a></li>

<li><a href="#about">Осайте</a></li>

</ul>

Теперь давайте удалим маркеры, а также поля и отступы из списка:

Пример

ul{

list-style-type:none;

margin:0;

padding:0;}

Объяснение примера:

list-style-type:none - Удаляет маркеры. Панель навигации не нуждается в списке маркеров

Установка полей и отступов в 0 используется для удаления настроек браузера по умолчанию

Вертикальная Панель Навигации

Чтобы построить вертикальную панель навигации, нам нужно только добавить стили к элементам <a>, в дополнение к коду выше:

Пример

a{

display:block;

width:80px;

background-color:#dddddd; }

Объяснениепримера:

display:block - Отображение ссылок в виде блоков делает всю область ссылки пригодной для клика (а не только текст), а также позволяет нам указать ширину

width:80px - Блочные элементы занимают всю ширину по умолчанию. Мы же хотим указать ширину в 80 px

Замечание: Всегда указывайте ширину для элементов <a> в вертикальной панели навигации. Если вы опустите ширину, IE6 может отобразить неожиданные результаты.

12.Создание горизонтального навигационного меню с помощью css.

Горизонтальная Панель Навигации

Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих пунктов списка.

Оба метода работают отлично, но если вы хотите, чтобы все ссылки были одинакового размера, вы должны использовать "плавающий" способ.

Встроенные Пункты Списка

Один из способов построения горизонтальной панели навигации - сделать элементы <li> встроенными, в дополнение к "стандартному" коду выше:

Пример

li

{ display:inline;}

Объяснение примера:

display:inline; - По умолчанию элементы <li> являются блочными. Здесь мы удаляем переносы строк до и после каждого пункта списка, чтобы отображать их в одной строке

Плавающие Пункты Списка

Для того чтобы ссылки имели одинаковую ширину, сделайте элементы <li> плавающими и укажите ширину для элементов <a>:

Пример

li

{ float:left; }

a{

display:block;

width:80px;

background-color:#dddddd; }

Объяснение примера:

float:left - использование свойства float, чтобы заставить блочные элементы располагаться ("плавать") друг за другом

display:block - Отображение ссылок в виде блоков делает всю область ссылки областью клика (а не только текст), и позволяет указать ширину

width:80px - Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать друг за другом. Поэтому мы указываем ширину ссылок в 80px