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

помогите разобраться со слоями css

M0
На сайте с 15.12.2007
Offline
16
mixas01
733

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

размеры и расположения слоёв в коде. Не получается растянуть контент2 на всю ширину внутреннего пространства минус 400 пикселей (контент3). и вылезло у меня там всё вниз под футер. рамка должна прилегать к краям документа, а все три контента уместиться внутри этой рамки. и чёрного цвета не должно быть видно. можно ли это как то сделать?

я уже много вариантов испробовал, вот этот с вложенными друг в друга дивами больше всех похож на правду, но весь кривой какой то. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

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

<TITLE></TITLE>



<style type="text/css">



 * {

  padding:0;

  margin:0; }

html, body {

 height:100% }

body {

  position:relative;

  }

#header {

  background-color:#0028af;

  top:0px;

  left:0pt;

  width:100%;

  height:100px; }

#left {

  height:100%;

  background-color: #00afaf;

  top:100px;

  left:0pt;

  position:absolute;

  width:10px;

  bottom: 30px; }

#right {

  background-color:#00afaf;

  height:100%;

  top:100px;

  position:absolute;

  width:10px;

  bottom: 30px;

  right:0pt; }

#content1 {

  background-color: #FFF000;

  margin-top:0px;

  margin-right:11px;

  margin-left:11px;

  height:15%;

  overflow-y: auto;

  overflow-x:hidden; }

#content2 {

  background-color: #FF5400;

  right:400px;

  bottom:30px;

  height:100%;

  width:60%;

  margin-left:10px;

  float:left;

  overflow-y: auto;

  overflow-x:hidden;

  }

#content3 {

  background-color: #FDB900;

  bottom:30px;

  right:0pt;

  height:100%;

  width:400px;

  float:right;

  overflow-y: auto;

  overflow-x:hidden;

  }

#footer {

  background-color: #0008af;

  width:100%;

  height:30px;

  bottom:0pt;

  left:0pt;

  position:absolute;

  right:0pt; }

#all {

  margin:0px;

  background-color: #000000;

  height:100%;

  width:100%; }

#midd {

  margin:0px;

  background-color: #000000;

  height:100%;

  width:100%; }

#midd2 {

  margin:0px;

  background-color: #000000;

  height:100%;

  width:100%; }

#midd3 {

  margin:0px;

  background-color: #000000;

  height:85%;

  width:100%; }

   }



</style>



</HEAD>

<BODY>

<div id="all">

  <div id="header">&nbsp;Шапка 100% х 100рх</div>

  <div id="midd">&nbsp;

    <div id="left">&nbsp;</div>

    <div id="midd2">

      <div id="content1">&nbsp;content1<br /> высота: 15% внутреннего пространства. т.е. 100% - 100рх (шапка) - 30рх (футер)<br />ширина 100% внутреннего пространства. т.е. 100% - 10рх (левая рамка) - 10рх (правая рамка)</div>

      <div id="midd3">

         <div id="content2">&nbsp;content2<br /> высота: 85% внутреннего пространства. <br />ширина: 100% внутреннего пространства.  - 400рх (content3)</div>

         <div id="content3">&nbsp;content3<br /> высота: 85% внутреннего пространства. <br />ширина: 400рх </div>

      </div>

    </div>

    <div id="right">&nbsp;</div>

  </div>

  <div id="footer">&nbsp;футер 100% х 30рх</div>

</div>

</BODY>

</HTML>
[Удален]
#1

потренируйтесь на шаблончегах

http://blog.html.it/layoutgala/

DC
На сайте с 08.09.2007
Offline
17
Dr.Canibal
#2

mixas01, попробуй вот такой вариант 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

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

<TITLE></TITLE>

<style type="text/css">

*{

	margin: 0;

	padding: 0;

}

html, body {

	height:100% 

}

body {

	position:relative;

}

#wrap{

	height: 100%;

	width: 100%;

	background-color: #000000;

}

#header{

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100px;

	background-color:#0028af;

	color: #ffffff; 

}

#main{

	position: absolute;

	text-align: center;

	width: 100%;

	height: expression((document.body.clientHeight - 130) + "px");

	background-color: #00afaf;

	top: 100px;

	bottom: 30px;	

}



#content1{

	width: expression((document.body.clientWidth-20) + "px");	

	height: 15%;

	background-color: #FF5400;

	margin-left: 10px;

	margin-right: 10px;

	position: relative;

}



#content2{

	float: left;

	width: expression((document.body.clientWidth-400)+"px");

	height: 85%;

	margin-left: 10px;

	background-color: #FF5400;

	position: absolute;

	top: 15%;

	left: 0px;

	right: 400px;

	bottom: 30px;

}

#content3{

	width: 400px;

	height: 85%;

	float: right;

	margin-right: 10px;

	background-color: #FDB900;

	position: relative;

}



#footer{

	width: 100%;

	height: 30px;

	background-color:#0008af;

	left:0pt;

	right:0pt;

	bottom: 0pt;	

	position: absolute;	

	color: #ffffff;

}



</style>

</HEAD>

<BODY>

<div id="wrap">

	<div id="header">&nbsp;&nbsp;Шапка 100% х 100рх</div>

	<div id="main">

		<div id="content1">&nbsp;content1<br /> высота: 15% внутреннего пространства. т.е. 100% - 100рх (шапка) - 30рх (футер)<br />ширина 100% внутреннего пространства. т.е. 100% - 10рх (левая рамка) - 10рх (правая рамка)</div>

		<div id="content2">&nbsp;content2<br /> высота: 85% внутреннего пространства. <br />ширина: 100% внутреннего пространства.  - 400рх (content3)</div>

		<div id="content3">&nbsp;content3<br /> высота: 85% внутреннего пространства. <br />ширина: 400рх </div>

	</div>

	<div id="footer">&nbsp;&nbsp;футер 100% х 30рх</div>

</div>

</BODY>

</HTML>

немного грубовато, но проверил под IE 7, Safari 3.1.1, Opera 9.27, Firefox 2.0.0.14... работает :)

Чудеса случаются... это вам любой программист скажет... Скрипты (php, mysql, javascript и т.д.) любой сложности и вёрстка на заказ т.: +38(099)0569716, icq: 296874736

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