LINUX.ORG.RU
Форум — Web-development  

div, резина


0

0 

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

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

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

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

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

wfrr ★★☆
()

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

Или что?

anonymfus ★★★★
()

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

anonymous
()

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

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

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

anonymous
() 

Боюсь вы не совсем меня поняли, т.к. в примерах по ссылка нужное мне отсутствует.
Вот пример кода
<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
()

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

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

//Orlangoor

anonymous
()
Ответ на: комментарий от anonymous

<!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
()
Ответ на: комментарий от anonymous

можно выкинуть ненужный 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
()
Ответ на: комментарий от anonymous

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

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
()
Ответ на: комментарий от anonymous

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

anonymous
()
Ответ на: комментарий от anonymous

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

anonymous
()
Ответ на: комментарий от anonymous

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

anonymous
()
Ответ на: комментарий от anonymous 

<!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 ★★★★
()
Ответ на: комментарий от anonymfus

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

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