Гибрид таблица + div

Очень много сейчас задают вопросов. А как у сайта, сделанного на дивах выровнять столбики по высоте, а как сделать три столбика под контент и т.д. Вопрос такой - а зачем мучиться и изобретать велосипед, если можно сделать гибрид таблица + div, или div + таблица не важно. Зачем издеваться над самим собой придумывая различные скрипты и т.д.

Если можно просто взять и запихать таблицу в div и всё. Не надо будет ни чего выравнивать. С другой стороны можно задать любую высоту ширину, количество колонок и т.д. Причём всё это легко сможет сделать любой начинающий, а не только умный дядька с сединой в волосах.

И в тоже самое время вы можете задать многие параметры и диву в который спрятана таблица. То есть вы сможете например сделать два, три фона наложенных друг на друга не прибегая ни к каким тегам. А если вдруг захочется поиздеваться над сайтом - дак можно div в div упаковать и все дела. Или div в самой таблице уже открыть. Просто надо быть проще и не изобретать давно изобретённого :)

Теперь посмотрите внимательно на мой сайт. Сами знаете, что ему уже много лет. А ведь это чистый гибрид :) И нормально работает, не тормозит, не глючит. Просто есть учителя, которые уверяют с пеной у рта, что мешать таблицы с дивами нельзя и всё такое. Откуда люди всё это выдумывают, без понятия. Ну ладно, немного поругался, теперь к делу.


На самом деле сделать сайт на одних дивах очень просто. Всё легко делается и выравнивается. Но это не для начинающего. А вот для начинающего проще сделать гибрид, или вообще чисто на одних таблицах. Но чисто на одних таблицах есть небольшой минус - не такие широкие возможности. Например вы не сможете сделать, что бы шапка у сайта висела на месте и не шевелилась, при прокрутке сайта и т.д. С дивами конечно больше возможностей. Но совершенно не обязательно лепить на дивах весь сайт.

Давайте просто подумаем, как сделать неподвижную шапку у сайта и несколько колонок, используя и дивы и таблицы. Точнее думать будете вы, а я рассказывать :)

Помните на предыдущих страничках я рассказывал как сделать сайт на дивах? Если нет то почитайте, что бы не запутаться, это здесь - PHP, дивы, <div>, подробности. Возьмём от туда страничку на дивах, вот она:

<div class="container">/* Открыл. */
<div class="header">/* Шапка. */
</div>
<div class="sidebar1">/* Меню. */
</div>
<div class="content">/* Контент. */
</div>
<div class="footer">/* Подвал. */
</div>
</div>/* Закрыл. */


Сейчас мы вставим в шапку таблицу в несколько колонок под рекламу и заставим стоять её на месте при прокрутке сайта.

<div class="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
первая колонка
</td>
<td>
вторая колонка
</td>
</tr>
</table>
</div>

Как видите я вставил таблицу с двумя колонками. Можете вставлять любую таблицу. Тут всё чисто на ваше усмотрение. Видите, там в самом начале прописаны нолики - border="0" cellspacing="0" cellpadding="0". Я убрал толщину, поля, интервал - это сделает таблицу полностью невидимой. Вот и всё и не надо ни чего выравнивать и париться.


А вот теперь воспользуемся возможностями дива и заставим замереть шапку на месте. Диву с шапкой сайта я присвоил класс - <div class="header">. Теперь просто пропишите свойства в таблице CSS:

.header {
position: fixed;
top: 0px;
z-index: 1;
}

Всё, шапка замерла на месте. Теперь она будет постоянно висеть вверху сайта. Если хотите, что бы она перемещалась при прокрутке сайта как обычно, то просто уберите - position: fixed; Или замените на - position: absolute;


И попутно разберём тег - z-index: 1; Кто он такой и почему равен единице. Подробнее остановлюсь позже, а сейчас основное. Этот тег задаёт приоритет для слоёв. Это примерно как в фотошопе. Чем выше значение, тем выше будет отображаться слой. Под слоями я имею в виду дивы. То есть при помощи дивов можно на одно место наложить хоть сотню слоёв. Это очень удобно при работе над дизайном сайта. Но вот когда вешаешь рекламу, или устанавливаешь форум, могут начаться небольшие непонятки. Так как у них там свои приоритеты. Поэтому советую ставить в районе 100 - 500. Что бы и самим не запутаться и все остальные приоритеты переплюнуть.

Для примера ткну пальцем в свой сайт. Когда я поставил рекламу от гугла. То их рекламный блок разместился самым наглым образом прямо на шапке сайта. Хотя я хотел часть рекламы подсунуть под шапку. Честно говоря лень было переделывать дизайн, а другие рекламные блоки вообще не подходили, вот и пришлось выпендриваться :) Я просто засунул шапку сайта в див и дал этому диву приоритет - 3. И всё - часть рекламы ушла под шапку.

Таким образом можно и рекламу под дизайн сайта сделать. Например прикрыв часть рекламы полупрозрачным фоном, под дизайн сайта. Но именно часть. Если закроете всю, то человек кликнуть по ней не сможет. Но это вам вряд ли понадобится. В основном вся реклама хорошо вписывается в дизайн. Хотя например у гугля нельзя сделать прозрачный фон. И иногда это прямо выбешивает, потому что ломает весь дизайн, который месяцами вытачиваешь.


Вот и всё. Это просто пара примеров, что можно сделать. На самом деле возможностей тут как грязи. Надо только немного подумать и всё :) Я кстати до сих пор пользуюсь гибридной схемой. Так как тут одни плюсы.

Во первых убираются все минусы от использования чисто дивов. То есть колонки не наезжают друг на друга. Можно задать фиксированный размер одной колонки и в процентах других колонок, без риска различных наездов. Высота не прыгает. Не надо всё до миллиметров оттачивать и подгонять под большие и маленькие разрешения экранов мониторов. Можно конечно сделать и фиксированный размер у сайта. Но как говорится на вкус и цвет товарищей нет :)

И в тоже самое время приобретаются все плюсы дивов. То есть наложение слоёв, расположение блоков и т.д. Тут всего и очень много.

Просто моё мнение такое - не надо изобретать то, что уже давно ездит. Но решать конечно же вам :)

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP