CSS верстка сайту: макет в три колонки

наш макет

завдання

Наше завдання - створення макета з трьох колонок засобами CSS. Цей макет може послужити основою інформаційного сайту з «шапкою», правою також лівою колонками для меню також додаткової інформації, з центральним блоком тексту також «підвалом» для копірайтів, контактів також іншого. Типовий для контент-проекту макет.

Безсумнівно, цей макет неможливо назвати дивом дизайнерської думи, але ви прктически завжди зможете привести цей шаблон в «божеський вид», підібравши правильні шрифти, їх розмір, додавши прекрасний також правильний логотип. Не важко буде самостійне ускладнення макета, додаток нових CSS блоків.

Технології, що використовуються також підтримка браузерами

Макет сайту стане реалізований повністю на CSS, планується «епізодичне» використання XHTML також JavaScript.

Використовувана CSS верстка підтримується браузером Internet Explorer 6, актуальними версіями Mozilla також Opera. Маршрутом деяких хитрощів, макет буде працювати також в Internet Explorer 5. Цього повинно бути достатньо. Наш CSS схоже змушений припасти до душі текстовим браузерам також іншим екзотичним пристроям.

Працездатність коду в IE 4, Netscape 4 також більш старих браузерах ніяк не перевіряв, але, впевнений, будуть проблеми. Втім, це некритично, подивіться статистику популярності браузерів від hotlog, spylog також liveintenet.

Переваги також недоліки розглянутого способу CSS верстки сайту

У макета є серйозні плюси також досить серйозні недоліки. Необхідно вирішити, що важливіше для вашого сайту також його відвідувачів.

недоліки:

• Чи не працює в Internet Explorer 4, Netscape Navigator 4 також більш старих браузерах.
• CSS верстка (створення блоків також їх позиціонування) підтримується сучасними браузерами ніяк не ідеально, тому сторінку необхідно тестувати у всіх браузерах, використовуваних вашою кімнатою, на предмет дрібних, але неприємних відмінностей у відображенні сторінки.
• Муки з вертикальним позиціонуванням також визначенням висоти елементів в CSS. Це не так гордо, якщо тільки ви ніяк не шанувальник підгонки всіх елементів з точністю аж до пікселя.
• Для нашого макета необхідно, щоб колонка з основним вмістом мала значну висоту, ніж бічні колонки. В іншому випадку сторінка стане виглядати неохайно. До честі сказати, це попит характерно для більшості сайтів з вертикальним дизайном. Якщо сторінки пишуться вручну (а ніяк не генеруються скриптами), то приміщення можна «добити» переносами рядків.
• Складно переучуватися з табличної верстки. Спочатку від margin'ов також padding'ов стане хворіти голова

плюси:

• Освоївши CSS верстку, легко розбиратися в коді, змінювати стилі. При продуманому розташуванні CSS блоків незначні зміни дизайну схоже ніяк не важко - для цього достатньо відредагувати файл з CSS.
• Текстовим браузерам також іншим обмеженим пристроїв укладення інформації змушений сподобатися наш макет - без стилів він представляє собою нехитрий текст в одну колонку з мінімальним числом XHTML елементів оформлення.
• Без CSS стилів (т. Е. Охайний XHTML) макет - це заголовок сторінки в самому верху також подальший за заголовком основний текст. «Тельбух» (посилання, копірайти, навігація, новини - все те, НЕ для чого користувач прийшов на сторінку) зволікає свого часу в самому низу. Таке розташування інформації благотворно позначиться на ставленні до сайту простих пристроїв укладення інформації ,, саме суть, пошукових роботів - вони люблять, в який час на сторінці є текст, але не вічні табличні теги.
• Швидке відображення браузерами. У разі значних сторінок або нешвидкого з'єднання відвідувач може почати вимовляти основний текст, поки що завантажуються бічні меню також пр.
• «Гумова» верстка - ширина блоків макета залежить від розміру вікна браузера, таким чином, ніяк не пропаде корисне екранне простір.
• Легка реалізація для цього CSS макета версії сторінки для друку.
• Чистий XHTML код також дизайн засобами CSS, але не таблиць - це «круто» також гостро модно .

Мабуть, плюси переважують. Отже, якщо ваш сайт ніяк не посвячений Windows 3.11 також відповідної кімнати, якщо ви готові освоїти блокову модель CSS також ніяк не мають наміру додавати до макету складні елементи з нестандартним розташуванням, можна вимовляти далі.

Трохи теорії CSS верстки сайтів (створення також позиціонування CSS блоків)

Докладно викладати теорію немає ні бажання, ні можливості. Тема ця складна також велика. Постараюся «звільнитися» посиланнями також коротко викласти те, що безпосередньо стане використовуватися в макеті.

Отже, посилання:

• www.w3.org/TR/REC-CSS2/box.html - офіційна специфікація CSS блоків. Зверніть увагу на параметри блоку - padding, margin, border, width - те, з чого складається займане блоком простір. Сторінка тільки для справжніх самураїв.
• www.w3.org/TR/REC-CSS2/visuren.html - офіційне опис CSS позиціювання (розташування на сторінці) блоків. Акт схоже призначений виключно для людей незламної бажання. Зверніть увагу на «positioning scheme», «Normal flow», «Relative positioning» також «Absolute positioning» - все це знадобиться нам для макета.
• www.webmascon.com/topics/designdetails/19a.asp - «філософська» стаття про CSS верстці, є загальна інформація також корисні посилання.
• www.webreference.com/html/tutorial9/1.html - детальна «обучалка» по CSS блокам.
• Приклади CSS макетів спільно з кодом:
  www.thenoodleincident.com/tutorials/box_lesson/boxes.html
  www.glish.com/css/
  www.bluerobot.com/web/layouts/
• Про CSS позиціонуванні російською. Чудовий ресурс, безліч практичних рецептів на кожен добу, на кожен сайт:
  www.htmlbook.ru/content/181.html
  
• Також раджу купити книгу або завантажити електричний варіація (де також є загальний, ніяк не знаю) «Веб-мастеринг засобами CSS» Михайла Дубакова. Стане в нагоді частка 2, голови 8 також 9.

Тепер трохи від себе. Блок - це прямокутний елемент веб-сторінки, який задається за допомогою блокових (наприклад, <div> або <p>) елементів (по-бусурманську, тегів) XHTML. Блок займає деякий простір також закінчується перекладом рядка, пара <div> елемента будуть розташовані на сторінці один під іншим, тому що це блокові елементи. Пару елемента <i> ніяк не будуть, т. К. Це рядкові елементи.

C допомогою CSS можна визначати параметри блоків - зовнішні межі (margin), рамки (border), внутрішні відступи аж до вмісту (padding), власне, ширину вмісту (width). Вмістом CSS блоку може виявлятися текст, картинки, вкладені блоки також об'єкти ... Властивість background-color визначає фонової фарба (заливку) блоку, при цьому полі margin прктически завжди прозоро. Опис даних властивостей також є створення CSS блоку.

На сайті www.ilovejackdaniels.com є корисна пам'ятка з CSS, звідки ми дозволив собі вирізати схему CSS блоку, ніяк непорушення копірайтів для, але для більшої зручності. І звичайно простить мене ilovejackdaniels.com, якому також належать всі мислимі також немислимі пільги на дане зображення:

Висота CSS блоку на практиці визначенню ніяк не піддається (мова рухається про «гумовою» верстці), звичайно нам це також ніяк не потрібно. А ось ширина блоку - це наше все, складається вона з ширини: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. У макеті ніяк не стане border, все зробимо через padding також width - так простіше також швидше.

CSS макет сайту є «гумовою», тобто ширина його залежить від доступного простору (розміру вікна браузера), тому width також padding визначені у відсотках. Відсотки задають ширину щодо батьківського елементу. Батьківський елемент це або вікно браузера (фактично, тег <body>) або будь-блоковий елемент, в який вкладено визначається елемент (в макеті кілька <div> будуть вкладені в один батьківський <div> -блок).

Блоки створені, за допомогою CSS визначено їх властивості (padding, width). Необхідно правильно розташувати їх на сторінці. Це також є CSS позиціювання. Якщо ніяк не описувати розташування блоків на сторінці, то вони будуть відображені браузером один під іншим, відповідно до розпорядку їх опису в XHTML коді сторінки. Таке розташування іменується нормальним потоком.

Існують різні способи також техніки. Ми будемо використовувати властивості position: absolute (абсолютне CSS позиціювання) також position: relative (відносне позиціонування). Далі необхідно визначити зміщення (в пікселях для жорсткої верстки сайту або у відсотках для «гумовою») блоку на сторінці від верхньої або нижньої, лівої або правої точки відліку. Що є цією точкою відліку?

Для position: relative точкою відліку є розташування блоку в нормальному потоці. Т. е. - Position: relative; top: 10%; left: 10%; - Також блок зрушиться на 10% вниз також вправо щодо його нормального розташування. Якщо прописати відносне позиціонування також ніяк не ставити зсув, то блок стане розташований в нормальному потоці.

Для position: absolute точкою відліку є точно відомий елемент; нормальний потік також розташування інших елементів ніяк не грають ролі. Цією точкою може бути або вікно браузера або батьківський блок, який є повно або щодо позиційованим. Зсув схоже визначається пікселями або відсотками властивостей top, left, bottom, right.

Спробуємо витягти з цих, здається, «несумісних з життям» правил іскри розумного - однак саме, код макету сайту з трьох колонок.

XHTML також CSS код макета

Тут також далі «шматки» коду також пояснення до них. .

XHTML код

Першим заняттям заявляємо тип акту, іншим чином макет стане некоректно (у стилі Internet Explorer 5) відображатися в IE 6 також Opera. При безпомилковому DOCTYPE проблем немає.

Тегом <link> на сторінку завантажуються CSS стилі із зовнішніх файлів. Загальний манера style.css лежить у корені сайту (як правило, це папка / public_html) також призначений для комп'ютерних браузерів (media = "screen"). Стиль print.css стане використовуватися для друку, про це трохи нижче. Далі за допомогою JavaScript визначаємо браузер користувача ,, якщо це Internet Explorer 5, йому віддається CSS манера з файлу ie5.css.

Першим слід div-блок header, призначений для заголовка сторінки. У службовому блоці main немає тексту, але в нього вкладено 4 блоки: content для основного тексту сторінки, leftmenu також rightmenu для лівого також правого меню відповідно також блок footer для «підвалу» макета.

Всі блоки лише тільки визначені в XHTML коді, за їх властивості також розташування дає відповідь CSS.

Загальний CSS стиль

Першим заняттям визначимося зі стилем <body> (т. Е. Вікна браузера) - прибираємо зовнішні також внутрішні відступи, додаємо фоновий фарба (# f0f0f0 - світло-сірий).

Для блоку заголовка видалені зовнішні відступи (margin: 0px;), обрана помаранчева заливка також ширина в 100% батьківського елементу (ним є <body>). 100% складається з 98% ширини вмісту блоку також по 1% для padding-left також padding-right. Скорочена запис padding: 1%; задає відступ з усіх чотирьох сторін (top, left, bottom, right).

Блок стане розташовуватися в нормальному потоці, що нас поки що влаштовує, тому в позиціонуванні немає необхідності.

Службовий блок main є контейнером інших блоків з вмістом. У нього немає кордонів також відступів, проте width: 100% - тому, ширина main дорівнює ширині вікна браузера. У блоці ніяк не стане тексту, але він дуже важливий для нашого макета. По-перше, для повного позиціонування CSS блоків правого також лівого меню, по-друге, для створення сірого (#ccc) фону меню на всю висоту сторінки.

Як згадувалося, position: relative означає зміщення блоку щодо його розташування в нормальному потоці. Але одного разу ніяк не задана розмір зсуву, блок стане розташований схоже нормальному потоку CSS. Оголошення position: relative; необхідно для повного позиціонування блоків бічних меню. Як ви пам'ятаєте, повне позиціонування в CSS відраховується від вікна браузера або батьківського блоку, який є повно або щодо позиційованим.

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

Властивість overflow: hidden; необхідно, щоб прибрати дріб'язковий баг IE6. Internet Explorer 6 під керуванням Windows XP з екранної XP темою (в разі класичної теми Windows все нормально) вважає, що сторінка ніяк не вміщається повністю в вікно браузера також додає смужку горизонтальної прокрутки. Прокручується всього 1-2 пікселя, мабуть XP-тема збільшує ширину елементів інтерфейсу браузера, але він (браузер) цього усвідомити ніяк не в змозі ...

Так або інакше, overflow: hidden; вказує, що вміст, який виходить за межі контейнера (життєвий приклад - вельми довге вираження у вузькому CSS блоці), обрізається також користувачеві ніяк не надається можливості (смуг прокрутки, наприклад) це вміст переглянути. У нашому випадку контейнером є блок main, шириною в 100% вікна браузера, однак вмістом - вкладені блоки.

CSS блоки основного вмісту також «підвалу». Світло-сірий фон для зручності читання - білосніжний фон також чорний шрифт надзвичайно контрастні також можуть стомлювати ока. Для footer використовується помаранчевий. В іншому CSS опис блоків однакове.

Обидва займають всю ширину сторінки. Ширина вмісту 58%. Зовнішні відступи (використовується скорочений запис в форматі - margin: top left bottom right;) 20% зліва також 20% справа. Плюс внутрішня відбиття вмісту від рамки блоку в 1% зверху, зліва, справа також знизу. Вважаємо горизонтальний розмір CSS блоку зліва направо: 20% + 1% + 58% + 1% + 20% = 100%.

Таким чином, ширина footer також content становить 100% від батьківського блоку main, який в свою чергу займає 100% від body. Нюанс - зовнішні відступи margin складають по 20% з кожного боку, зовнішні відступи блоку прозорі, т. Е. Кольором ніяк не заливати. CSS блоки content також footer займають всю ширину вікна також поки що ніяк не зовсім зрозуміло, в якому місці взяти приміщення для бічних меню.

Відповідь в position: absolute. Для повного позиціонування ніяк не мають значення нормальний потік також інші CSS блоки. Необхідна точка відліку, розмір зміщення по вертикалі також горизонталі також ширина блоку. Точкою відліку може бути вікно браузера, повно або щодо позиційований батьківський CSS блок. Нині ясно, навіщо для блоку main ми використовували position: relative також нульовий зсув.

Блок leftmenu (ліва навігаційна панель) позиціонується від CSS блоку main, зсув зверху також зліва - по 0 пікселів. Для rightmenu той же зсув, але зверху також справа. Ширина обох блоків - по 20% (1% padding-left + 18% width + 1% padding-right) від батьківського main. Фактично, leftmenu також rightmenu накладаються на блоки content також footer - точніше, на їх прозорі зовнішні межі margin!

Висота бічних меню залежить від вмісту. Меню ніяк не мають фонового кольору, тому фоном для них служить сіра заливка блоку main. Margin'и у content також footer прозорі. Завдяки цьому візуально бічні меню мають однакову висоту також залиті сірим кольором.

Останні штрихи. Усередині блоків інформація розбивається на абзаци тегом <p>. <P> - блоковий елемент, у якого є свої зовнішні поля. Internet Explorer 6 поєднує margin також padding наших CSS блоків. А Opera також Mozilla їх підсумують, в результаті виходить надзвичайно значна «відбиття» тексту зверху також знизу від кордонів блоку. Цей код прибирає вертикальні зовнішні відступи для елементів, вкладених в CSS блоки макета.

CSS манера для Internet Explorer 5

Наш макет без проблем відображається в Internet Explorer 6 також в останніх версіях Mozilla також Opera. Але у Internet Explorer 5 свій погляд на CSS:

За даними популярніших «лічилок» Рунета - spylog, hotlog також liveintenet - Internet Explorer 5 в ходу приблизно у 18% користувачів, тому відмовитися від підтримки це браузера, на жаль, не можна.

Рішення очевидно - для невірного браузера робимо невірний CSS також підключаємо цей манера тільки для 5-ої версії пацієнта.

за допомогою JavaScript визначаємо браузер користувача ,, якщо це IE5, вписуємо в код сторінки (за допомогою того ж скрипта) посилання на CSS файл ie5.css.

Згідно зі специфікацією займане CSS блоком по горизонталі простір розраховується за формулою: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. При цьому ширина вмісту (тексту, малюнків, flash-об'єктів ...) задана параметром width.

IE5 вважає, що width визначає ширину всієї видимої елементи блоку (видима частина - все крім margin), проте на вміст блоку залишається результат вирахування з width значень padding також border. Значить, потрібно вказати йому неправильне значення width для всіх блоків по формулі - займаний простір мінус margin-left мінус margin-right.

Ще один баг - текст бічних меню «липне» до околиці блоку. Видно, що зверху (по вертикалі) відступ (padding) від межі блоку аж до вмісту є, однак по горизонталі - немає. Властиво це тільки бічним меню (причина, швидше за все, в повному позиціонуванні цих CSS блоків), тільки для горизонтальних padding також тільки, якщо вони вказані у відсотках. Задаємо відступи зліва також справа для бічних меню в пікселях, десяти повинно вистачити.

Також на скріншоті видно, що ліва також права колонки накладені одна на іншу. IE5 ніяк не виконує жодних властивість CSS right, за допомогою якого ми позиціонуємо по горизонталі блок rightmenu. Доводиться прописувати для нього зміщення вже зліва на 80% (60 + 20 - чому саме стільки, мислю, також так зрозуміло).

CSS для друку сторінок

У макеті вказано пара стилю для різних пристроїв відображення інформації:

style.css для браузерів (media = "screen"), проте print.css для друкуючих пристроїв (media = "print"). Відповідно, дані CSS стилі приятель з приятелем ніяк не пов'язані також описують сторінку кожен по-своєму. Cтиль для print.css стане гранично простою:

Встановлюємо білосніжний фон для блоків, текстові елементи робимо чорними. Гіперпосилання (<a>) схоже будуть чорного кольору. Погодьтеся, для укладення на друк це розумно.

за допомогою директиви display: none; повністю прибрані бічні меню. Очевидно, що сторінка стане друкуватися для основного тексту, заголовок схоже ніяк не завадить. «Підвал» залишається при друку, в разі необхідності ви прктіческі завжди зможете видалити також його.

висновок

У нас вийшов макет сторінки в 3 колонки, макет цей повністю описаний засобами CSS також трохи «розбавлений» XHTML також JavaScript. Переваги також недоліки цього способу CSS верстки описані вище (до кінця статті можна також призабути - ніяк не надто коротенька вийшло, згоден).

Залишилося підібрати шрифт також кольору «до смаку», приробити до «гумовою» верстці ніяк не менше «гумовий» розмір шрифту, подумати над оформленням заголовків, також вийде нормальний дизайн інформаційного сайту, повністю реалізований на CSS. Що також потрібно було довести