Возникла проблема при создании макета страницы с резиновым центром и фиксированными боковыми полями. В центральном блоке- фотографии с подписями, т.е.
вложенные div'ы.
Верстать надо с помощью CSS. Использовать таблицы нельзя. Резиновость обязательна. Оптимизация под ИЕ 6.0 и firefox.
Так вот: у меня есть 2 варианта решения этой задачи. И в каждом - пока нерешенная проблема.
Вариант 1. Использование отрицательных margin'ов. В принципе мой код почти повторяет описанный тут:
http://www.webmascon.com/topics/coding/43a.asp.
Кроме того, внесено ограничение на минимальную ширину, чтобы в ИЕ правое поле не убегало вниз при сильном уменьшении ширины окна.
CSS:
| Код |
body {
background-color:#FFFFFF;
margin:0px;
padding:0px;
}
div.header {
background-image:url(head.jpg);
height:100px;
min-width: 800px;
width: expression((body.clientWidth <= 600) ? "600px" : "100%");
}
div.outer_wrapper {
height:100%;
min-width: 800px;
width: expression((body.clientWidth <= 600) ? "600px" : "100%");
}
div.wrapper {
width:100%;
}
div.container {
width:100%;
float: left;
margin-right: -200px;
}
div.content {
margin-right: 200px;
}
div.main {
position:relative;
margin-left: 200px;
background-color:#F4C14D;
padding-right: 30px;
height:100%;
}
div.left {
width: 200px;
float: left;
background-image:url(left.jpg);
background-repeat:no-repeat;
height:703px;
}
div.sidebar {
width: 200px;
float: right;
}
div.footer {
background: #d7dabd;
}
div.clearing {
clear: both;
}
div.fotos {
float:left;
width:140px;
height:160px;
clear:inherit;
text-align:center;
}
|
HTML:
| Код |
<body>
<div class="header">header</div>
<div class="outer_wrapper">
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left">
<h1>МЕНЮ</h1>
<ul>
<li>ссылка</li>
<li>ссылка</li>
</ul>
</div>
<div class="main">
<div class="fotos"><img src="images/1.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/2.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/3.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/4.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/5.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/6.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/7.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/8.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/9.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/11.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/12.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/31.jpg" align="bottom" /><br />Текст</div>
<div class="clearing"> </div>
</div>
</div>
</div>
<div class="sidebar">
<h1>НОВОСТИ</h1>
<p>новости новости нововсти новости новости</p>
</div>
<div class="clearing"> </div>
</div>
</div>
<div class="footer">footer</div>
</body>
|
Итак, проблема. В ИЕ между левым блоком (меню) и блоком контента возникает отступ в 3 пикселя. В firefox все в порядке.
Пробуем убрать стиль main {height:100%;}.
Если вместо div'ов в main поместить текст - все в порядке. И в ИЕ и в firefox. Но если в main - div'ы - то в ИЕ main
расползается на правый блок, который, в свою очередь, смещается вниз.
Вариант 2.Плавающие блоки.
Код:
| Код |
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>title</title>
<style>
body { background:#CCCCCC;}
div.top { width:100%; height:100px; background:#0000ff;}
div.main { width:100%; height:100%; background: #FFFFFF;}
div.left { width:200px; height:100%; background:#FF0000; float:left;}
div.content { width:auto; height:100%; background:#F4C14D; clear:none; }
div.content {margin-left:200px; margin-right:200px;}
*div.content { float:left;}
div.inner { width:100%; font-size:1px;}
div.right { width:200px; height:100%; background:#990000; float:right;}
div.bottom { width:100%; height:100px; background:#0000CC; clear:both;}
div.fotos {float:left; width:140px; height:160px; clear:inherit; text-align:center; margin-right:15px; margin-left:15px;
}
.clearing {
clear: both;
}
</style>
</head>
<body>
<div class="top"> top </div>
<div class="left"> левая часть
</div>
<div class="right">правая часть
</div>
<div class="content">
<div class="inner"> </div>
<div class="fotos"><img src="images/pila.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/1.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/2.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/3.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/4.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/5.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/6.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/7.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/8.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/9.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/11.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/12.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/13.jpg" align="bottom" /><br />Текст</div>
<div class="fotos"><img src="images/14.jpg" align="bottom" /><br />Текст</div>
<div class="clearing"> </div>
</div>
</div>
<div class="bottom"> bottom </div>
</body>
|
Когда заканчиваются боковые столбцы в firefox содержимое центрального обтекает их снизу. Что крайне нежелательно.
В ИЕ все выглядит так, как надо. Т.е. содержимое content в столбик продолжается до низа.
Введение margin-left и margin-right для content решает проблему в firefox. Однако в ИЕ отступы отсчитываются от боковых полей.
Не важно какой из способов в конечном итоге использовать. Главное, вылечить хоть какой...
Заранее большое спасибо.
CSS, резиновая верстка 
Загрузка ...
