CSS - Урок 10. Позиционирование блоков. Теперь давайте посмотрим, как можно сверстать такую страницу средствами CSS. Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):.
Теперь, на странице style. css зададим те свойства, которые уже знаем, а именно ширину, высоту и фон каждого блока:. Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:. Такое позиционирование элементов называется позиционированием в нормальном потоке. Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.
По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов. В CSS же нам предоставляются и другие схемы позиционирования:. абсолютное позиционирование. относительное позиционирование. плавающая блоковая модель.
Подскажите пожалуйста как сделать резиновую шапку что бы она Резиновая вёрстка сайта 7 стобцов+ шапка +подвал HTML, CSS.
- Эту страницу мы с вами делали в серии уроков, посвященных HTML, href=" style.css"> </head> <body> <div id="header"> шапка сайта </div> <div.
- Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML -разметки и использования CSS-трюков. Центрирование.
- Как сделать шапку для сайта. Что такое Интернет · Как работает Интернет · Как работает браузер · Что такое HTML код страницы · Что такое домен. Шапка сайта или header является существенным элементом дизайна.
Как Сделать Шапку Для Сайта Html
Для определения схемы позиционирования используется свойство position. оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:. static - блок позиционируется в нормальном потоке. Это значение по умолчанию. relative - относительное позиционирование (относительно нормального потока).
absolute - абсолютное позиционирование. fixed - фиксированное позиционирование (фиксируется относительно области просмотра).
Сегодня мы рассмотрим абсолютное позиционирование. остальные схемы будем рассматривать в следующих уроках. При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:. left - указывает на сколько надо сместить блок относительно левого края окна. right - указывает на сколько надо сместить блок относительно правого края окна.
top - указывает на сколько надо сместить блок относительно верхнего края окна. bottom - указывает на сколько надо сместить блок относительно нижнего края окна. Вернемся к нашему примеру. Наши блоки header. menu и footer позиционируются в нормальном потоке, поэтому свойство position для них задавать не надо. А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu.
т. на 190 пикселов, а от верхнего края окна на высоту блока header. т.
на 100 пикселов. Теперь наша страница в браузере выглядит так:. Наш блок расположился не совсем так, как ожидалось. Это от того, что мы не учли один нюанс: у браузеров есть свои, встроенные таблицы стилей. И, если мы не задали какое-либо свойство, то используется свойство по умолчанию.
Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px. т. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей:. Теперь наша страница выглядит так, как мы и ожидали:.
В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по-другому. Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента, например, вот так:. Тогда в нашу html-страницу, в div id="content" мы добавим div id="news".
Тогда в таблице стилей смещение мы будем указывать относительно блока content. Ширина блока content равна 525 пикселов, а ширина блока news - 150 пикселов. Значит, смещение от левого края равно (525-150) 375 пикселов, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365 пикселов. Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news - 280 пикселов. Значит смещение от верхнего края может быть не более (300-280) 20 пикселов, мы сделали 10. При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что смещение происходит относительно "родителя". На этом урок закончен, в следующий раз будем изучать другие схемы позиционирования.
Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт. Код кнопки:. Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова. admin@site-do. ru site-do. ru © 2009-2014 Копировать материалы сайта запрещено! За нарушение авторских прав предусмотрена уголовная ответственность! Телефон редакции +7(499)346-89-56 127051, г.
Москва, Цветной бульвар, д. 11, стр. 6, офис 405.