Re[4]: Форма на сайте.
Господа, вопрос по верстке блоками (css) возможно, вы сможете объяснить
мне, в чем я
впринципе не права. Цель редизайна - без изменения графического оформления
уйти от верстки таблицами.
Конкретная задача - я пытаюсь исполнить (для начала) модульную сетку,
используя div`ы
Проблема - чего-то впринципе не понимаю.
Итак, требуется исполнить традиционную модульную сетку для информационного
сайта. В аналогах таблиц:
- первая строка - баннер (размеры заданные, высота - фиксированная)
- вторая строка - логотип слева, анонс справа, растяжка по горизонтали -
100%
- третья строка - центральный блок. В нем - три колонки.
- Левая - базовое меню + новостийный блок (фиксированная по ширине)
- Центральная - контент. ширина - 100%
- Правая - всяческие анонсы. Ширина фиксирована
- четвертая строка - завершение страницы.
Попытка реализовать стили:
body {background-color:#ffffff; margin: 0px 0px 0px 0px; padding:0 0 0 0;
font-family: Verdana, Geneva,
Arial, Helvetica, sans-serif;}
#mainframe {left:0px; top:0px; margin: 0px 0px 0px 0px; padding:0;
width:100%; height:100%;}
#topbanner {background-color:#ffffff; border:1px solid #000000;
position:absolute; left:0px; top:0px;
width:100%; height:100px;}
#top {background-color:#00ff00; position:absolute; left:0px; top:104px;
width:100%; height:100px;}
#center {background-color:#ff0000; position:absolute; left:0px; top:208px;
margin:0px; width:100%;}
#left {background-color:#0000ff; float:left; left:0px;top:208px;
width:148px;}
#work {background-color:#cf00cf; float:left; position:absolute;
left:150px; width:100%;}
#right {background-color:#ffd700; float:right; top:208px; width:180px;}
#bottom{background-color:#003366; width:100%; left:0px;}
Сама разметка по блокам:
<body>
<div id="mainframe">
<!-- Top Banner -->
<div id="topbanner">This is banner</div>
<!-- End Top Banner -->
<div id="top">This is top</div>
<div id="center">
<!-- Menu, News -->
<div id="left"><p style="color:#ffffff;">left left left</p></div>
<!-- End Menu, News -->
<!-- Start Work Center_Content -->
<div id="work">
<p style="color:#00ffff;">Anonce articles, catalogue, forum</p>
<p>Здесь статьи в не менее сложно форматируемых блоках, а так же
перечисление новых статей, новых записей в каталоге, новых тем в
форуме!</p></div>
<!-- End Work Center_Content -->
<!-- Right Anounce, Adver... -->
<div id="right">Anounce, Adver</div>
<!-- End Right Anounce, Adver... -->
</div>
<!-- Start Bottom -->
<div id="bottom"><p style="color:#ffffff">This Bottom</p></div>
<!-- End Bottom -->
</div>
</body>
Похоже, что-то впринципе я не понимаю. Посоветуйте pls, что!
