Не полчаеться заправить слои в еще один слой-обертку!

WEB_bobby · June 15, 2007

Добрый день! Не получаеться завернуть дивы в обертку!

Оберткой служит

, но почему же не получаеться и нижний слой лепиться к последнему слою первого ряда?! И неда предлагать никакие в три колонки там и т.д, я знаю что можно подругому! Меня интересует почему не получаеться заправить слои, а не это!!! Не знаете, то лучше молчите!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type ="text/CSS">
body{ background-color:#000000;}

* {
margin: 0;
padding: 0;
border:1px solid white
}

headWrapper{height:200px;}

#headLeft{width:200px; height:200px;margin-left:100px; float:left; background-color:#1e884d}
#headMiddle{width:20%; height:200px; float:left; background-color:#d0884d}
#headRight{width:200px; height:200px; margin-right:100px; float:left; background-color:#1e884d}

#bodyLeft{width:50px; height:400px; margin-left:50px; float:left; background-color:#6785d9}
#bodyMiddle{width:20%; height:400px; float:left; background-color:#67394b}
#bodyRight{width:450px; height:300px; padding:50px; margin-right:50px; float:left; background-color:#6785d9}
</style>
</head>

<body>
<div id ="headWrapper">
<div id ="headLeft">
</div>
<div id ="headMiddle">
</div>
<div id ="headRight">
</div>
</div>

<div id ="bodyLeft"></div> <div id ="bodyMiddle"></div>
<div id ="bodyRight"></div>



</body>
</html>

yopopt · June 15, 2007

А может ему просто места не хватает? И прекратите обтекание сло?в вставив

Вот так:

<body>
<div id ="headWrapper">
<div id ="headLeft"></div>
<div id ="headMiddle"></div>
<div id ="headRight"></div>
<div style="clear:both"></div>
</div>

<div id ="bodyLeft"></div>
<div id ="bodyMiddle"></div>
<div id ="bodyRight"></div>

WEB_bobby · June 15, 2007

А может ему просто места не хватает? И прекратите обтекание сло?в вставив
Вот так:
<body>
<div id ="headWrapper">
<div id ="headLeft"></div>
<div id ="headMiddle"></div>
<div id ="headRight"></div>
<div style="clear:both"></div>
</div>

<div id ="bodyLeft"></div>
<div id ="bodyMiddle"></div>
<div id ="bodyRight"></div>

Позвольте! Как же это не хватает места... Если туда еще и залазеет слой со второй строки? )))))

WEB_bobby · June 15, 2007

также возник у меня вопрос, как сделать чтоб headMiddle и bodyMiddle тянулись на все допустимое пространство? Я убрал width:20% ? ширину которую я задал по глупости..Но они все равно теперь не расстягиваються на свободную ширину от двух других боковых слоев, а почему ? ведь слой же блочный элемент и положено что занимает всю свободную ширину!

WEB_bobby · June 15, 2007

#headWrapper{height:200px;}

- не поставил #.... Синтаксис....

WEB_bobby · June 15, 2007

как сделать чтоб headMiddle и bodyMiddle тянулись на все допустимое пространство?

Вот исправленный код. пробывал убирать ихний width заданный в процентах - так вообще казябазя какаята получилась. А почему? Ведь слой блочный элемент и должен заполнять все свободное пространство!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type ="text/CSS">
body{ background-color:#000000;}

* {
margin: 0;
padding: 0;
border:1px solid white
}

#headWrapper{height:200px;}

#headLeft{width:200px; height:200px;margin-left:100px; float:left; background-color:#1e884d}
#headMiddle{width:20%; height:200px; float:left; background-color:#d0884d}
#headRight{width:200px; height:200px; margin-right:100px; float:left; background-color:#1e884d}

#bodyLeft{width:50px; height:400px; margin-left:50px; float:left; background-color:#6785d9}
#bodyMiddle{width:20%; height:400px; float:left; background-color:#67394b}
#bodyRight{width:450px; height:300px; padding:50px; margin-right:50px; float:left; background-color:#6785d9}
</style>
</head>

<body>
<div id ="headWrapper">
<div id ="headLeft">
</div>
<div id ="headMiddle">
</div>
<div id ="headRight">
</div>
</div>

<div id ="bodyLeft"></div> <div id ="bodyMiddle"></div>
<div id ="bodyRight"></div>



</body>
</html>

WEB_bobby · June 16, 2007

up

yopopt · June 16, 2007

Чувствую Вы так и будете ждать, когда же вам кто-нибудь поможет... Задача не так сложна...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type ="text/CSS">
* {
	margin: 0;
	padding: 0;
}

body{
	height:600px;
	min-width:600px;
}

#first{
	height:200px;
	background-color:#d0884d;
}
#top_left{
	height:200px;
	width:200px;
	background-color:red;
	float:left;
}
#top_right{
	height:200px;
	width:200px;
	background-color:yellow;
	float:right;
}
#top_middle{
	margin:0 200px;
}

#second{
	height:400px;
	background-color:green;
	color:white;
}
#bottom_left{
	height:400px;
	width:50px;
	background-color:black;
	float:left;
}
#bottom_right{
	height:400px;
	width:450px;
	background-color:blue;
	float:right;
}
#bottom_middle{
	margin:0 450px 0 50px;
}
</style>
</head>

<body>
<div id="first">
	<div id="top_right">wqw</div>
	<div id="top_left">213кка</div>
	<div id="top_middle">выораоывл</div>
</div>
<div id="second">
	<div id="bottom_right">sadas</div>
	<div id="bottom_left">12</div>
	<div id="bottom_middle">2323</div>
</div>
</body>
</html>

Sign In

Не полчаеться заправить слои в еще один слой-обертку!

Question

WEB_bobby

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information