Возникла проблема при создании макета страницы с резиновым центром и фиксированными боковыми полями. В центральном блоке- фотографии с подписями, т.е.
вложенные div'ы.
Верстать надо с помощью CSS. Использовать таблицы нельзя. Резиновость обязательна. Оптимизация под ИЕ 6.0 и firefox.
Так вот: у меня есть 2 варианта решения этой задачи. И в каждом - пока нерешенная проблема.
Вариант 1.
Использование отрицательных margin'ов. В принципе мой код почти повторяет описанный тут:
http://www.webmascon.com/topics/coding/43a.asp.
Кроме того, внесено ограничение на минимальную ширину, чтобы в ИЕ правое поле не убегало вниз при сильном уменьшении ширины окна.
background-color:#FFFFFF;
width: expression((body.clientWidth <= 600) ? "600px" : "100%");
width: expression((body.clientWidth <= 600) ? "600px" : "100%");
background-color:#F4C14D;
HTML:
<h1>МЕНЮ</h1>
<li>ссылка</li>
<li>ссылка</li>
<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>
<h1>НОВОСТИ</h1>
<p>новости новости нововсти новости новости</p>
Итак, проблема. В ИЕ между левым блоком (меню) и блоком контента возникает отступ в 3 пикселя. В firefox все в порядке.
Пробуем убрать стиль main {height:100%;}.
Если вместо div'ов в main поместить текст - все в порядке. И в ИЕ и в firefox. Но если в main - div'ы - то в ИЕ main
расползается на правый блок, который, в свою очередь, смещается вниз.
Вариант 2.
Плавающие блоки.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
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.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;
<div class="left"> левая часть
<div class="right">правая часть
<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>
Когда заканчиваются боковые столбцы в firefox содержимое центрального обтекает их снизу. Что крайне нежелательно.
В ИЕ все выглядит так, как надо. Т.е. содержимое content в столбик продолжается до низа.
Введение margin-left и margin-right для content решает проблему в firefox. Однако в ИЕ отступы отсчитываются от боковых полей.
Не важно какой из способов в конечном итоге использовать. Главное, вылечить хоть какой...
Я вне сомнения еще не сильно разбираюсь во всех этих перипетиях А изумительное включение доктайпа дело не решает?
неа, он включен CSS стили..
ну в принципе уже вопрос решен. Давайте, обратим внимание, прошу прекрасное прощение за беспокойство)