• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Positionierung von DIV's

Heavy-Dee

Heavy-Dee

Mitglied
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 ???
Code: 
<!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>
 
Werbung:
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
 
mir ist schon klar das man die Abstände nicht mit dem <br> Element erzeugt.
MrMurphy schrieb:
durch position:absolute werden die Container aus dem Elementenfluss genommen. Nachfolgende Container können dann nicht mehr auf sie reagieren.
Zum Vergrößern anklicken....
Mein Problem ist ja das ich den Container 3 danach wieder in den Elementfluss nehmen möchte.
 
Werbung:
Hallo

Mein Problem ist ja das ich den Container 3 danach wieder in den Elementfluss nehmen möchte.
Zum Vergrößern anklicken....

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
 
Ja ohne position:absolute; und dafür heigt: bzw. height:auto;
Beispiel
Code: 
<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>
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben