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

Автор: Admin    Категория: Основы / Шаблоны    Теги:  HTML, CSS    Дата: 26-03-2011, 22:33
Блочные HTML CSS шаблоны макеты каркасы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 шаблоны макеты каркасы
Версия для печати
  • 100
     Просмотров: 17 521      Комментариев: 1   

Понравилась новость Блочные HTML CSS шаблоны макеты каркасы на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

№ 1 Автор: nounlimited 21 апреля 2011 14:23

 Вот такой я - nounlimited

nounlimited
Гости
комментариев
публикаций

Статус:
Отлично...это то что я искал, спасибо автору статьи!!!! smile

  • Нравится
  • 0
    

Информация

Внимание!

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

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус