Блочные HTML CSS шаблоны макеты каркасы

Самое главное при вёрстке сайта это создать или найти каркас своего будущего сайта, куда будет вложено уже всё последующее заполнение. Каркас должен быть кроссбраузерным(одинаково выглядеть во всех браузерах), лёгким, простым.
Опытному верстальщику не составит труда сверстать такой каркас, а вот у начинающих возникают серьёзные проблемы и куча вопросов типа - вроде делаю всё правильно, а не получается как хочется, то там что-то вылезет, то тут не влезет. Давным давно мне попался сайт с такими шаблонами каркасами и я решил, что нужно всё-таки оформить и выложить эти шаблоны, так как мне когда-то очень не хватало вот таких каркасов.
Каждый макет шаблон каркас может представлять собой сайт с пятью основными разделами: шапка, содержание(контент), навигация, другие вещи(описание) и нижний колонтитул(подвал).
HTML структура всех шаблонов одинакова:
<div id="container">
<div id="header">ШАПКА</div>
<div id="wrapper">
<div id="content">КОНТЕНТ</div>
</div>
<div id="navigation">НАВИГАЦИЯ</div>
<div id="extra">ОПИСАНИЕ</div>
<div id="footer">ПОДВАЛ</div>
</div>
Шаблоны выполнены с применением техники отрицательных отступов. Это очень интересная и универсальная техника и у неё есть свои правила, но автор этих шаблонов почему то эти правила не учёл. Поэтому я беру на себя смелость внести некоторые поправки и пояснения.
Правила отрицательных отступов очень просты - если блоку задаётся свойство float:left и отрицательный отступ слева margin-left то браузеры это нормально понимают, а если блоку задаётся свойство float:right и отрицательный отступ справа margin-right то браузеры норовят прибавить к ширине страницы величину правого отрицательного отступа, в результате чего появляется горизонтальная полоса прокрутки и пустое пространство справа равное правому отрицательному отступу.
Что бы небыло никаких полос прокрутки и ненужных пустых мест родительскому блоку обязательно!!! нужно добавить свойство overflow:hidden; что бы отсечь все ненужные нам отступы.
Поэтому при использовании этих каркасов главному контейнеру div id="container" добавте свойство overflow:hidden; и будет всё в порядке.
Шаблоны классные, корректно работают во всех браузерах, в каждом примере шаблона каркаса есть ссылка для скачивания просматриваемого шаблона с сайта автора. Всё, естественно, валидно, для проверки валидации я добавил кнопочки. В каждом блоке внизу есть ссылка опция, позволяющая добавить заполнение блока, очень удобно чтобы протестировать типа полностью заполненную контентом страницу.
Страница просмотра Смотреть примеры Блочные HTML CSS шаблоны макеты каркасы
Понравилась новость Блочные HTML CSS шаблоны макеты каркасы на MegaWeb.su? Сохрани в закладках или распечатай!
Информация

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Блочные HTML CSS шаблоны макеты каркасы из категории Основы / Шаблоны
- Меню навигации ⋙ Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации
- Меню навигации ⋙ Одна кнопка вертикальное меню аккордеон CSS + javascript
- Меню навигации ⋙ Стильное горизонтальное меню навигации с красивым эффектом перекатывания на jQuery
- Основы / CSS ⋙ Мини Курс Основы CSS Часть 1
- Основы / CSS ⋙ Мини Курс Основы CSS Часть 2
- Основы / HTML ⋙ Мини Курс Основы HTML Часть 1
- Советы ⋙ Блок Предупреждение для Internet Explorer 6
- Основы / XHTML ⋙ XHTML основы Основное различие между HTML и XHTML
- Видеоуроки ⋙ Блочная вёрстка PSD шаблона от и до Видео Курс
- Видеоуроки ⋙ Верстка сайта Основы блочной вёрстки
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.