LINUX.ORG.RU

div, резина


0

0

Есть сайт примерно такой формовки, верстка на дивах, проблемма в следу-
щем - необходимо сделать left, center м right резиновыми - если #body 
увеличивается на длинну одной из разросшейся колонки, чтобы остальные
колонки также увеличивались. Как только не пытаюсь сверстать, резиновы-
ми становиться они не торопятся. Это вобще возможно? Помогите с кодом.

+-------------------------------------------+
|                header                     |
+-------------------------------------------+

+-------------------------------------------+
|                body                       |
|+-------+ +----------------+ +------------+|
||       | |                | |   right    ||
||       | |                | |+----------+||
||       | |                | ||     r1   |||
|| left  | |     center     | |+----------+||
||       | |                | |+----------+||
||       | |                | ||     r2   |||
||       | |                | |+----------+||
|+-------+ +----------------+ +------------+|
+-------------------------------------------+

+-------------------------------------------+
|               footer                      |
+-------------------------------------------+
★★★★★

Re: div, резина

ЕМНИП, задавать ширину в процентах, но кажись с этим был какойто касяк в осле, потому это решалось таблицей. Хотя есть костыльный вариант, ресайзить скриптами по событиям.

wfrr ★★☆ ()

Re: div, резина

#left,#center,#right{display:inline-block;};
#left,#right{width:30%};
#center{width:40%};

Или что?

anonymfus ★★★★ ()

Re: div, резина

с кодом помоги себе сам (С), гугли в инете "верстка в три колонки" например...

anonymous ()

Re: div, резина

> если #body увеличивается на длинну одной из разросшейся колонки, чтобы остальные колонки также увеличивались

в последнем примере c tagsoup.com посмотри. В сторону

body { //.. overflow: hidden; } div#content { //.. overflow-y: scroll; overflow-x: auto; }

anonymous ()

Re: div, резина

Боюсь вы не совсем меня поняли, т.к. в примерах по ссылка нужное мне отсутствует.
Вот пример кода
<html>
<head>
	<style>
		#header{background-color:gray;text-align:center;}
		#left{position:relative;width:33%;background-color:gray;float:left;}
		#center{position:relative;width:33%;background-color:green;float:left;}
		#right{position:relative;width:33%;background-color:red;float:left;}
		#footer{position:relative;clear:both;background-color:black;color:white;text-
align:center;height:20px;}
	</style>
</head>
<body>
	<div id="header">
		<h1>Header</h1>
	</div>
	<div id="body">
		<div id="left">left<br>left<br>left</div>
		<div id="center">center</div>
		<div id="right">right</div>
	</div>
	<div id="footer">This is footer</div>
</body>
</html>

Обратите внимание на то, что при увеличении left, остальные колонки не растягиваются вниз также.
Необходимо чтобы если увеличивается height у любой из колонок(в следствии заполнением текстом), 
чтобы у других автоматически увеличивалась высота также. Буду очень признателен.
//Orlangoor

anonymous ()

Re: div, резина

Для ишака придумал решение, #body{height:1px;}#left #center #right{height:100%;}, т.к. он перерисовывает картинку по параметрам при каждом изменении, с gecko же такое не получится, т.к. он нарисует фон высотой в 1px несмотря на то, что текст уместит правильно... Еше есть варианты?

PS - капчи и правда такие забавные...

//Orlangoor

anonymous ()
Ответ на: Re: div, резина от anonymous

Re: div, резина

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">

<head>
<title>Example 5: Negative Margins</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css" media="screen">
/*<![CDATA[*/
#header {
border: 1px solid #cecea5;
background: gray;
}
#outer_wrapper {
background: #fff lime repeat-y left;
}
#wrapper {
background: maroon repeat-y right;
}

#container {
width: 100%;
float: left;
margin-right: -200px;
background: red repeat-y right;
}
#content {
margin-right: 200px;
background: green repeat-y left;
}
#center {
margin-left: 150px;
}
#left {
width: 150px;
float: left;
background: magenta;
}
#right {
width: 200px;
float: right;
}
#footer {
border: 1px solid #cecea5;
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
</style>
</head>

<body>

<div id="header">header</div>

<div id="outer_wrapper">

<div id="wrapper">
<div id="container">
<div id="content">

<div id="left">
<h1>left</h1>
<ul>
<li>link one#left</li>
<li>link two#left</li>
<li>link three#left</li>

</ul>
</div>

<div id="center">
<h1>center</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>


</div>
</div>

<div id="right">
<h1>right</h1>
<p>Here be your Sidebar. Add whatever content you may desire.</p>
</div>

<div class="clearing">&nbsp;</div>
</div>

</div>

<div id="footer">footer</div>

</body>
</html>

anonymous ()
Ответ на: Re: div, резина от anonymous

Re: div, резина

можно выкинуть ненужный cruft в CSS, упростить. Также см., что левая колонка не полной высоты, а по высоте текста. Впрочем, можно выкрутиться, если сделать так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">

<head>
<title>Example 5: Negative Margins</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css" media="screen">
/*<![CDATA[*/
#header {
border: 1px solid #cecea5;
background: gray;
}
#outer_wrapper {
background: #fff lime repeat-y left;
}
#wrapper {
background: #d7dabd repeat-y right;
}

#container {
width: 100%;
float: left;
margin-right: -200px;
background: red repeat-y right;
}
#content {
margin-right: 200px;
background: magenta repeat-y left;
}
#center {
margin-left: 150px;
background: green;
}
#left {
width: 150px;
float: left;
background: magenta;
}
#right {
width: 200px;
float: right;
}
#footer {
border: 1px solid #cecea5;
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
</style>
</head>

<body>

<div id="header">header</div>

<div id="outer_wrapper">

<div id="wrapper">
<div id="container">
<div id="content">

<div id="left">
<h1>left</h1>
<ul>
<li>link one#left</li>
<li>link two#left</li>
<li>link three#left</li>

</ul>
</div>

<div id="center">
<h1>center</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>


</div>
</div>

<div id="right">
<h1>right</h1>
<p>Here be your Sidebar. Add whatever content you may desire.</p>
</div>

<div class="clearing">&nbsp;</div>
</div>

</div>

<div id="footer">footer</div>

</body>
</html>

anonymous ()
Ответ на: Re: div, резина от anonymous

Re: div, резина

патч, для наглядности:

tunec@ftopka$ hg diff -r 0 -r 1 ex05.htm

diff -r f5d1de75b630 -r eeec4bdd0491 ex05.htm
--- a/ex05.htm Tue Jul 01 21:34:37 2008 +0400
+++ b/ex05.htm Tue Jul 01 21:35:15 2008 +0400
@@ -16,7 +16,7 @@ background: #fff lime repeat-y left;
background: #fff lime repeat-y left;
}
#wrapper {
-background: maroon repeat-y right;
+background: #d7dabd repeat-y right;
}

#container {
@@ -27,10 +27,11 @@ background: red repeat-y right;
}
#content {
margin-right: 200px;
-background: green repeat-y left;
+background: magenta repeat-y left;
}
#center {
margin-left: 150px;
+background: green;
}
#left {
width: 150px;
@@ -102,4 +103,4 @@ clear: both;
<div id="footer">footer</div>

</body>
-</html>
\ No newline at end of file
+</html>
\ No newline at end of file

anonymous ()
Ответ на: Re: div, резина от anonymous

Re: div, резина

На первый взгляд показалось что не то, но судя по всему ошибся. Спасибо, подумаю над кодом

anonymous ()
Ответ на: Re: div, резина от anonymous

Re: div, резина

тьфу, точка с запятой не нужна, в общем.

anonymous ()
Ответ на: Re: div, резина от anonymous

Re: div, резина

существенная часть там контейнеры на div'ы и .clearing { height:0; clear: both; }

anonymous ()
Ответ на: Re: div, резина от anonymous

Re: div, резина

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<style>
		#header{background-color:gray;text-align:center;}
		#body{display:table;width:100%}
		#left,#center,#right{display:table-cell;width:33%;}
		#left{background-color:gray;}
		#center{background-color:green;}
		#right{background-color:red;}
		#footer{background-color:black;color:white;text-align:center;height:20px;}
	</style>
</head>
<body>
	<div id="header">
		<h1>Header</h1>
	</div>
	<div id="body">
		<div id="left">left<br>left<br>left</div>
		<div id="center">center</div>
		<div id="right">right</div>
	</div>
	<div id="footer">This is footer</div>
</body>
</html>

anonymfus ★★★★ ()
Ответ на: Re: div, резина от anonymfus

Re: div, резина

MSIE6, колонки рисуются одна под другой. Arora, Safari, Opera, Mozilla, hv3 tkhtml -- рисуется нормально.

anonymous ()
Ответ на: Re: div, резина от anonymfus

Re: div, резина

а теперь посчитай % юзеров, сколько % с MSIE6/MSIE8/Opera/FF/Webkit

anonymous ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.