Не получается правильно задать слои

Ururu · August 3, 2008

Почему слои нехотят быть на своих местах, все съезжает?

Это сама страница:

<body>
<div id="headmenu" > Голова </div> 
<div id="mainmenu" > Цент </div> 
<div id="rightmenul" > Правая колонка </div> 
<div id="leftmenu" > Левая колонка </div> 
<div id="footmenu" > Нижняя </div> 
</body>

Из этого видно, что хочу разделить страницу на 5 частей:

Вот css, как делил:

html, body{ 
 margin:0; 
 padding:0; 
} 


#headmenu{
 position:top; 
 height:70px; 
  background-color:#AAAAA0; 
 width:100%;
} 

#leftmenu{
 width:200px; 
 float:left; 
 position:relative; 
 background-color:#AAAA00; 
}

#mainmenu{background-color: #BCF000;  
 float: left; 
 display:inline; 
 position: relative; 
 width:75%; 
}

#rightmenu{
 width:100px; 
 float:right; 
 position:relative; 
 background-color:#AA0000;
}

#footmenu{
 height:10px; 
  background-color:#867FFF; 
 clear:both;
}

rus · August 3, 2008

Вот так должно быть:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<style>
html, body{
height:100%;
 margin:0; 
 padding:0; 
} 


#headmenu{
 position:top; 
 height:70px; 
  background-color:#AAAAA0; 
 width:100%;
} 

#leftmenu{
 height:100%;
 width:200px; 
 float:left; 
 position:relative; 
 background-color:#AAAA00; 
}

#mainmenu{background-color: #BCF000;  
 float: left; 
 display:inline; 
 position: relative; 
 width:100%; 
}

#rightmenu{
 height:100%;
 width:200px; 
 float:right; 
 position:relative; 
 background-color:#AA0000;
}

#footmenu{
 height:20px; 
 background-color:#867FFF; 
 clear:both;
 bottom:0px;
 margin-bottom:0px;
 padding-bottom:0px;
}
</style>
</head>

<body>
<div id="headmenu" > Голова </div> 
<div id="mainmenu" > Цент </div> 
<div id="rightmenu" > Правая колонка </div> 
<div id="leftmenu" > Левая колонка </div> 
<div id="footmenu" > Нижняя </div> 
</body>
</html>

Ururu · August 3, 2008

Так тоже не выходит, получается что топ свержу, центр под ним и уже ниже левая и правая колонка.

Почему центр не встает между правой и левой колонкой?

Получается все дело тут:

#leftmenu{
 height:100%;
 width:200px; 
 float:left; 
 position:relative; 
 background-color:#AAAA00; 
}

#mainmenu{background-color: #BCF000;  
 float: left; 
 display:inline; 
 position: relative; 
 width:100%; 
}

#rightmenu{
 height:100%;
 width:200px; 
 float:right; 
 position:relative; 
 background-color:#AA0000;

Ururu · August 3, 2008

Получилось так:

html

<body>
   <div id="page">
	  <div id="headmenu">top</div>
		 <div id="leftmenu">left</div>
			<div id="mainmenu">center</div>
		 <div id="rightmenu">right</div>
	  <div id="footmenu">foot</div>
   </div>
</body>

css

body {
margin:0 0 0 0;
padding:0 0 0 0;
}

#page{
margin: 0 auto;
width:1000px;
}

#headmenu{
height:30px;
background:#ccc;
} 

#leftmenu{
float:left;
width:200px;
background:red;
}

#mainmenu{
background-color: #BCF000;  
width:600px;
float:left;
}

#rightmenu{
float:right;
background:blue;
width:200px;
}

#footmenu{
width:1000px;
background:#006;
clear:both;
height:20px;
}

Ururu · August 3, 2008

Теперь другая проблема. Верхнее и нижнее меню имеют фиксированую высоту в px. Нужно левую и правую колонку растянуть на все оставшееся место (по высоте). Придумал только с помощью java скрипта, определить размеры внутреннего окна браузера пользователя и в зависимости от размеров, подгружать разные стили.

Но сделать так не смогу сам, это для уж очень умных )

Есть способ как то это упростить?

rus · August 3, 2008

я понял, у меня в принципе получилось так как вам нужно, но вот футер не прибивается к низу:

<style>
html, body{
width:100%;
height:100%;
 margin:0; 
 padding:0; 
} 


#headmenu{
 position:absolute;
 top:0; 
 height:70px; 
 background-color:#AAAAA0; 
 width:100%;
}

#mainmenu{
 background-color: #BCF000; 
 position: relative;
 top:70px;
 left:20%;
 right:20%;
 width:60%; 
}

#leftmenu{
 height:100%;
 width:20%; 
 position:absolute;
 top:70px;
 left:0;
 background-color:#AAAA00; 
}

#rightmenu{
 height:100%;
 width:20%; 
 position:absolute;
 right:0;
 top:70px; 
 background-color:#AA0000;
}

#footmenu{
 height:20px;
 width:100%;
 background-color:#867FFF; 
 clear:both;
 position:absolute;
 bottom:0;
}
</style>

Sign In

Не получается правильно задать слои

Question

Ururu

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

Ururu

Link to comment

Share on other sites

Ururu

Link to comment

Share on other sites

Ururu

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information