Positionierung von DIV's

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,
Ich möchte zwei DIV’s übereinander plazieren und die Sichtbarkeit togglen.
Das habe ich soweit auch hin bekommen. Allerdings habe ich das Problem bei dem 3. Container. Der soll direkt im Anschluss an den 1. oder 2. ausgegeben werden. Also relative Position.
Dieser fängt aber immer ganz oben an, egal welches DIV sichtbar ist.
Wo liegt mein Fehler ???

<!doctype html>
<html>
<head>

<style>
	#top
	{
	margin: 0 auto;
	position: relative;
	}
	
	#box1 {
	border: 1px solid black; 
	background-color: red;
	position: absolute;
	display: block;
	width: 100%;
	}	

	#box2 {
	border: 1px solid black; 
	background-color: yellow;
	position: absolute;
	display: none;
	width: 100%;
	}
	#box3 {
	border: 1px solid black; 
	position: relative;
	display: block;
	}
</style>
<script src="js/jquery-2.1.4.js" type="text/javascript"></script> 

<script>
	// Toggle Eingabefeld
	function toggle(){
		$('#box1').fadeToggle(750);
		$('#box2').fadeToggle(750);
	};	
</script>
</head>

<body>
	<div id="top">
		<div id="box1">
			BOX 1
		</div>
		<div id="box2">
			Anfang BOX 2 ...<br>	
			.<br>
			.<br>
			.<br>
			.<br>
			.<br>
			.<br>
			... Ende BOX 2		
		</div>	
	</div>	
		<div id="box3">
			Anfang BOX 3 ...<br>	
			<br>
			<br>
			<br>
			<br>
			BOX 3 soll im Anschluss an die eingeblendete BOX 1 oder BOX 2 (nach #top) beginnen.<br>
			<br>
			<br>
			<br>
			<br>
			... Ende BOX 3						
		</div>

	<p>
		<input type="submit" id="btn_toggle" onclick="toggle()" value="Toggle" >
	</p>

</body>
</html>
2

Hallo,

durch position:absolute werden die Container aus dem Elementenfluss genommen. Nachfolgende Container können dann nicht mehr auf sie reagieren.

Du solltest dich mal näher mit den position-Angaben und ihren Auswirkungen beschäftigen.

Da mir dein Problem nicht 100% klar ist kann ich dir leider nicht konkreter weiterhelfen.

Die Erzeugung von Abständen durch das br-Element lässt aber leider insgesamt auf fehlende Grundkenntnisse schließen.

Gruss

MrMurphy

3

mir ist schon klar das man die Abstände nicht mit dem
Element erzeugt.

Mein Problem ist ja das ich den Container 3 danach wieder in den Elementfluss nehmen möchte.

4

Hallo

Mein Problem ist ja das ich den Container 3 danach wieder in den Elementfluss nehmen möchte.

Grundlagen. Container 3 hast du doch gar nicht aus dem Elementenfluß genommen.

Entferne einfach die beiden position:absolute und alles ist gut.

Oder du gibst dem dritten Container einen so großen Abstand noch oben (margin-top) dass er in jedem Fall unter den beiden anderen bleibt.

Gruss

MrMurphy

5

Ja ohne position:absolute; und dafür heigt: bzw. height:auto;
Beispiel

<html>
<head>
<meta charset="utf-8">
<title>toggle</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
border:none;
outline:none;
}

#box1 {
background-color: red;
border-top:1px solid #000;
height:auto;
width: 100%;
float:left;
} 
#box2 {
background-color: yellow;
height:0;
overflow:hidden;
width: 100%;
float:left;
}

#box3 {
border: 1px solid black;
width: 100%;
float:left;
}

input {
display:none;
}

label {
border:1px solid #999;
border-radius:5px;
background:#eee;
padding:5px;
}

input:checked ~ #box2 {
border-top:1px solid #000;
height:auto;
}
input:checked ~ #box1 {
border-top:none;
height:0;
overflow:hidden;
}
label:before {
content:"Box 2 ";
}
input:checked + p label:before {
content:"Box 1 ";
}
p {
padding:10px;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle" name="toggle" ><p class="input"><label for="toggle"> einblenden</label></p>
<div id="box1">
<p>Inhalt Box 1</p>
<p>Inhalt Box 1</p>
<p>Inhalt Box 1</p>
<p>Inhalt Box 1</p>
</div>
<div id="box2">
<p>Inhalt Box 2</p>
<p>Inhalt Box 2</p>
<p>Inhalt Box 2</p>
<p>Inhalt Box 2</p>
<p>Inhalt Box 2</p>
</div>

<div id="box3">
<p>Inhalt Box 3</p>
<p>Inhalt Box 3</p>
<p>Inhalt Box 3</p>
</div>
</body>
</html>
6

OK,
ist zwar nicht so wie ich mir das vorstelle, aber erst mal DANKE für die Hilfe !!!

7

Na, was stellst du dir denn vor?