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

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

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

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

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

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

Абсолютное позиционирование

.

Наверное, самый простой метод размещения элементов на странице с помощью CSS — абсолютное позиционирование. Используя его, мы определяем позиции (или координаты) верхней левой точки каждого элемента. Примерно как в магазине. Вам случалось говорить продавцу нечто вроде: «Покажите, пожалуйста, часы пятые слева и третьи сверху»?

Использовать абсолютное позиционирование очень просто, нужно лишь добавить в CSS-код свойство position: absolute, а затем определить, где вы хотите поместить элемент. В показанном ниже примере мы определяем, что элемент должен смещаться на 200 пикселов вниз от верхнего края окна браузера и на 200 пикселов вправо от левого края с помощью свойств top и left:

Результат показан на рис. 4.26.

Рис. 4.26. Абсолютное позиционирование в действии

Готовимся к изменению положения. Сейчас вы попробуете разместить каждый элемент вашей страницы в окне браузера, используя фиксированные координаты. Для начала придется потратить какое-то время, чтобы отменить некоторые сделанные ранее изменения стилей. Нужно удалить свойства padding и border, добавленные ранее.

1. Откройте файл stylel. ess и удалите объявления padding и border в правиле стиля для элемента body.

2. В том же месте добавьте два новых объявления для установки значений paddi ng и margin равными нулю.

Правило стиля для элемента body будет таким:

chapter4\website_files\09_body_no_paddingormargin\stylel.ess (фрагмент)

body {

background-color: #e2edff;

font-family: Verdana, Helvetica, Arial, sans-serif: line-height: 125%; padding: 0; margin: 0:

}

Обновите страницу в вашем браузере, и вы увидите, как она выглядит (рис. 4.27).

Заголовки страницы — BubbleUnder.com (hi) и О нас (h2) — обрамлены полями, размеры которых браузер определил по умолчанию, так как явно они не указаны. Убрать эти поля — хорошая идея, ведь мы стремимся к тому, чтобы слегка «растрясти жирок» — расположить каждый заголовок как можно ближе к краям содержащего его div-элемента. Это нужно для упрощения перемещений заголовка, а также для обеспечения одинакового отображения страницы во всех браузерах.

1. Прокрутите содержимое файла stylel.ess и найдите правило стиля для заголовка hi.

2. Добавьте объявление для присвоения свойству margin значения 0.

Рис. 4.27. Отступы и границы удалены из правила стиля для body

3. Найдите правило flagline р и сделайте там то же самое.

4. Обновите страницу в браузере. Пустое пространство, ранее располагавшееся до и после заголовков, сейчас исчезло, как и показано на рис. 4.28.

Рис. 4.28. Убираем пустое пространство вокруг заголовков

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

1. Добавьте следующее правило в конец вашего CSS-файла.

2. Сохраните файл stylel.ess.

3. Обновите страницу в браузере.

4. Сумейте пережить шок, когда вы увидите, как ужасно выглядит страница!

Ваша страница должна выглядеть так, будто ее подняли высоко в небо, поболтали в воздухе и уронили на землю. Все части смешались в кучу (рис. 4.29). Но не беспокойтесь — это нормально!

Рис. 4.29. Абсолютное позиционирование вносит на страницу хаос

Итак, что же произошло? Три раздела страницы расположены один на другом, у всех задана абсолютная позиция — левый верхний угол браузера. Почему? Потому что вы велели браузеру именно так и поступить. Вы сказали, что позиция абсолютная, но не упомянули, где она должна располагаться. Поэтому все оказалось в куче: снизу заголовок — раздел header, затем блок навигации и в конце концов область основного контента (bodycontent), царь горы!

Сейчас начнем наводить порядок, передвигая раздел навигации и область основного контента так, чтобы они располагались под заголовком. В файле stylel. ess добавьте следующее правило:

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

Рис. 4.30. Сдвигание блока навигации и блока основного контента вниз на 120 пикселов ликвидирует перекрытие заголовка

Что вы сейчас сделали? Вы указали браузеру сдвинуть блоки навигации и основного контента вниз на 120 пикселов — абсолютное значение относительно окна браузера. Браузер беспрекословно выполнил это указание. А теперь нужно выдать ему еще одно задание: сдвинуть блок основного контента вправо, чтобы он не перекрывал блок навигации. Поскольку ранее вы установили ширину блока навигации равной 200 пикселам, сдвиньте раздел bodycontent вправо на 220. Это обеспечит вам чистый сдвиг (и некоторый зазор между разделом основного контента и навигационным блоком).

В файл stylel. ess нужно добавить следующий код. На всякий случай я полностью привожу все шаги по позиционированию, так что заодно проверьте, все ли в порядке с вашей таблицей стилей.

chapter4\Website files\13 body content positionedNstylel.css (фрагмент)

Посмотрите в браузере, что получилось. На рис. 4.31 показано, как должна выглядеть ваша страница.

Рис. 4.31. Использование позиционирования для разграничения навигации и основного контента

Осталось исправить небольшие недочеты, чтобы страница выглядела как полагается:

заголовок и слоган не растянуты и не заполняют собой всю страницу;

есть немного неиспользованного пространства вокруг заголовка hi и слогана;

красные границы и отступы между блочными элементами надо убрать, они уже выполнили свою функцию;

нужно добавить комментарии в CSS-код, чтобы объяснить, что там было изменено.

Сейчас вы все это сделаете одним махом. Вообще-то вы уже должны быть уверены в том, что сможете сделать это самостоятельно. Попробуйте, но, как всегда, не беспокойтесь — решение ждет вас далее. Сделайте этот сайт по-настоящему крутым!

1. Позиция блоков навигации и основного контента должна быть на 107 пикселов ниже верхнего края страницы вместо 120 — это обеспечит точнейшее совпадение размеров после того, как вы уберете красные границы.

2. Затем укажите браузеру, что div-элемент, содержащий заголовок header, должен занимать всю доступную ширину (то есть 100 % доступной ширины).

3. Красные границы, ранее применявшиеся ко всем элементам, нужно убрать — удалите соответствующее правило.

4. И наконец, надо добавить комментарии к части кода, относящейся к позиционированию элементов, чтобы затем вы вспомнили, что собирались делать. Это позволит вам быстро припомнить назначение раздела и понять, что он определяет размещение блоков на странице, а не добавляет какие-то «косметические» эффекты.

Есть ли у вас мысли, как решить эту задачу? Далее приведена обновленная таблица стилей — вернее, ее часть, относящаяся к размещению на странице элементов. Самое важное выделено полужирным шрифтом.

Самый главный вопрос: что эта разметка сделает с сайтом? Посмотрим. Соответствует ли результат в вашем браузере тому, что показано на рис. 4.32?

Ну, я почти счастлив. А вы? Заголовки и слоган лучше дополняют друг друга благодаря сочетающимся границам. Задайте для заголовка (header) верхнюю границу шириной 3 пиксела и установите для нее какой-нибудь светло-голубой цвет — например, такой, как использовали для слогана. И, пожалуй, уберите точечную рамку вокруг навигационного блока — сейчас, с новым красивым дизайном, она не нужна.

Рис. 4.32. Традиционный вид веб-страницы

Сохраните изменения в файле stylel. ess, обновите страницу в браузере и сравните результат с рис. 4.33 — я очень надеюсь, что они совпадут!

Рис. 4.33. Готовый макет веб-страницы

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

Вы заметили, что на протяжении всей главы вы не затрагивали ни HTML, ни содержимое страницы? Все изменения вы выполняли лишь в CSS-коде. Вы убедились, что можно манипулировать контентом, используя комбинации границ, отступов, ширины, размеров и позиционирования с помощью CSS. Представьте только, что ваш проект будет существовать несколько лет, иметь много страниц с разным содержимым — и изменить его дизайн будет все так же просто!

Вы хотите, чтобы блок навигации располагался с правой стороны? Нет проблем. Просто поменяйте координаты этого раздела в CSS, сдвинув содержимое влево, как вы меняете местами элементы мозаики, и вид сайта изменится, прежде чем вы успеете об этом подумать. В этом и заключается могущество CSS в создании сайтов — и вы выучили только правильные способы!

.

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