Чудові діви, html і css

чудові діви

Спершу, всім привіт!

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

Як правило, всі завжди є і пошуки завершуються успіхом, але є одне але. В основному вся інформація на англійському. І навіть якщо знаєш мову нормально, все одно доводиться напружуватися. Навіть через таких простих речей. Але, все в наших руках!

Сьогодні ми розглянемо дві теми:

  1. Як розташувати кілька div'ов горизонтально так, щоб вони нікуди не спливали.
  2. Як зробити два горизонтально розташованих div'а однакової висоти.

Нічого нового я не скажу, це всього лише переклад цієї і ось цієї статей з woorkup.com. Приступимо.

Відразу скажу, що Антоніо Лупетті робить в загальному правильну справу - бореться з IE6. Так що обидва ради не для старого ослика. З іншого боку, навіть настільки неповоротка організація-замовник, на яку я працюю, і то ініціалізувати перехід. Правда, поки тільки ініціалізувати.

Так само додам від себе, що обидві ці проблеми можна вирішити з використанням списків

    , але це не зовсім елегантно. Кожен інструмент краще використовувати по його безпосереднім призначенням.

    Як розташувати кілька div'ов в горизонтальній площині

    Основна ідея цієї ради - використовувати div-обгортку (wrapper) і селектор CSS: first-child.

    Отже, дано: зробити на сторінці кілька блоків, рівномірно розподілених по горизонталі:

    Вихідний код такої розмітки гранично простий:

    Для того, щоб горизонтально розташувати блоки в оболонці, нам буде потрібно всього кілька рядків CSS коду. Перше, що спадає на думку: оголосити клас .section з властивостями width і margin-right, з потрібними нам значеннями. Але при цьому правий відступ крайнього правого елемента буде виступати за межі оболонки:

    Так як правий відступ крайнього правого елемента перевищує ширину оболонки, за правилами розмітки крайній правий блок «піде» вниз:

    Виникає питання: як прибрати «зайву» відступ у крайнього правого блоку без спеціального CSS класу, у якого властивість margin-right буде задано 0?

    Саме тут і варто згадати про селекторі: first-child, і інвертувати праві відступи на ліві. Таким чином, щоб у першого блоку відступ зліва був нульовим. Напрошується питання: навіщо инвертировать? Вся справа в тому, що в IE7 | 8 підтримка: first-child додана, а: last-child немає. Економлять?

    Отже, давайте подивимося на CSS код рішення. Спершу визначимо оболонку:

    Тепер оголосимо клас вмісту оболонки .section:

    У прикладі використовуються фіксовані значення властивостей width і margin-left. Ви на свій розсуд можете використовувати і процентні відносини.

    Тепер нам треба прибрати відступ зліва у першого блоку, робиться це так:

    Як зробити кілька div'ов однакової висоти

    У цьому туторіали Антоніо пропонує реалізацію фіктивних колонок, рівних по висоті, з використанням CSS властивостей position: absolute і border.

    Уявімо, що у нас завдання: треба реалізувати розмітку на дві колонки так, щоб висота бічної колонки дорівнювала висоті основний. Ілюстрація такого завдання нижче:

    Спочатку опишемо таку розмітку:

    Як і в попередньому прикладі, у нас є div-оболонка, в якій містяться «піддослідні» блоки.

    CSS-код оболонки виглядає ось так:

    Розглянемо тепер по-окремо кожну з колонок.

    Головна колонка

    Головна колонка представлена ​​id #maincontent. Вона буде містити основний вміст сторінки (наприклад, пости). Ілюстрація показує основну фішку цього туторіал:

    У колонки права межа задана дуже великий (border 200px). Ця межа і буде являти собою місце для допоміжної колонки (#sidebar). Для цього задана фіктивна заливка фону #sidebar, яка буде мати ту ж висоту, що і основна. Опис стилю головною колонки нижче:

    Допоміжна колонка

    Все, що нам залишилося, описати #sidebar:

    Ширина допоміжної колонки повинна бути такою ж, як ширина кордону основний колонки (200px), а лівий відступ margin-left має дорівнювати ширині вмісту #maincontent.

    Ось що виходить в результаті:

    Недоліки цього способу

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

    Ну і, як останній приманки (або десерту): приз!

    Музикант, який одного разу прокинувся програмістом ;-) Фронт- і бек-енд розробник, фахівець широкого профілю. Твіттер: @dkoprov.