<
  • Главная
Статьи

Створення web сторінок. Верстка в дві колонки з роздільником.

В інтернеті можна знайти безліч прикладів верстки сторінки в дві колонки. Але у більшості з них є недолік: не можна встановити роздільник між колонками потрібної довжини.

Проблема полягає в наступному. Нам потрібно зверстати сторінку з двома колонками, наприклад, меню (menu) і розділ з текстом (textBlock), між якими потрібно поставити роздільник (звичайну лінію або повторюваний по вертикалі малюнок). При цьому розмір колонок заздалегідь невідомий, тобто меню може бути коротше текстового блоку, а може і навпаки. Ось тут і виникає проблема. Якщо використовувати властивість border (або background-image) в більш короткому блоці, то роздільник вийде обірваним.

Я хочу показати прийом, який дозволить обійти цю проблему. Ідея полягає в тому, що потрібно помістити наше меню і текстовий блок у зовнішній блок (container). При цьому container завжди повинен бути більше ніж обидва наших блоку. На перший погляд тут не повинно виникнути жодних труднощів, але згадаємо, що для розміщення блоків поруч один з одним для одного з них ми повинні задати властивість float, а воно «вириває» блок з потоку документа. Наприклад, правило float: left задано для меню. Тоді, якщо меню довше, ніж текстовий блок ми отримаємо таку картинку:

Тоді, якщо меню довше, ніж текстовий блок ми отримаємо таку картинку:

При такій розмітці задавати в контейнері кордону і фонові зображення немає ніякого сенсу.

Збільшення розміру контейнера можна двома способами.

Перший спосіб. Додаємо в контейнер ще один блок (bottom) і встановлюємо для нього в таблиці стилів властивість clear: both. Цей блок буде завжди розміщений під будь-яким попереднім блоком, не залежно від того, задана властивість float чи ні. Після цього контейнер розтягнеться так щоб охоплювати блок bottom. Тепер можна створити картинку і використовувати її в якості фону в контейнері. Розміщення блоків показано на малюнку 2:

Розміщення блоків показано на малюнку 2:

Нижче наведено текст файлів з розміткою і стилями. ви також можете скачати приклад (Разом з картинкою, яка використовується як роздільник).

test2col.html

<Body> <div id = "header"> <p> Тема сторінки </ p> </ div> <! - Завершення header -> <div id = "container"> <div id = "textBlock"> < p> Тут знаходиться основний вміст сторінки (текст, малюнки, таблиці і т.д.). </ p> <p> Довжина цього блоку може бути менше або більше довжини menu. </ p> <p> Для демонстрації роботи розмітки ми зробили цей блок довше ніж menu, тому що в нашій таблиці стилів для цього блоку використовується директива float і він може виходити за межі блоку container. </ p> <p> Справа в тому, що директива float: right "вириває" блок з потоку документа і вказує іншим блокам обтікати цей блок зліва . Оскільки у нас і textBlock, і menu входять в блок container, то висота блоку container буде дорівнювати висоті menu, тому що для нього не встановлена ​​директива float. </ p> <p> Що б обійти це обмеження ми додали в контейнет додатковий блок bottom і в таблиці стилів встановили для нього директиву clear: both </ p> </ div> <! - Завершення textBlock -> <div id = "menu"> <ul> <li> Розділ 1 </ li> <li> розділ 2 </ li> <li> розділ 3 </ li> <li> розділ 4 </ li> <li> розділ 5 </ li> </ ul> </ div> <! - Завершення menu -> <div id = "bottom"> </ div> </ div> <! - Завершення container -> <div id = "footer"> <p> Автор: Стаценко Володимир </ p> </ div> <! - Завершення -> </ body>

test2col.css

#header {border: solid 1px # 0f0; } #Header p {text-align: center; font-size: 140%; } #Container {border: dotted 1px # f00; background-image: url ( 'delimeter.gif'); background-repeat: repeat-y; } #TextBlock {width: 70%; float: right; border: dotted 1px # 00f; } #TextBlock p {} #menu {width: 200px; border: dotted 1px # ff0; } #Menu ul {list-style: none; } #Menu ul li {} #bottom {clear: both; } #Footer {}

Примітка: розмір блоку bottom буде залежати від його вмісту. Якщо ви в нього нічого не зміните, то його висота буде дорівнює нулю і блок буде невидимим.

Другий спосіб трохи складніше. Ідея в цілому та ж, але тут ми застосуємо трехколоночной верстку. Третя (центральна) колонка буде використовуватися виключно для створення роздільник. На мій погляд, цей варіант зручніше для «поточної» верстки, тому що дозволяє зберігати співвідношення між шириною колонок при різних дозволах екрану.

Робиться це в такий спосіб. Для обох блоків ми задаємо властивість float (наприклад, для меню float: right, а для тексту - float: left) і вказуємо їх ширину (припустимо, 30% і 78%). Зверніть увагу, ми залишили «зазор» в 2% для нашого роздільник (центральної колонки), назвемо її line.

Тепер нам потрібно забезпечити, щоб висота роздільник дорівнювала висоті більшого блоку. Як це зробити, ми вже знаємо. Додаємо в блок line блок bottom. Оскільки блок bottom буде знаходиться під меню і текстовим блоком, то line розтягнеться на потрібну нам висоту. А далі ставимо для блоку line кордон або фонове зображення.

Вихідний код для реалізації такої розмітки може виглядати таким чином. (Примітка: в цьому прикладі меню знаходиться праворуч, а текстовий блок зліва. Щоб поміняти їх місцями просто змініть параметри властивостей float в рядках 15 і 24 таблиці стилів на протилежні. І, звичайно, змінити параметри властивості margin в рядку 37).

test3col.html

<Body> <div id = "header"> <p> Тема сторінки </ p> </ div> <! - Завершення header -> <div id = "container"> <div id = "textBlock"> < p> Тут знаходиться основний вміст сторінки (текст, малюнки, таблиці і т.д.). </ p> <p> Довжина цього блоку може бути менше або більше довжини menu. </ p> <p> Для демонстрації роботи розмітки ми зробили цей блок довше ніж menu, тому що в нашій таблиці стилів директива float використовується для цього блоку і він може виходити за межі блоку container. </ p> <p> Справа в тому, що директива float: left "вириває" блок з потоку документа і вказує іншим блокам обтікати цей блок праворуч . Оскільки у нас і textBlock, і menu входять в блок container, то висота блоку container буде дорівнювати висоті menu, тому що для нього не встановлено директива float. </ p> </ div> <! - Завершення textBlock -> <div id = "menu"> <ul> <li> Розділ 1 </ li> <li> Розділ 2 </ li> <li> Розділ 3 </ li> <li> Розділ 4 </ li> <li> Розділ 5 < / li> </ ul> </ div> <! - Завершення menu -> <div id = "line"> <div id = "bottom"> </ div> </ div> </ div> <! - Завершення container -> <div id = "footer"> <p> Автор: Стаценко Володимир </ p> </ div> <! - Завершення -> </ body>

test3col.css

#header {border: solid 1px # 0f0; } #Header p {text-align: center; font-size: 140%; } #Container {border: dotted 1px # f00; } #TextBlock {float: left; width: 65%; border: dotted 1px # 00f; } #TextBlock p {} #menu {float: right; width: 29%; border: dotted 1px # ff0; } #Menu ul {list-style: none; } #Menu ul li {} #line {margin: 0 29% 0 70%; border-left: solid 3px # 000; } #Bottom {clear: both; } #Footer {}

ви також можете скачати архів з цими файлами.

постовий

портал роботи в Одесі



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью