Помогите разобраться со слоями в CSS - Дизайн

QLe[X] · 27.01.2006, 10:34

Есть следующий код:

Код:

<body>
<div id="main">
   <div id="topmenu"> 
      <p><font size="3">ГЛАВНАЯ | БИБЛИОТЕКА | МАГАЗИН</font><br>
      <font size="2">новости / о сайте / ссылки / гостевая книга</font></p>
   </div>
   <div id="header"> 
      <p>Здесь будет меню</p>
   </div>
   <div id="content"> 
      <p>По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.</p>
   </div>
   <div id="footer">
      <p><a href="http://yandex.ru/vesna.html">http://yandex.ru/vesna.html</a>.</p>
   </div> 
   <div id="leftside"></div>
   <div id="rightside"></div>		 
</div>
</body>
</html>

есть css-файл, где описаны блоки:

Код:

body {
margin: 0px;
padding: 0px;
background-image: url('img/back.gif');
}

#leftside {
position: absolute;
top: 0px;
left: -50px;
width: 50px;
height: 100%;
background-image: url('img/back2.gif');
}

#rightside {
position: absolute;
top: 0px;
left: 100%;
width: 50px;
height: 100%;
background-image: url('img/back3.gif');
}

#main {
position: relative;
width: 60%;
left: 20%;
margin: 0px;
padding: 0px;
}

#topmenu {
width: 96%;
margin: 1%;
padding: 1%;
background-color: #DDDDDD;
}

#header {
width: 98%;
margin: 0px;
padding: 1%;
background-color: orange;
}

#content {
width: 98%;
margin: 0px;
padding: 1%;
background-color: #f0f0f0;
}

#footer {
width: 98%;
margin: 0px;
padding: 1%;
background-color: orange;
}

#content p, #leftmenu p, #rightmenu p {
margin-top: 0px;
}

#header p, #footer p {
margin-top: 0px;
margin-bottom: 0px;
}

так вот, в чем проблема:
блоки leftside и rightside не хотят делаться высотой в 100%.
я только начал разбираться с css-версткой, поэтому помогите...

результат можно посмотреть здесь:
http://rubooks.jino-net.ru/test/

Raven B. · 28.01.2006, 13:44

И не захотят.
процентное указание ширины или высоты возможно только если в стиле папы блока указана точная ширина или высота в ПИКСЕЛЯХ.
Походу, растягивание по высоте блоков на 100% экрана - занятие при CSS верстке муторное и неблагодарное.
Забудь о нем. Хорошо получится только при табличной верстке

А центрирование по высоте в CSS верстке это вообще легенда.
Его роль "исполняет" line-height как правило. Но применим он как минимум не всегда. Так что появился целый разряд извращений на эту тему.

28.01.2006, 13:44	# 2
Raven B. Member Регистрация: 12.07.2004 Адрес: Очень странное место. Сообщения: 328	И не захотят. процентное указание ширины или высоты возможно только если в стиле папы блока указана точная ширина или высота в ПИКСЕЛЯХ. Походу, растягивание по высоте блоков на 100% экрана - занятие при CSS верстке муторное и неблагодарное. Забудь о нем. Хорошо получится только при табличной верстке А центрирование по высоте в CSS верстке это вообще легенда. Его роль "исполняет" line-height как правило. Но применим он как минимум не всегда. Так что появился целый разряд извращений на эту тему.