Форум Сайтостроение Веб-строительство

Need help: трехколоночная DIVная верстка.

12
bodnar
На сайте с 29.06.2008
Offline
1
bodnar
#11

Тоесть чтобы все три колонки были одинаковыми по высоте?

<SCRIPT LANGUAGE="JavaScript 1.3" TYPE="text/javascript"> 
<!-- 
function r1() { 
 var m=0; 
 var r=parseInt(document.getElementById(&#8242;right&#8242;).offsetHeight); 
 var l=parseInt(document.getElementById(&#8242;left&#8242;).offsetHeight); 
 var c=parseInt(document.getElementById(&#8242;center&#8242;).offsetHeight); 
 if(m<r){m=r;} 
 if(m<l){m=l;} 
 if(m<c){m=c;} 
 document.getElementById(&#8242;left&#8242;).style.height=m+&#8242;px&#8242;; 
 document.getElementById(&#8242;right&#8242;).style.height=m+&#8242;px&#8242;; 
 document.getElementById(&#8242;center&#8242;).style.height=m+&#8242;px&#8242;; 
} 
//--> 
</SCRIPT>

А еще нужно изменить тег body: <body onload="JavaScript:r1()">

Ну и естественно вместо лефт райт и сентер пишем ваши названия колонок.

Вот :) НУ а если колонки начинаются Не на одинаковой высоте, но известна разница(пикселей), то к тем которые начинаются выше просто еще приплюсуем эту разницу :)

И
На сайте с 12.05.2008
Offline
8
Имя
#12

bodnar, огромный сенкс!

С выравниванием то по низу разобрался - с помощью подложки и собственно прозрачных самых левой и правой колонки. Мучает вопрос кросбраузерности из 10 поста.

И
На сайте с 12.05.2008
Offline
8
Имя
#13

Подскажите почему #container отображается бесцветным в опере, в ИЕ все в поряде. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>5</title>

<style>

<!--

body {

	padding:0px;

	width: 900px;

	margin: 20px auto;

	margin-right: auto;

	min-height:100%;

position: relative;

text-align: center;

}

#container {

	background: #FFC0CB;

	width: 900px;

}

#left {

	float: left;

	width: 200px;

}

#sub_cont {

	background: #87CEFA;

	float: right;

	width: 700px;

}

#center {

	background: #90EE90;

	float: left;

	width: 500px;	

}

#right {

	float: right;

	width: 200px;

}

#foot {

	background: #FFF48C;

	clear: both;

	height: 40px;

	width: 900px;

}



-->

</style>

</head>



<body>

<div id="container">

<div id="left">5</div>

<div id="sub_cont">

<div id="center">4<p>&nbsp;</p>

	<p>&nbsp;</p>

	<p>&nbsp;</p>

	<p>&nbsp;</div>

<div id="right">3</div>



</div>

</div>

<div id="foot"></div>



</body>



</html>

Без:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

нормальное отображение, но куча других глюков.

И
На сайте с 12.05.2008
Offline
8
Имя
#14

Ну и хорошо что не помогли - пришлось включить мозг и подучить CSS.

Если кому интересно там надо было добавить к container'у:

#container {overflow: hidden} и усе дела!

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий