Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Css. Резиновая верстка

Обсуждение темы Css. Резиновая верстка в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Возникла проблема при создании макета страницы с резиновым центром и фиксированными боковыми полями. В центральном блоке- фотографии с подписями, т.е. вложенные div'ы. Верстать ...


Закрытая тема
 
Опции темы
Старый 05.08.2006, 13:26   #1
Возникла проблема при создании макета страницы с резиновым центром и фиксированными боковыми полями. В центральном блоке- фотографии с подписями, т.е.
вложенные 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> [*]ссылка
[*]ссылка
[/list] </div>

<div class="main">
<div class="fotos">[img]images/1.jpg[/img]
Текст</div>
<div class="fotos">[img]images/2.jpg[/img]
Текст</div>
<div class="fotos">[img]images/3.jpg[/img]
Текст</div>
<div class="fotos">[img]images/4.jpg[/img]
Текст</div>
<div class="fotos">[img]images/5.jpg[/img]
Текст</div>
<div class="fotos">[img]images/6.jpg[/img]
Текст</div>
<div class="fotos">[img]images/7.jpg[/img]
Текст</div>
<div class="fotos">[img]images/8.jpg[/img]
Текст</div>
<div class="fotos">[img]images/9.jpg[/img]
Текст</div>
<div class="fotos">[img]images/11.jpg[/img]
Текст</div>
<div class="fotos">[img]images/12.jpg[/img]
Текст</div>
<div class="fotos">[img]images/31.jpg[/img]
Текст</div>

<div class="clearing"></div>

</div>


</div>
</div>

<div class="sidebar">
<h1>НОВОСТИ</h1>


новости новости нововсти новости новости</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]images/pila.jpg[/img]
Текст</div>
<div class="fotos">[img]images/1.jpg[/img]
Текст</div>
<div class="fotos">[img]images/2.jpg[/img]
Текст</div>
<div class="fotos">[img]images/3.jpg[/img]
Текст</div>
<div class="fotos">[img]images/4.jpg[/img]
Текст</div>
<div class="fotos">[img]images/5.jpg[/img]
Текст</div>
<div class="fotos">[img]images/6.jpg[/img]
Текст</div>
<div class="fotos">[img]images/7.jpg[/img]
Текст</div>
<div class="fotos">[img]images/8.jpg[/img]
Текст</div>
<div class="fotos">[img]images/9.jpg[/img]
Текст</div>
<div class="fotos">[img]images/11.jpg[/img]
Текст</div>
<div class="fotos">[img]images/12.jpg[/img]
Текст</div>
<div class="fotos">[img]images/13.jpg[/img]
Текст</div>
<div class="fotos">[img]images/14.jpg[/img]
Текст</div>

<div class="clearing"></div>

</div>

</div>

<div class="bottom"> bottom </div>

</body>



Когда заканчиваются боковые столбцы в firefox содержимое центрального обтекает их снизу. Что крайне нежелательно.
В ИЕ все выглядит так, как надо. Т.е. содержимое content в столбик продолжается до низа.
Введение margin-left и margin-right для content решает проблему в firefox. Однако в ИЕ отступы отсчитываются от боковых полей.

Не важно какой из способов в конечном итоге использовать. Главное, вылечить хоть какой...
Заранее большое спасибо.
 
Старый 05.08.2006, 13:26
Ссылки
Старый 06.08.2006, 09:46   #2
Я конечно еще не сильно разбираюсь во всех этих перипетиях А включение доктайпа дело не решает?
 
Старый 06.08.2006, 15:46   #3
неа, он включен..
ну в принципе уже вопрос решен. Прошу прощение за беспокойство)
 
Старый 06.08.2006, 15:46
Объявление
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS -> Резиновая ячейка -> Плавающие объекты -> Позиционирование = ??? dimka_sh HTML, CSS, JavaScript 1 20.07.2008 23:52
Резиновая вёрстка по высоте... Денисон HTML, CSS, JavaScript 4 07.07.2007 22:31
Проблемы с css (резиновая вёрстка) PavelCh HTML, CSS, JavaScript 5 19.09.2006 12:47
верстка под Cms Ranger HTML, CSS, JavaScript 3 26.10.2005 20:05
Css, слои, "резиновая" верстка mr_jok HTML, CSS, JavaScript 4 27.01.2005 18:57


Текущее время: 08:23. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум