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

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

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

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

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

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

Относительное позиционирование

.

Применяя абсолютное позиционирование, мы размещаем все элементы относительно определенной точки начала координат: левого верхнего угла окна браузера либо левого верхнего угла родительского элемента. С относительным позиционированием любая величина смещения, которую вы укажете, будет применяться относительно исходного местоположения элемента, до того, как вы примените правило стиля. Вот несколько примеров правил стилей. Обратите внимание на правило, которое применяется к элементам класса nudged:

Далее я приведу HTML-код, в котором класс под названием nudged применен к среднему абзацу:

Этот класс можно было бы применить к любому абзацу (и вообще к любому блочному элементу). На рис. 4.35 показан текст с изначальным местоположением среднего абзаца, а затем — результат применения класса nudged к элементу р.

Рис. 4.35. Средний абзац оформлен также, как остальные абзацы (слева), а затем расположен относительно предыдущего местоположения (справа)

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

Кстати, если вам интересно, текст в этом примере расписывает «прелести» традиционного турецкого бритья. Это приятно… если, конечно, вы любите удовольствия подобного рода!

Преимущества относительного позиционирования. В некоторых случаях относительное позиционирование может быть лучше абсолютного, которое я предложил для нашего учебного сайта. Я сказал «в некоторых случаях», ибо это зависит от компоновки вашей страницы, от браузера. Здесь нет четких правил. Например, при выборе относительного позиционирования форматирование текста лучше адаптируется к изменению размера шрифта в браузере (в Internet Explorer используется команда Вид — Размер текста — Крупный или Самый крупный). С фиксированным размером области заголовка (в нашем случае 107 пикселов) значительное увеличение шрифта текста может повредить его, приведя к тому, что текст выйдет за пределы отведенного ему пространства и «наедет» на область навигации, как показано на рис. 4.36. Однако, как упоминалось ранее, большинство браузеров в наше время увеличивают всю страницу пропорционально, а не одни только текстовые области. Если же вы хотите масштабировать только текст, то нужно залезть немного глубже в настройки браузера, чтобы найти этот параметр. Посетители сайта также вряд ли будут тратить свое время на поиски способа увеличить только текст, так что эта проблема со временем теряет актуальность.

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

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

.

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