ВЕСТКОМ сайтів я займаюся досить давно (звичайно це як подивитися), старички-професіонали скоріше за все скажуть що 5 років - це не термін. Я їх оскаржувати зовсім не хочу, та й користі, все те що вони 5 років тому верстали в таблицях ще до сих пір не переверстати. Таблиці - для табличних даних, діви - для всіх інших! Так я вирішив 4 роки тому і з тих пір трошки набив руку верстати сайти зовсім без хаков.
IE6 - найголовніший валідатор правильності вашої верстки, він дуже чутливий навіть до найменших неточностей в стилях, не кажучи вже про незакритих тегах, які все сучасні браузери просто-напросто ігнорують. Якщо зверстаний вами сайт добре відображається і не розповзається в IE-6, то в інших браузерах він темболее буде відображатися без проблем.
Ну, що то я трохи відволікся від сьогоднішньої теми (прошу вас вибачити за такий довгий передмову), пора мені викладати всі свої козирні карти і навчити вас, як верстати без використання хаков.
Основні правила верстки дивами
На відміну від табличній - застарілої верстки, Дівова верстка (коли таблиці використовуються лише за своїм призначенням: для відображення табличних текстових даних, а не як каркас для веб-сторінок) надає верстальщику набагато більше можливостей. Особливо це стосується порядку завантаження контенту.
Створюючи плаваючий елемент (float: left або float: right) ніколи не призначайте йому Маргинем і паддінгі (margin, padding), особливо з протилежною обтіканню боку, інакше проблемми з кросбраузерністю, та й з простим відображенням будуть у вас вже в кишені.
Ось вам приклад неправильної верстки:
Зазвичай саме так початківці верстальники намагаються створити головний макет сайту (середній блок я упустив, щоб вам було легше зрозуміти). Тут присутній ціла купа помилок: в різних браузерах Маргинем і паддінгі плаваючих елементів або складаються або віднімаються одна з одної, тому спочатку використовуючи такий варіант, пожже вам доведеться дописувати в стилі цілу купу різних CSS хаков (окремих під кожен браузер).
А ось правильна верстка:
# GOOD-example // ширина може бути будь-яким числом в пікселях, відсотках або поинтах (pt)
.Left_float
.Right_float // замість Маргинем в цих плаваючих елементах можна призначити паддінгі за таким же зразком.
Найважливіше: поєднуйте в плаваючих елементах обидва цих властивості одночасно. І НІКОЛИ не призначайте паддінг або Маргинем в ту сторону куди елемент пливе!
Створюйте плаваючі (floated) html елементи тільки в блоках з фіксованою (неважливо в чому: пікселях або відсотках) шириною, тоді додавши батьківського блоку властивість: overflow-hidden ви автоматично очистіть потік і уникнете створення додаткових очищувальних його (зазвичай це додатковий див, або навіть тег розриву рядка з класом clearfix) елементів.
А ось один із прикладів досить складного каркаса шаблону цілого сайту, який я дуже часто застосовую.
#Wrapper // Наступним буде плаваючий елемент, тому потік чистимо завчасно. А я більше схиляюся до того, щоб ще спочатку створити відступи з країв: width: 98%; margin: 0 auto;
# MY-example
#MAIN // ширину цього блоку не задаємо, звичайно якщо у вас шаблон гумовий, а якщо фіксованої ширини, то її краще позначити.
.Left_float_sidebar
.Left_float_sidebar2.
І це весь код! А вже всередині цих блоків, призначайте будь-яким своїм елементам які завгодно паддінгі і Маргинем. У будь-якому випадку веб-сайт не розповзеться. Звичайно якщо у вас з математикою все гаразд і ви здатні ділити, множити, віднімати і додавати без грубих помилок. В цьому випадку мої поради по Дівова верстці вам на превеликий жаль не допоможуть.