Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

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

Плавающее позиционирование

.

Техника, любимая многими веб-дизайнерами, — применение плавающих элементов, когда верстка страницы осуществляется с использованием свойства float. Все просто: когда нам требуется обтекание какого-то элемента остальным содержимым страницы, мы закрепляем одну его сторону, позволяя другим элементам располагаться вокруг. Точно планируя, можно создать несколько плавающих элементов на странице и добиться эффекта верстки нескольких колонок, как в газете. Рассмотрим простой пример:

Здесь блок с id-атрибутом nav прикрепляется к правой части веб-страницы, занимая 300 пикселов в ширину. Следующий за ним текст сдвигается, занимая все свободное пространство, кроме f loat-элемента. Посмотрите, как этот эффект достигается с использованием HTML:

На рис. 4.37 показано, как это выглядит в браузере.

Рис. 4.37. Простой плавающий элемент в действии

Если вы не хотите, чтобы текст принимал форму буквы L и обтекал блок навигации, добавьте в CSS свойство padding. В примере выше для блока навигации установлена ширина 300 пикселов, так что, если вы добавите отступ шириной 310 пикселов с правой стороны для текста, он должен сделать свое дело. Вот обновленная версия файла:

На рис. 4.38 показано, что должно получиться.

Рис. 4.38. Более аккуратный вид плавающего элемента

Мы используем плавающие элементы для учебного сайта лишь однажды — сделаем плавающим изображение дайверов  на главной странице. Однако, поскольку нам не нужно, чтобы «плавало» каждое изображение на сайте, не следует применять CSS-правило ко всем элементам i mg. Мы напишем правило стиля для нашего изображения с классом feature и назовем так элемент img, используя селектор класса. Мы также зададим для него поля, что позволит расположить приветственный текст более красиво.

Отредактируйте главную страницу (файл  index. html), сделав следующие изменения в разметке:

Затем добавьте следующее правило в таблицу стилей, чтобы зафиксировать изображение с правой стороны:

Сохраните изменения и посмотрите, как главная страница выглядит в браузере (рис. 4.39).

Рис. 4.39. Изображение дайверов стало плавающим

Это, в общем-то, все, что я хотел рассказать вам о плавающих элементах. У них есть неприятная особенность: приходится повозиться, чтобы добиться корректного отображения нескольких плавающих элементов на странице. Если вы хотите больше о них узнать, почитайте следующие книги издательства SitePoint: The CSS Anthology: 101 Essential Tips, Tricks & Hacks и в особенности HTML Utopia: Designing Without Tables Using CSS2.

.

Читайте так же:
Not found