• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

div soll anderes überlagern

mikdoe

mikdoe

Moderator
HI!
CSS ist nicht mein Freund :icon8:
Aber ihr wisst ja, ich frage alles nur einmal :)
Welche Definitionen muss ich vornehmen, damit bei nachfolgendem Code die Optionsbox beim Aufklappen nicht das darunter liegende rote Fenster verschiebt sondern sich darüber legt?
HTML: 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Test Box</title> 
</head> 
<body>
	<div id="aussen" style="border: 1px blue solid;"><div onclick="optionsaufzu();">Optionsbox</div>
		<div id="innen" style="display: none;">
		Option 1<br>
		Option 2
		</div>
	</div>
	<div style="border: 1px red solid;">Drunter soll nicht verrutschen</div>
	<script>
		function optionsaufzu() {
			document.getElementById('innen').style.display = (document.getElementById('innen').style.display == '' ? 'none' : '');
		}
	</script>
</body> 
</html>
Danke
 
Stimmt, klappt. Danke schlauer!

Aber: Ich hätte eigentlich den blauen Rahmen gern drum behalten. Also der Kasten mit dem blauen Rahmen soll sich inkl. Rahmen nach unten öffnen, ohne den roten zu verschieben.
Geht das auch mit CSS?
Aktueller Code:
HTML: 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Test Box</title> 
</head> 
<body>
	<div id="aussen" style="border: 1px blue solid;"><div onclick="optionsaufzu();">Optionsbox</div>
		<div id="innen" style="display: none; position: absolute; background-color: white;">
		Option 1<br>
		Option 2
		</div>
	</div>
	<div style="border: 1px red solid;">Drunter soll nicht verrutschen</div>
	<script>
		function optionsaufzu() {
			document.getElementById('innen').style.display = (document.getElementById('innen').style.display == '' ? 'none' : '');
		}
	</script>
</body> 
</html>
 
Zuletzt bearbeitet:
Ja, fast am Ziel, danke Korbinian.
Code:
HTML: 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Test Box</title> 
</head> 
<body>
	<div id="aussen" style="padding: 2px; border: 1px blue solid; width: 100%;"><div onclick="optionsaufzu();" style="cursor: pointer;">Optionsbox</div>
		<div id="innen" style="display: none; position: absolute; background-color: white; width: 100%; border-left: 1px blue solid; border-right: 1px blue solid; border-bottom: 1px blue solid;">
		Option 1<br>
		Option 2
		</div>
	</div>
	<div style="border: 1px red solid;">Drunter soll nicht verrutschen</div>
	<script>
		function optionsaufzu() {
			document.getElementById('innen').style.display = (document.getElementById('innen').style.display == '' ? 'none' : '');
		}
	</script>
</body> 
</html>
Aber irgendwie ist das div innen etwas verschoben im IE9 und es entsteht eine unerwünschte horizontale Scrolleiste, siehe Bild, wie kriege ich das weg?
blaue_box.png
 
Naja, width:100% plus 1px Border erzuegt eine Scrollbar. Aber das width:100% ist sowieso überflüssig, da ein DIV ein Blockelement ist und wenn du es nicht aus den Fluss nimmst, ist es immer automatisch so breit wie Platz da ist.

einfacher wäre das ganze aber vermutlich, wenn du deine Elemente mit JS einfügst, da dass was du anscheinend vorhast, sowieso nicht ohne JS funktioniert, bringt es auch nichts unnötiges Markup zu erzeugen.
 
ein schlauer schrieb:
Naja, width:100% plus 1px Border erzuegt eine Scrollbar. Aber das width:100% ist sowieso überflüssig, da ein DIV ein Blockelement ist und wenn du es nicht aus den Fluss nimmst, ist es immer automatisch so breit wie Platz da ist.
Zum Vergrößern anklicken....
Habe width nur aufgenommen, weil es sonst so aussieht:
blau2.png

ein schlauer schrieb:
einfacher wäre das ganze aber vermutlich, wenn du deine Elemente mit JS einfügst, da dass was du anscheinend vorhast, sowieso nicht ohne JS funktioniert, bringt es auch nichts unnötiges Markup zu erzeugen.
Zum Vergrößern anklicken....
Du meinst, per innerHTML den Inhalt einfügen und auch wieder rausnehmen?
Aus welchem Grund wird es ohne JS nicht funktionieren?
 
Naja, weil du ein Element mit display:none nicht siehst und der Begriff "Optionsbox" klingt nach dem Versuch eine Auswahlliste nachzubauen, d.h. du willst irgendetwas mit den "options" machen, das geht in dem Fall ja nur mit JS - aber das ist alles nur Spekulation, wir Wissen nicht was du vor hast.

Wegen dem Breitenproblem, es ist müsig hier sich Lösungen zu überlegen, da ich mir sicher bin, dass das ganze am Ende so nicht dargestellt wird oder werden soll. D.h. man müßte konkret Wissen, wie das ganze am Ende aussehen soll und unter welchen Bedigungen. Jetzt in diesem Stadium an einer 1Pixel Frage rumzudoktorn, wäre Kontraproduktiv.
 
Hast Recht, der Begriff verwirrt.
Es geht einfach um eine Box innerhalb derer ich in einer Tabelle mehrere Optionen anbieten möchte.
Im Moment ist es mal nur eine Checkbox, später vielleicht noch ein select und radio dazu.
Und diese Optionen sollen halt nur aufklappen, wenn man sie braucht.
Ich versuche es nachher mal mit einer Tabelle und setze die tr's auf none.
Melde mich wieder.
 
Sooooo, jetzt verhält es sich schonmal vom Layout her wie gewünscht.
Nur noch eine Winzigkeit: Wie bekomme ich hier dieses position:absolute; untergebracht?
Egal wo ich es hinsetze, es macht immer irgendwas aber nicht, dass der rote Kasten bleibt wo er ist, wenn man den blauen öffnet.
Bitte nochmal um Hilfe :rolleyes:

http://mikdoe.lima-city.de/test_klappbox.html
 
Ich würde sagen, ich bin nicht weit entfernt.
Schaut ihr bitte nochmal drauf: http://mikdoe.lima-city.de/test_klappbox.html

Nur zwei Fragen:
1. Wie bekomme ich die <hr> und den roten Kasten UNTER den blauen Kasten?
2. Wie schaffe ich es, den blauen Kasten mit der vollen Breite auszustatten, ohne dass bei width:100% ein Scrollbalken entsteht?

Danke
 
Hat hierzu keiner eine Idee?
Ich weiß nicht mehr, wo ich ansetzen soll.
Oder ist das auch mit einer table nicht so lösbar?
 
miniA4kuser schrieb:
Warum machst du es denn nicht so wie bei deiner Menüanimation?
Zum Vergrößern anklicken....
Weil ich garnicht kapiere, was da läuft. Manche Dinge gehen mir im Moment zu tief. Da finde ich mich mal rein, wenn mehr Zeit dafür ist.

miniA4kuser schrieb:
Sollte dann doch so wie bei diesem Beispiel funktionieren.
Zum Vergrößern anklicken....
Das ist ja genial.
Nur mit dieser einen Zeile jQuery('#wrapper').height(jQuery('#wrapper').height() + 'px'); läuft das?
Was macht denn diese Zeile überhaupt?
 
mikdoe schrieb:
Nur mit dieser einen Zeile jQuery('#wrapper').height(jQuery('#wrapper').height() + 'px'); läuft das?
Was macht denn diese Zeile überhaupt?
Zum Vergrößern anklicken....

Das umgebende DIV benötigt eine gewisse Höhe, welche den Text anzeigt, wenn die Tabelle "einzeilig" ist. Diese soll sich ja nicht ändern, wenn die Tabelle mehr Zeilen bekommt. Also benötigt dieses DIV eine feste Höhe. Entweder per CSS-Angabe oder mit eben dieser einen Zeile.
Mit [Query('#wrapper').height()] kannst du die Höhe eines Elements auslesen oder festlegen. Heist also #wrapper-Höhe = #wrapper-Höhe + 'px'
Es wird die momentane Höhe ausgelesen und dem Element als neue feste Höhe zugwiesen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben