Приклад верстки CSS
- вміст
- валідація
- Верстка
- організація
- розкладка
- шрифти
- Кольори і декор
- Тема і підвал
- колонки
- ліва колонка
- колонка новин
- Головна колонка
- усе
Настав час після довгої нудною теорії верстки CSS'ом нарешті вже що-небудь осмислене зверстати. У цій статті я покажу від початку до кінця один з варіантів верстки трехколоночной сторінки.
Приклад спирається на попередні статті " підручника ", І якщо в цій статті будуть якісь неясності, відповіді треба шукати в них. І хоча приклад може бути корисний і сам по собі, як просто готовий шаблон, головна його мета - показати в дії всі механізми CSS, про які я писав раніше, дати їх відчути, щоб ви могли їх вільно застосовувати так, як це потрібно вам.
З місця в кар'єр - ось те, що вийде в результаті:
Відразу повинен обмовитися з приводу графічного дизайну. Я абсолютно не дизайнер, і той "дизайн", що на зображенні, абсолютно не претендує хоч на якусь художню цінність. Сприймайте його як навчальний макет.
вміст
Створення сторінки починається з визначення структури її вмісту. Треба вирішити, з чого по-крупному сторінка складається, і як воно між собою пов'язано. Не мудруючи лукаво я вирішив зімітувати вміст деякого простенького гіпотетичного корпоративного сайту (можливі подібності з реальними сайтами випадкові!):
- Шапка з назвою компанії
- Основне вміст сторінки:
- власне текст
- Навігація
- Меню розділів
- Пошук
- новинна колонка
- Мета-інформація про сторінку: будь-яка дрібниця на зразок копірайтів і контактних email'ов.
Тепер перетворимо все це в HTML. ось жива сторінка з тестовим текстом, яка і буде далі верстатися. Для зручності сприйняття структури ось її код без тексту:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <title> ... </ title> < link rel = "stylesheet" href = "style.css"> <div id = "title"> <h1> ... </ h1> </ div> <div id = "content"> <div id = "main "> ... </ div> <div id =" sections "> <h2> ... </ h2> <ul> ... </ ul> <form id =" search "> ... </ form> </ div> <div id = "news"> ... </ div> </ div> <div id = "meta"> ... </ div>
Якщо порівняти цей код з тим списком вмісту сторінки, що я привів трохи раніше, то можна побачити, що він її повністю повторює. Все просто.
Ось мене запитують, навіщо там на сторінці "Рінгтони". Звідки я знаю? Все продають рінгтони, чому ми не повинні !?
валідація
Про валідацію я написав виключно для повноти викладу, і безпосередньо з іншою статтею це не пов'язано. Тому, якщо вам воно не дуже цікаво, можете сміливо цю частину пропустити і перейти відразу до глави "Верстка", на розуміння це не вплине.
моя точка зору на відносну марність валідації, можливо, досить екстремальна для підручника, тому я вирішив, що ця сторінка повинна таки бути валидной за стандартом HTML 4.01 Strict. Це можна перевірити валідатором на W3C .
Разом з тим, як можна бачити, на цій валидной сторінці відсутні теги <html>, <head>, <body>, немає купи закривають тегів і т.п. Це не помилка валідатора, це гнучкість HTML: багато теги не тільки закриваються, а й додаються автоматично. Зокрема, <title> і <link>, з яких сторінка починається, будуть поміщені в автоматично створений <head>, все інше вміст буде вміщено в <body>, і вони обидва будуть укладені в <html>. Так само будуть закриті всі <p> і <li>.
Пропустив я ці теги частково для того, щоб продемонструвати цю не дуже широко відому особливість HTML, і почасти тому що так код простіше читається.
Верстка
По ходу всієї верстки я буду давати посилання на сторінки, які показують до чого ми дійшли до даного моменту. Але для отримання максимального задоволення я рекомендую робити верстку безпосередньо у себе на комп'ютері по ходу читання. скачайте HTML-файл , графіком і створіть поруч порожній файл "style.css". Або відразу скачайте весь архів всіх кроків.
організація
Перше, про що варто подумати - це організація CSS. Його можна написати безліччю способів, серед яких найгірший - це пхати все підряд в один файл в порядку "як придумалося". Це дуже швидко призводить до стану, коли, щоб зрозуміти, як, скажімо, прибрати такий-то відступ, доводиться прочісувати файл вперед і назад багато разів. Тому стильові правила треба якось групувати.
Перший спосіб, який приходить в голову - це угруповання по блокам інформації, коли разом знаходяться всі правила, що визначають вид якогось блоку (новин, шапки, навігації): і розташування, і шрифти, і кольору і все інше. Однак в цьому випадку важко міняти якусь одну складову дизайну: колірну схему або набір шрифтів, тому що вони всі розкидані по файлу.
Є інший спосіб угруповання - коли поруч знаходиться те, що доводиться часто одночасно міняти:
- кольори
- шрифти
- розкладка
- інше
... і виходить, що правила для шапки можуть перебувати в різних місцях файлу. Це здається спочатку дивним, але виявляється зручним, якщо робити дизайн не блок за блоком, а по шарах: спочатку визначити розташування, потім шрифти, потім кольору.
Ніякого єдино вірного способу тут немає. Це багато в чому питання того, як саме вам зручно думати про дизайн сторінки. Я віддаю перевагу другому спосіб, для чого відразу готував в CSS-файлі такий скелет з коментарів:
/ * Layout ****************** / / * Fonts ******************* / / * Colors ** **************** / / * Misc ******************** /
розкладка
Для початку давайте подивимося ще раз на фінальний дизайн . Перша його особливість - це те, що сторінка фіксованої ширини, і що вона знаходиться по центру. Ми використовуємо механізм центрування з статті про потік , І для цього нам потрібно спочатку визначитися, що центрировать і всередині чого. Оскільки у нас центрируется вся сторінка всередині вікна, то ми будемо центрировать <body> всередині <html>. Код виходить дивно коротким:
body {padding: 0; margin: 0 auto; width: 700px; }
Установка ширини очевидна, а margin і padding можуть викликати питання. Справа в тому, що для сумісності браузери ставлять для <body> відступи за замовчуванням. Причому, одні через margin, а інші - через padding. Найчастіше ці відступи не потрібні, і їх обнуляют. Але оскільки нам потрібно центрування, права і ліва margin встановлюються в auto.
Наступна неочевидність - це де тут елемент <html>, про який я говорив. Він повинен задавати ширину, в якій буде центрироваться <body>, і вона повинна повністю заповнювати вікно. Але будь-який елемент за замовчуванням і так займає по ширині все вікно, тому щось спеціально писати не треба було.
Ще одна річ. Дуже, дуже часто верстальники ігнорують елемент <html> геть, і замість цього <body> працює як фоновий елемент, а всередину нього вставляється зайвий <div>, який тримає вміст. Не потрібно так робити, крім погіршення читаності це не дає нічого.
Тепер займемося блоками з шапкою, основним вмістом і підвалом. Вони кожен займають всю ширину свого контейнера (<body>) і йдуть один за іншим. Тобто, знову таки, є простий потік, і нічого для їх позиціонування писати не потрібно :-).
Розкладемо колонки. Для цього можна скористатися або абсолютним позиціонуванням , або float'амі . Але позиціонування нам, очевидно, не підійде, тому що висота сайту у нас не фіксована, а залежить від вмісту. Тому - float'и.
Нагадаю, в статті про float'и я описав два механізми їх побудови: в одному float'ятся все колонки, а в іншому одна колонка залишається статичною. Сенс цього другого варіанту проявляється при зміні ширини колонок, але у нас ширина всієї сторінки фіксована. Зате другий варіант не дає міняти колонки місцями. А ось це нам якраз знадобиться.
В HTML блоки, які ми хочемо перетворити в колонки йдуть в такому порядку:
- головна колонка ( "main")
- розділи сайту ( "sections")
- новини ( "news")
... а розкласти їх треба так, щоб перші дві помінялися місцями: "sections" зліва, а "main" - в середині. Для початку всіх їх треба заfloat'іть і задати їм ширину:
#main {float: left; width: 55%; } #Sections {float: left; width: 20%; } #News {float: right; width: 25%; }
Тепер перестановка. Крім позиціонування в CSS є ще один спосіб рухати блоки - margin. Щоб переставити місцями "main" і "sections" ми додамо зліва першої позитивний margin, а другий - негативний. Головне - їх порахувати.
З "main" все просто: вона притиснута до лівого краю, і її досить зрушити на ширину "sections" - 20%. Сама ж "sections" стоїть справа "main", а значить від лівого краю її зараз відділяє і ширина "main", і відступ в 20%, який ми тільки що додали. У підсумку, її треба рухати вліво на 20% + 55% = 75%. Проміжний підсумок:
#main {float: left; width: 55%; margin-left: 20%; } #Sections {float: left; width: 20%; margin-left: -75%; } #News {float: right; width: 25%; }
Проміжний, тому що у нас є Internet Explorer, в якому є баг, який у float'ов, притиснутих до краю, подвоює кордон, задану від цього краю. Тому наші margin-left: 20%, задані колонці "main" перетворюються в 40% і ламають всю розкладку. Щоб це усунути, спеціально для Internet Explorer'а додається окреме правило з кордоном, зменшеною в два рази:
* Html #main {margin-left: 10%; }
Тут вся сіль - у доданому * html. За правилами CSS вся ця конструкція (* html #main) не повинна підходити до елементу "main". Але IE - єдиний браузер, у якого це не так, і він це правило сприймає так само, як просто #main. Ось тому цей факт широко використовується для того, щоб писати правила, потрібні тільки для IE. Таке, ось, вдалий збіг багів :-).
Останній штрих, який нам потрібен для колонок - це зробити так, щоб елемент "meta" відсовувався під найдовшу колонку. Для цього у нас вдало є елемент "content", в якому все три колонки лежать. Зробимо, щоб він їх охоплював (всі докладні пояснення - в статті про float'и ):
#content {overflow: hidden; width: 100%; }
Настав час подивитися на те, що вийшло на цей момент .
Всі вже починає займати потрібні місця. Наступний крок - зрушити форму пошуку. Вона зараз висить в лівій колонці, а нам хочеться бачити її в заголовку справа вгорі. Для таких радикальних перестановок підходить абсолютне позиціонування:
#search {position: absolute; top: 0; right: 0; margin: 20px; }
В установці margin: 20px немає ніякої магії, це просто для краси.
Але це не все. Справа в тому, що таким чином форма поставиться до верхнього правого краю вікна, а не 700-пиксельного <body>. Щоб контейнером для позиціонування вважався <body>, треба зробити з нього "стакан", який я описував в статті про позиціонування . Звідти ж і рецепт:
body {/ * ... * / position: relative; }
Ось тепер форма буде розташовуватися в правому верхньому куті <body>, як раз в зоні заголовка.
Але все одно не зовсім там, де треба. У всій нашій розкладки є ще одна велика проблема, і щоб побачити її наочно, варто просто тимчасово розфарбувати основні блоки сторінки фоновими кольорами:
#title {background: #FEE; } #Content {background: #EFE; } #Meta {background: #EEF; } #Search {background: #FFE; }
І ось як воно виглядає . Тут треба відволіктися від кошмарного загального зовнішнього вигляду і звернути увагу на правий верхній кут форми пошуку. Він відстоїть на покладені 20 пікселів від краю заголовка, але і зверху і знизу самого заголовка є відступи, які ми не планували. І якщо подивитися вниз, то і навколо нижнього блоку вони теж є.
Це прояви випадіння кордонів елементів <h1> (в заголовку) і <p> (в підвалі). Я його описував в статті про кордону в потоці . Давайте від нього позбавимося:
h1 {margin: 0; padding: 20px; } #Meta {padding: 1px 0; }
Одна маленька деталь. У першому випадку я просто обнулив margin у <h1>, щоб не було чому вивалюватися, а padding потрібен просто для краси, щоб простір навколо тексту було. У другому випадку я додав маленькі непомітні padding'і контейнеру, щоб скасувати вивалювання margin'ов <p>. Чому саме так - розповім далі.
Тепер ніяких білих смуг бути не повинно, і форма пошуку повинна висіти на потрібній висоті. Вона сама по собі ще величезна і вилазить вниз, але це вже не відноситься безпосередньо до розкладці і усунеться потім при тонкій настройці.
Що нам ще потрібно від розкладки - так це один чудовий ефект, який додасть їй більш завершеного вигляду. Якщо на сторінці мало тексту (спробуйте просто зменшити шрифт в браузері на пару розмірів), то видно, що підвал починається відразу після тексту, і за ним до кінця вікна багато пустого простору. Це не красиво. Хочеться, щоб коротка сторінка займала всю висоту вікна, а підвал завжди притискався до нижньої кромки сторінки.
Переведемо це все з російської мови безпосередньо на CSS:
body {/ * ... * / min-height: 100%; } #Meta {position: absolute; bottom: 0; width: 100%; }
Але це, звичайно, тільки початок.
По-перше, значення 100% для <body> означає "100% від висоти батька". Батько - <html>, але у нього висота не задана взагалі, і браузер не в змозі порахувати ці 100%. Тому доведеться додати ще правило:
html {height: 100%; }
У <html> батька немає (самий верхній елемент в ієрархії), тому його 100% беруться від висоти вікна, яку браузер завжди точно знає.
З min-height є ще одна проблема: цього властивості не розуміє IE. Однак нас врятує ще один його баг: властивість height обробляється невірно і працює як раз, як повинен працювати min-height. Тому скористаємося знайомим фільтром:
* Html body {height: 100%; }
Наступна проблема - абсолютно позиційований підвал. Він, звичайно, чудово буде висіти внизу, але він більше не знаходиться після блоку вмісту, а вилучається із загального потоку сторінки і висить над ним. А це означає, що на довгих сторінках текст буде безсоромно підлазити під підвал. Щоб цього не відбувалося, ми додамо після колонок сторінки гарантоване порожній простір, над яким підвал і буде висіти.
Зробити це, в общем-то, просто: поставити блоку з колонками ( "content") нижній padding. Питання в тому - скільки. Зараз точна висоти підвалу невідома, вона визначається текстом в ньому. Однак ми цілком можемо припускати, що в блоці для всякої дрібної мета-інформації не повинно бути занадто багато тексту. Тому ми просто зарезервуємо під неї достатньо місця. Скажімо, 40 пікселів. Все це виливається в такі правила:
#meta {position: absolute; bottom: 0; height: 40px; width: 100%; padding: 1px 0; } #Content {padding-bottom: 42px; }
42 пікселя знизу "content" - це 40 пікселів висоти підвалу і по 1 пікселу його padding'а.
Розкладка готова. подивимося на результат .
шрифти
Для мене одне з найбільш заважають відчуттів при підготовці розкладки це те, що з-за великих і непоказних шрифтів вона, навіть коли готова, виглядає як команда біатлоністів в горбатому Запорожці (з лижами і гвинтівками, зрозуміло). Тому наступне, що ми зробимо - налаштуємо шрифти.
Як правильно ставити шрифти - тема однією з найгарячіших священних воєн в CSS-співтоваристві, вдаватися зараз в подробиці я навіть не спробую :-). Лише опишу спосіб, яким користуюся сам.
Суть способу має наступний вигляд. Спочатку сторінці (в особі елемента <body>) призначається основний шрифт. Це той шрифт, яким буде набрано більшість тексту. Потім для кожного елемента, в якому шрифт буде відрізняється від основного, прописуються зміни: інший розмір, інша жирність, інше накреслення. Причому, розмір задається у відсотках від розміру батьківського шрифту. Це дозволяє потім зручно змінювати розмір всіх шрифтів на сторінці, змінюючи тільки розмір основного.
Отже, основний шрифт:
body {font: 10pt Tahoma, Sans-Serif; }
На цьому записі варто зупинитися детально. Властивість font - це збірне властивість для кількох шрифтових властивостей, точно так же, як, наприклад, властивість margin задає установку всіх чотирьох margin-top, margin-right, margin-bottom, margin-left.
У font структура трохи складніше , Але якщо виключити екзотику, то воно виглядає так:
font: <курсивні> <жирність> <розмір> <список гарнітур>;
Значення можна пропускати, але не міняти місцями. Таким чином, наш "font: 10pt Tahoma, Sans-Serif" перекладається на російську мову як "некрусівная нежирна Tahoma розміром 10 пунктів". "Sans-serif" означає, що якщо шрифту Tahoma на комп'ютері не буде, браузер візьме шрифт, який у нього в установках призначений як шрифт без зарубок.
Далі йдемо по блокам сторінки і міняємо шрифти. Шапка, потім заголовок всередині головної області сторінки:
h1 {font-size: 180%; letter-spacing: 1px; } #Main h2 {font-size: 130%; }
Звертаю увагу, що при змінах якоїсь однієї характеристики шрифту вже не можна користуватися властивістю font, тому що воно задає весь шрифт повністю. "font: 180%" означає "некурсівний нежирний шрифт за замовчуванням розміром 180%", і наша установка гарнітури Tahoma тут зіб'ється.
Установка letter-spacing: 1px збільшує на один піксель відстань між буквами. Це чисто стилістична штука, мені здалося, що так заголовок виглядає більш е-е-е ... амбітно! Це значення може бути і негативним - тоді букви будуть стояти щільніше.
Далі задамо однакові шрифти для лівої і правої колонок і їх основних заголовків:
#sections, #news {font-size: 80%; } #Sections h2, #news h2 {font-size: 125%; font-weight: bold; text-transform: uppercase; }
Тут варто звернути увагу на розмір шрифту в заголовках. Відсотки розміру шрифту завжди вважаються від розміру шрифту батька. Тому 125% тут беруться не від 10pt основного шрифту, а від шрифту блоків "news" і "sections". Його навіть неважко порахувати: 80% від 10pt - це 8pt. 125% від 8pt - це 10pt.
Визначимо інші шрифти, тут вже немає ніяких загадок:
#news h3 {font-size: 100%; font-weight: bold; } #Meta {font-size: 70%; } #Search input, #search button {font-size: 90%; }
Вдало, що в формі пошуку у нас мало елементів, тому їх усі (обидва) можна однозначно визначити просто за назвою тега. Якщо туди додасться який-небудь <input type = "checkbox">, то доведеться їх обважувати відмітними ознаками. Але раз у нас такого немає, що не будемо смітити HTML.
Отже, зі шрифтами закінчили .
Кольори і декор
Нам залишилося розфарбувати сторінку. Крім власне квітів в цей же етап я об'єднав ще і декор: графічні прикрашення, градієнти, рамки, а також відступи навколо тексту. Хоч кольору і декор - речі різні, я рекомендую їх робити одночасно, так просто зручніше. Однак я все ж буду розносити їх в різні частини CSS-файлу для того, щоб залишити на майбутнє можливість управляти квітами окремо.
Тема і підвал
Почнемо з заголовка і підвалу, тому що вони пофарбовані майже однаково: білий колір тексту на синьому тлі. Тільки у заголовка є ще і градієнт. Ще туди ж приплітається форма пошуку, тому що візуально вона сидить в заголовку.
#title {background: url (title-bg.png) # 45F left top repeat-x; color: white; } #Meta, #meta a {background: # 45F; color: white; } #Search {color: white; }
На прікладі заголовка розповім про властівість "background". Це теж збірне властивість (як font), і воно задає такі параметри:
background: <картинка> <колір> <розташування> <повтор>;
Всі параметри можна пропускати і можна навіть міняти їх місцями.
Градієнт намальований на картинці розмірами 10х50:
Вона розташовується в лівому верхньому кутку ( "left top") і повторюється по горизонталі ( "repeat-x").
Зверніть увагу, що картинка градієнта по висоті не закриває весь блок заголовка. Для того, щоб там не зяяла порожнеча, у властивості background вказано ще й колір (# 45F), який з'являється всюди, де картинки немає (а також в прозорих областях картинки, якщо вони є). Колір цей обраний, звичайно, збігається з нижньою частиною градієнта.
Формат кольору з трьома цифрами # 45F - це скорочений запис, еквівалентна значенню # 4455FF
Тепер треба додати в заголовок ексклюзивний дизайнерський фірмовий логотип. Він теж задається у вигляді фонової картинки, але ми не можемо її прив'язати до блоку "title", тому що там фонова картинка вже є (а задати їх кілька в поточній версії CSS можна). Але у нас в заголовку є ще один елемент - <h1>, який вкладений в блок заголовка.
Дуже зручно, що він повністю заповнює "title", не залишаючи навколо себе вільного місця. Так вийшло якраз тому, що коли ми усували провалювання кордонів, то замінили всі margin'и поза <h1> на padding'і всередині <h1>. І тепер, коли у нас є збігаються за розміром два блоки, дуже зручно вішати на них фонові картинки і розташовувати в точності, як нам треба.
Ось сама картинка логотипу:
код:
h1 {background: url (logo.png) left top no-repeat; padding-left: 60px; }
Пара пояснень. Картинка буде точно на лівому верхньому кутку для того, щоб її градієнтний фон візуально зливався з фоном блоку "title". Якби їх розташування не збігалося, поєднати градієнти було б проблемою.
Відступ в 60 пікселів - це фактично місце під картинку. Це дуже поширений спосіб навішування оформлювальних картинок поруч з елементами: призначити картинку фоном і посунути вміст padding'ом.
Залишилося привести в порядок форму пошуку. Вона повинна бути злегка поменше. Щоб домогтися цього ефекту ми приберемо у абзаців всередині неї все відступи і зменшимо текстове поле:
#search p {margin: 0; } #Search input {width: 10em; }
Все просто. подивимося, що вийшло .
Тема і форма виглядають злегка погано в IE і, на цей раз, ще й Опері. Спочатку розберемося з першим.
По-перше, не видно логотипу. Виправляється ця штука абсолютно магічним методом:
* Html h1 {height: 1%; }
Висота тут, звичайно, ні при чому. Це просто одна з властивостей IE, яке в даному випадку не має ніякого прямого дії, зате "лагодить" дивну поведінку блоків. Ще такими ж "цілющими" властивостями володіють width: 100%, position: relative, zoom: 1. Цей метод називається " holly hack ".
Описати, як підбираються такі рішення, майже нереально ... Просто, якщо якийсь блок веде себе не так, як ніби мав би, варто спробувати поназначать йому ці властивості.
По-друге, кнопка "Шукати" переноситься на інший рядок. Заборонимо переноси в абзацах:
* Html #search p {white-space: nowrap; }
Але тепер кнопка негарно притискається до текстового поля. відсунемо:
* Html #search button {margin-left: 4px; }
В Опері проблема іншого плану. Елемент <button> тут розриває абзац, в якому лежить разом з текстовим полем, і, відповідно, переноситься нижче. В общем-то, полагодити це можна досить просто: змінити <p> на <div>. Але я цей баг виявив занадто пізно, він був уже в кількох покрокових файлах, тому правку цього я залишаю в якості самостійного вправи читачам :-). Крім того, у мене є підозра, що в новій Опері 9 це могли вже й виправити самі розробники.
Тема про помилки в браузерах, чи треба їх правити, як і коли, занадто велика, щоб викладати її тут, я краще повернуся до неї пізніше окремою статтею.
Залишилася тут остання дрібна стилізація - зменшити відступи між абзацами в підвалі. Тут все зовсім просто:
#meta p {margin: 5px; }
колонки
Під колонками у нас є складний візерунок - градієнт і пунктирні лінії, тому найпростіше використовувати для їх візуалізації метод "faux columns", на який я посилався в статті про float'и . Для цього робиться фонова картинка шириною 700 пікселів, на якій малюються градієнт і пунктири по ширині колонок (140 пікселів ліва колонка, 175 - права).
А потім задається фоном до <body> з повторенням по вертикалі:
body {background: url (content-bg.png) white left top repeat-y; color: black; }
... (заодно тут же і кольору фону і тексту).
Подивимося на колонки .
Зовсім не схоже. Фон, який ми призначили центрованої 700-піксельному <body> лежить не в в ньому, а притулився до лівого краю. Це нові браузери роблять для сумісності зі старими браузерами доCSSной ери, коли фон <body> і фон вікна вважалися одним і тим же.
Щоб це поведінка скасувати, достатньо дати якийсь фон елементу <html>, тоді вже він призначив вікна, а фон <body> встане на місце.
Для фону вікна я обожнюю фонові візерунки :-). Крім того, останнім часом це, здається, модно.
html {background: url (window-bg.png) #EEE; }
Відсутність будь-яких "left top no-repeat" означає "заповнити всі". При цьому колір #EEE взагалі не буде видно, тому що картинка візерунка повністю непрозора (сіра по білому). Але він буде видно тоді, коли картинка візерунка ще не завантажена або якщо в браузері відключені картинки. Сам відтінок підібраний так, щоб приблизно походити по насиченості на візерунок.
Ось тепер колонки повинні виглядати пристойно .
ліва колонка
Для початку, мені подумалося, що заголовок "Розділи" в лівій колонці буде зайвим (такий собі дизайнерський хід). Тому він просто забирається:
#sections h2 {display: none; }
Наступний об'єкт стилізації - меню. Воно задано списком <ul> і тому зрушено вправо і має буліти у кожного пункту. Нам всього цього не треба:
#sections ul {list-style: none; margin: 50px 0; padding: 0; }
list-style: none відключає буліти, а всілякі відступи і межі ми повністю перевизначати: з боків їх немає, а зверху і знизу списку є по 50 пікселів. Завдання одночасно і margin'а, і padding'а потрібно для того, щоб прибрати відступи за замовчуванням, які різні браузери задають хто через одне, хто через інше.
Розібравшись з відступами, розквіт самі елементи:
/ * Colors ****************** / #sections li a {background: # 293499; color: white; border-color: white; } #Sections li a: hover {background: # D00; } / * Misc ******************** / #sections li a {display: block; margin: 5px 0; padding: 2px 5px; border-style: solid; border-width: 1px 0; text-decoration: none; }
На що тут звернути увагу:
- Не тільки кольору фону і тексту, але і рамок винесені в розділ квітів, а ось товщина і стиль рамки задається в декорі.
- Кольори тексту задаються елементу <a> всередині <li>. Це через те, що браузер за замовчуванням фарбує посилання в синиць колір, а не в колір навколишнього тексту. Якщо білий колір призначити на <li>, то <a> все одно залишиться синім.
- Конструкція a: hover працює, коли над <a> знаходиться мишка. В цьому випадку ми підфарбовуємо посилання червоним тлом.
- display: block для посилання потрібен для того, щоб вона, як годиться блочному елементу, зайняла всю ширину <li>, і площа посилання була не тільки над літерами, але займала весь елемент списку.
Ліва колонка готова .
Тут нас традіціоннно підводить IE, у якого вертикальна відстань між елементами списку сильно більше, ніж треба. Це схоже на якісь зайві відступи, і лагодиться вже знайомим "holly hack'ом":
* Html #sections li a {height: 1%; }
колонка новин
Стилізація заголовка в новинах дуже нагадує головний заголовок. Сюди теж кладеться градієнтний фонова картинка, і тут теж треба прибирати вивалювання кордонів:
/ * Colors ****************** / #news h2 {background: url (news-head-bg.png) # DDE6FF left top repeat-x; } / * Misc ******************** / #news h2 {margin: 0; padding: 10px; }
Далі впишемо дати новин в початок абзаців і дамо їм відступи один від одного і від країв колонки:
#news h3 {float: left; margin: 0 5px; } #News p {margin: 20px 5px; }
Тут може виникнути питання, чому відступ по краях всередині колонки задається її внутрішніх елементів, а не самої колонці? По-перше, тому що одному з елементів - головному заголовку новин (<h2>) - цей відступ не потрібен. А по-друге, якщо колонці, якій задана ширина, проставити відступи, то вони її розширять, вона перестане уміщатися в залишені їй в розкладці 25%, і розкладка зламається.
Це, можна сказати, правило: треба всіма силами уникати призначення декоративних відступів і рамок головним блокам розкладки. Інакше замучитеся налагоджувати.
подивимося, як тепер виглядають новини .
У нас залишилися дві маленькі проблеми в цій колонці. Перша - згадаємо, що IE подвоює відступ для float'ов, тому дати новин злегка зміщені далі, ніж треба. Швидко чиним:
* Html #news h3 {margin-left: 2.5px; }
Інша проблема в тому, що дата першої новини прилипає до низу загального заголовка новин. Взагалі-то, так і повинно було статися, бо ні у заголовка, ні у дати немає вертикальних margin'ов. У інших дат такої проблеми немає, тому що перед кожною з них йде абзац (<p>), у якого і знизу, і зверху є margin в 20 пікселів.
Таким чином, найпростіше це виправити, давши заголовку теж відступ в 20 пікселів знизу. Тим більше, що цей відступ там і по дизайну потрібен. Виправимо відповідно попереднє правило для заголовка:
#news h2 {margin: 0 0 20px 0; padding: 10px; }
Після всього зробленого, думаю, правила для посилань "Детальніше ..." зі стрелочкам в пояснень не потребують ::
/ * Colors ****************** / #news a {color: # D00; } / * Misc ******************** / #news a {background: url (red-arrow.png) right center no-repeat; padding-right: 13px; } * Html #news a {padding-left: 1px; }
Невеликий хак для IE знадобився, бо той чомусь відмовився показувати стрілочки в другій посиланням.
Головна колонка
У головній колонці справ зовсім небагато. Стилі заголовка і абзаців прості:
/ * Colors ****************** / #main h2 {color: # 293499; } / * Misc ******************** / #main h2, #main p {margin-left: 15px; margin-right: 15px; } #Main h2 {margin-top: 20px; margin-bottom: 10px; }
Ну і ілюстрацію злегка облагородити: зрушити вліво і додати рамочку фірмового синього кольору. Щоб не робити єдиний стиль для будь-яких картинок в тексті (у них адже може бути різне призначення), я заздалегідь призначив цій картинці відмітна ознака - клас з назвою "picture". І в CSS ми будемо стилізувати саме його:
/ * Colors ****************** / #main .picture {border-color: # 45F; } / * Misc ******************** / #main .picture {float: left; padding: 5px; border-style: solid; border-width: 1px; margin: 0 15px 15px 0; }
усе
Ну ось, здається, готово :-).
Зауважу, що це, звичайно, навчальний приклад, а значить досить простий. Деякі речі зроблені менш гнучка, ніж могли б бути (наприклад логотип можна було зав'язувати на синій колір шапки). Тому не варто сприймати це як вибиту в граніті істину.
У будь-якому випадку, в результаті вийшла сторінка з чистим HTML, який зручно правити, і маленьким організованим стильовим файлом, який теж зручно правити. Щоб показати гнучкість всієї цієї системи, я в одній з наступних статей влаштую тотальний редизайн сторінки.
Ця стаття - частина знаходиться в процесі написання циклу під робочою назвою "Підручник". Я рекомендую ознайомитися і з іншими статтями, які можна знайти в категорії " підручник ", Де вони зараз зібрані в зворотному хронологічному порядку.
Звідки я знаю?