Очень часто новички, создавая своё первое детище используют обыденные и привычный шаблон, который состоит из шапки, навигационного меню, блока контента и футера (header-content-sidebar-footer). Вот как выглядит такой шаблон:
И всё вроде бы хорошо. Однако сам помню, как впервые столкнулся с проблемой, когда нужно было, чтобы сайдбар, имел такую же высоту как и блок контента, т.е. по рабоче-крестьянски это звучит так: «Дотянуть DIV до футера». Решение этой как оказалось простой задачи ниже:
[html title=»home.html»] <html><head>
<title>Sample Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="block">
<div id="header">Header</div>
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
[/html] [css title=»style.css»] body {
font:24px Tahoma;
text-align:center;
color: #fff;
}
#header {
height:80px;
border-bottom:1px #666 solid;
background-color:#ddd;
}
#block {
width:800px;
margin:0 auto;
overflow: hidden;
border:1px #666 solid;
}
#content {
float:left;
width:600px;
height:400px;
background-color:#eee;
}
#sidebar {
float:right;
width:200px;
margin-left:-150px;
margin-bottom: -2000em;
padding-bottom: 2000em;
border-left:1px #666 solid;
background-color:#aaa;
}
#footer {
height: 75px;
width: 800px;
border:1px #666 solid;
border-top:none;
clear: left;
margin: 0 auto;
background-color:#ddd;
}
[/css]
Вот впринципе и все. Скачать исходник можно здесь. Если есть какие-то вопросы, можете задавать их тут, либо поискать ответ на форуме вебмастеров.
Спасибо.Я как раз из новичков.Пока возьму в закладки,знаний маловато.
Пожалуйста. Подписывайтесь на RSS ленту, будет много интересного!
как задать в каждом пункте разный размер,цвет? как меню настроить ?
с шрифтом разобрался, вот с меню пока нет.
Что Вы имеете ввиду под «меню»?