Блочные HTML CSS шаблоны макеты каркасы
26-03-2011, 22:33. Разместил: Admin
40 готовых 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 шаблоны макеты каркасы
Вернуться назад