Наместване на div-ове

Liberate

Registered
Здравейте. Имам 1 проблем с наместването на частите от сайта ми. Той се състои от 1 контейнер и 4 главни части и те са:
div#container ; div#head ; ul#menu ; div#body ; div#foot
Сигурно сте се досетили, но да ви кажа - container е контейнера в който си държа самия сайт и го използвам за да центрирам самия сайт, head е главата на сайта и там е логото, menu естествено е меню-то, body е частта със съдържанието на отделните страници, а foot е футера на сайта където пише примерно Copyright Дани 2008-2009
Там е работата че не знам как да си сложа футера да стои под body без да му задавам точно място, защото body-то няма фиксирана дължина и се води по съдържанието...
И ето какво моля - някой да ми каже как да си намествам div-овете без да им задавам точно място чрез пиксели
 
Като поставяш този който искаш да е отдоло най-отдоло... В твоя случай няма нужда от никакво позициониране
Код:
<div id="container" style="width: 800px; margin: auto">

	<div id="header" style="background: blue; height: 100px;">Header</div>

	<div id="menu" style="background: red; height: 30px">Menu</div>
	
	<div id="body" style="background: yellow">
	
		Body<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	
		<br />	

	</div>

	<div id="foooter" style="text-align: center; background: green;">Footer</div>

</div>
 
@raiden нямам си на идея кво прави clear:both ама го пробвах и не стана нищо...
@I_V_O смяташ ли че не съм го направил точно така... просто не става... трябва ми позициониране :\
 
Liberate каза:
@I_V_O смяташ ли че не съм го направил точно така... просто не става... трябва ми позициониране :\

Ако си го направил така значи няма логиака да не се получава освен ако не си задал float, отрицателен margin или position: absolute на някой от твоите контейнери, най-вероятоно на body. По добре или си промени кода или виж ще ти дам едно javascript-че:

Сложи :
Код:
<script type="text/javascript">
var bodyTop = document.getElementById('body').offsetTop;
var bodyHeight = document.getElementById('body').offsetHeight
var footer = document.getElementById('foot');
footer.style.width = '800px';//Задаваш еднаква ширина на body и foot
footer.style.position = 'absolute';
footer.style.top = ((bodyTop + bodyHeight) + 5) + 'px'; //задаваме 5px разтояние м/у body и foot
</script>
след като затвориш главния контейнер и трябва да се получи

ето и какво ще трябва да стане

Код:
<div id="container" style="width: 800px; margin: auto"> 

   <div id="header" style="background: blue; height: 100px;">Header</div> 

   <div id="menu" style="background: red; height: 30px">Menu</div> 
    
   <div id="body" style="background: yellow"> 
    
      Body<br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    
      <br />    

   </div> 

   <div id="foot" style="text-align: center; background: green;">Footer</div> 

</div>

<script type="text/javascript">
var bodyTop = document.getElementById('body').offsetTop;
var bodyHeight = document.getElementById('body').offsetHeight
var footer = document.getElementById('foot');
footer.style.width = '800px';//Задаваш еднаква ширина на body и foot
footer.style.position = 'absolute';
footer.style.top = ((bodyTop + bodyHeight) + 5) + 'px'; //задаваме 5px разтояние м/у body и foot
</script>
 
Ето от мен едион вариант:(има хиляди възможностти , аз ти предлагам една от тях)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#main {
margin:0 auto;
width:1000px;
height:1000px;
}
#header {
position:absolute;
margin:0;
width:1000px;
height:200px;
border:solid 1px red;
}
#menu {
position:absolute;
margin-top:200px;
margin-left:0;
width:1000px;
height:50px;
border:solid 1px blue;
}
#body {
position:absolute;
width:1000px;
height:650px;
margin-top:250px;
margin-left:0px;
border:solid 1px black;
}
#footer {
position:absolute;
margin-top:900px;
margin-left:0;
width:1000px;
height:100px;
border:solid 1px green;
}
</style>
</head>
<body>

<div id="main">
<div id="header"></div>
<div id="menu"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</body>
</html>
Иначе, дай както казва @dashe кода, с който работиш в момента
 
момчета мерси на сички, оправих се сам...
беше некфа абсолютна каша, опитах 20 различни вариянта и ... накрая се оказа че просто не трябва да имам контейнер и трябваше да махна float-а на менюто :D
иначе мерси :)
 

Back
Горе