| |
|
|
| | Всем привет. Прошу сильно не пинать, если вопрос Вам покажется глупым, я всего 4й день изучаю CSS :-)
В общем, вопрос такой, вот код страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>trial</title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>
<body>
<div id="top"></div>
<div id="menubar"></div>
<div id="navi_bar"><a href="#" class="friends">Friends</a><a href="#" class="wall">Wall</a><a href="#" class="bookmarks">Bookmarks</a><a href="#" class="settings">Settings</a></div>
<div id="block"></div>
</div>
</body>
</html>
|
вот описание в css:
@charset "utf-8";
/* CSS Document */
body
{
padding:0px;
width:800px;
margin:0;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:#dbf1da
}
#block /*нужно настроить*/
{
position:relative;
background-color:#c2eac0;
width:278px;
float:right;
margin-top:0px;
margin-bottom:30px;
height:100%;
padding:10px;
text-align:justify;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
#top
{
height:149px;
width:800px;
background-image:url(images/top.jpg)
}
#menubar
{
height:39px;
width:800px;
background-image:url(images/menu_bar.png)
}
#navi_bar
{
height:30px;
width:800px;
margin-top:0px;
background-image:url(images/navi_bar.png)
}
div#navi_bar > a:link, a:visited
{
color:#FFF;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:12px;
}
div#navi_bar > a:hover
{
color:#360;
text-decoration:none;
font-size:12px
}
.friends
{
margin-left:0px;
position: relative; top: 6px;
padding-left:40px;
padding-right:33px;
padding-bottom:10px;
padding-top:6px;
}
.wall
{
margin-left:0px;
position: relative; top: 6px;
padding-left:48px;
padding-right:48px;
padding-bottom:10px;
padding-top:6px;
}
.bookmarks
{
margin-left:0px;
position: relative; top: 6px;
padding-left:30px;
padding-right:18px;
padding-bottom:10px;
padding-top:6px;
}
.settings
{
margin-left:0px;
position: relative; top: 6px;
padding-left:40px;
padding-right:37px;
padding-bottom:10px;
padding-top:6px;
}
#footer
{
width:800px;
height:30px;
margin-left:auto;
margin-right:auto;
margin-bottom:1000px;
background-color:#063;
position:relative;
top:0px;
}
|
вот так страница выглядит сейчас:
http://s39.radikal.ru/i086/0905/87/7aae67217461.jpg
Требуется следующее: тот прямоугольник, на котором стоит курсор должен быть растянут вниз почти на всю высоту экрана, при этом не доходя до низа на 30 пикселов. Главное, чтобы так было на экране с любым разрешением. И второе он должет продолжать растягиваться в высоту при добавлении в него элементов, ну, например, картинок или ссылок.
Как это можно это реализовать только средствами css? :unsure:
З.Ы. То, что нужно настроить пометил комментарием в коде :) | |
| |
|
