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

Катя · 05.08.2006, 13:26

Возникла проблема при создании макета страницы с резиновым центром и фиксированными боковыми полями. В центральном блоке- фотографии с подписями, т.е.
вложенные 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. Однако в ИЕ отступы отсчитываются от боковых полей.

Не важно какой из способов в конечном итоге использовать. Главное, вылечить хоть какой...
Заранее большое спасибо.

dantistus · 06.08.2006, 09:46

Я конечно еще не сильно разбираюсь во всех этих перипетиях

А включение доктайпа дело не решает?

Катя · 06.08.2006, 15:46

неа, он включен..
ну в принципе уже вопрос решен. Прошу прощение за беспокойство)

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
HTML верстка, верстка сайтов по стандартам w3c	napoleon1985	Вакансии	1	27.11.2012 16:49
HTML верстка, верстка сайтов по стандартам W3C	napoleon1985	HTML, CSS, JavaScript	3	24.10.2012 18:07
Резиновая вёрстка по высоте...	Денисон	HTML, CSS, JavaScript	4	07.07.2007 22:31
Проблемы с css (резиновая вёрстка)	PavelCh	HTML, CSS, JavaScript	5	19.09.2006 12:47
Css, слои, "резиновая" верстка	mr_jok	HTML, CSS, JavaScript	4	27.01.2005 18:57

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. Однако в ИЕ отступы отсчитываются от боковых полей. Не важно какой из способов в конечном итоге использовать. Главное, вылечить хоть какой... Заранее большое спасибо.

06.08.2006, 09:46	#2
dantistus	Я конечно еще не сильно разбираюсь во всех этих перипетиях А включение доктайпа дело не решает?

06.08.2006, 15:46	#3
Катя	неа, он включен.. ну в принципе уже вопрос решен. Прошу прощение за беспокойство)