Макет на три колонки (продолжение)
Чтобы поднять блок "menu" придется вставить нашу конструкцию еще два блока ("коробки").
#wrapper_right{
background: #e3e8cc url(image/backright.gif) repeat-y right
}
Фоновое изображение для правой колонки будет размножено до "подвала", поэтому закрывающий </div> следует поставить после блока "clearing".
Создав блок "wrapper_right" мы не только добавили цвет для правой колонки, но и подняли левую колонку "menu", которая пока не закрашена полностью на всю длину.
background: url(image/back.gif) repeat-y left;
}
Вот, что получается - смотрим результат и знакомимся с кодом.
<html><head>
<style type="text/css">
html, body, div, p, ul, li, h1, h2, h3 {
margin: 0;
padding: 0;
border: 0
}
#header, #menu, #content h3, #content h2 {
text-align: center
}
#header {
font-size: 250%;
font-weight: bold;
color: #fff;
background: #369;
padding: 10px;
}
#wrapper_right{
background: #e3e8cc url(ims/backright.gif) repeat-y right
}
#wrapper_left{
background: url(ims/back.gif) repeat-y left;
}
#container {
width: 100%;
margin-left: -160px;
float: right;
}
#content {
margin-left: 20%;
font-size: 90%;
text-indent: 20px;
text-align: justify;
padding: 20px 0px;
}
#main {
margin-right: 150px;
padding: 20px 10px
}
#right {
float: right;
width: 150px;
margin-top: 20px;
background: #f9efbb
}
#menu {
width: 160px;
float: left;
background: #f4dac0;
font-size: 90%;
}
li {
list-style-type: none;
list-style-position: outside
}
a {
text-decoration: none
}
a:hover {
color: red
}
.clearing {
clear: both;
}
#footer {
background: #369;
font-size: 70%;
text-align: right;
color: #fff;
padding: 10px;
clear: both;
}
</style>
</head>
<body>
<div id="header">Шапка</div>
<div id="wrapper_right">
<div id="wrapper_left">
<div id="container">
<div id ="content">
<div id="right">
<h2>news</h2>
<ul><li>news 1
<li>news 2
<li>news 3</ul>
</div>
<div id=main>
<h3>Задача 4:</h3>
<p> Создать "резиновый" макет на три колонки с "шапкой" и "подвалом". Область основного содержимого в центре,колонка "menu" - слева. Справой стороны страницы помещаем блок новостей "news".</p>
</div>
</div>
</div>
<div id="menu">
<ul><li><a href="#.html">ссылка 1</a></li>
<li><a href="#.html">ссылка 2</a></li></ul>
Здесь можно поместить анонсы новостей или рекламу
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer">© </div>
</body>
</html>
Примечание: Если боковое меню содержит больше определенного количества пунктов, то фоновое изображение не множится до конца соответствующего блока. Ошибка наблюдается лишь в Internet Explorer 6. Лечится просто. В стиль для "wrapper_left" нужно добавить height: 100%.
