nicht angemeldet
Höhe von Containern
Guten Morgen allerseits,
ich habe versucht, ein CSS-Lay-out zu erstellen. Leider bereitet mir die Höhe der (so glaube ich) so genannten Container noch Probleme.
In Farbe gibt's das Ganze unter http://www.gidoo.de/julius/neu/2.html.
Schematisiert sieht der Abschnitt, den es betrifft (unter "Bienvenue" und über "asdf dasdf..."), so aus:
++++++++++++++++++++++++++++++++++++++++++++
-
Container 1/2 umschließender Container +
-
------------------- ################### +
-
- Container 1 - # Container 2 # +
-
- - # # +
-
- - ################### +
-
- - +
-
- - +
-
- - +
-
------------------- +
++++++++++++++++++++++++++++++++++++++++++++ -
ist in Realität div class="text"
-/# sind in Realität div class="zwei" id="links" bzw. id="rechts"
Ich möchte nun, dass Container 1 und 2 beide gleich lang sind. Dies soll jedoch keine festgelegte Höhe sein (also nicht etwa 350px). Wenn in Container 1 der Text länger wird, soll auch Container 2 dementsprechend länger werden. Der umgekehrte Fall, dass sich Container 1 an Container 2 orientiert ist so gut wie irrelevant.
Mein Frage ist nun: Wie bekomme ich es hin, dass Container 2 genauso lang wie Container 1 ist? Mit "height:100%" funktioniert es nicht und auch Recherchen innerhalb von "SELFHTML" und "SELFHTML aktuell" haben nicht zum gewünschten Ergebnis geführt.
Für jede Überlegung und jeden Vorschlag, die sachdienlich sein könnten, danke ich euch im Voraus.
Euch nen schönen Tag.
Julius
-
Hallo Julius
In Farbe gibt's das Ganze unter http://www.gidoo.de/julius/neu/2.html.
Färbe doch testweise auch mal die Hintergründe von deinen Containern, oder setz Rahmen drum sonst kann man das nicht beurteilen, ob es funktioniert.
Mein Frage ist nun: Wie bekomme ich es hin, dass Container 2 genauso lang wie Container 1 ist? Mit "height:100%" funktioniert es nicht
Wenn du aber beide Container immer auf height:100% setzt, müsste das durchaus funktionieren (in den meisten Browsern)
Wenn allerdings der erste Container nicht immer 100% haben soll, dann setz den zweiten doch einfach in den ersten und verpass ihm dort die 100%, damit er sich innerhalb des ersten auf 100% Höhe ausdehnt (Padding und Margin bitte auch beachten).
Wenn du sie unverschachtelt nebeneinander stellst, bleibt dir wohl nicts anderes übrig, als mit JavaScript zu arbeiten, indem du nachträglich die Höhe des zweiten Containers auf die Höhe des ersten setzt, die du mit document.getElementById('ersterContainer').offsetHeight auslesen kannst.
http://de.selfhtml.org/javascript/objekte/all.htm#offset_height
Gruß Gernot
-
Hallo Gernot,
Färbe doch testweise auch mal die Hintergründe von deinen Containern, oder setz Rahmen drum sonst kann man das nicht beurteilen, ob es funktioniert.
Der rechte Container ist grau unterlegt.
Wenn du aber beide Container immer auf height:100% setzt, müsste das durchaus funktionieren (in den meisten Browsern)
Das tut es ja leider nicht. Ich hab's ausprobiert.
... dann setz den zweiten doch einfach in den ersten und verpass ihm dort die 100%, damit er sich innerhalb des ersten auf 100% Höhe ausdehnt (Padding und Margin bitte auch beachten).
Vom Grunde her ist ja unerheblich, ob ich Container 2 in 1 oder in den umschließenden Container packe. In beiden Fällen kommen theoretisch bei 100% auch 100%, praktisch aber nicht.
Wenn du sie unverschachtelt nebeneinander stellst, bleibt dir wohl nicts anderes übrig, als mit JavaScript zu arbeiten, indem du nachträglich die Höhe des zweiten Containers auf die Höhe des ersten setzt, die du mit document.getElementById('ersterContainer').offsetHeight auslesen kannst.
Ich habe a) von JavaScript keine Ahnung und b) ist der Aufwand aus meiner Sicht im Verhältnis zum Ergebnis unverhältnismäßig hoch.
Nichtsdestotrotz vielen Dank für deine Vorschläge.
Grüße
Julius-
Hallo Julius,
Wenn du aber beide Container immer auf height:100% setzt, müsste das durchaus funktionieren (in den meisten Browsern)
Das tut es ja leider nicht. Ich hab's ausprobiert.Doch, nach meinen Tests funktioniert das
<div style="height:100%;background:#FF0000" > </div>
in allen neueren Browsern, wie Mozilla 1.6, Netscape 7.1, MSIE 6.0, Opera 7.54. (unter Windows 98)
Kann es sein, dass du eine ältere Opera-Version oder Netscape 4.X oder möglicherweise ein Linux oder Mac-Betriebssystem zum testen benutz?
Gruß Gernot
-
Hallo Julius nochmal,
möglicherweise nimmst du auch nicht die richtige DTD oder musst an den Elternelementen was ändern.
http://www.carsten-protsch.de/zwischennetz/doctype/prozent.html
Gruß Gernot
-
Hallo Gernot,
wenn ich ein div, dessen direktes Elternelement body ist, nehme, dann klappt es auch. Aber, warum auch immer, nicht, wenn es innerhalb eines anderen divs ist.
Ich benutze IE 6.0.28...., Mozilla Firefox 0.9.3 und Opera 7.23.
Grüße
Julius
-
-
-
-
Hallo Julius,
ich habe versucht, ein CSS-Lay-out zu erstellen. Leider bereitet mir die Höhe der (so glaube ich) so genannten Container noch Probleme.
Also, wenn ich mir die Seite so anschaue, wäre die einfachste Lösung dafür sicherlich eine Tabelle.
<//http://de.selfhtml.org/navigation/html.htm#tabellen>cu, Christoph
-
Hallo Christoph,
die einfachste Lösung wäre es. Ich möchte hier jedoch bewusst auf Tabellen verzichten, da ich die Möglichkeit haben will einfach durch das Ändern der CSS-Datei die rechte und die linke Spalte zu tauschen, ohne jede Seiten zu verändern - wie es bei einer Tabelle der Fall wäre.
Grüße
Julius
-
-
Hallo,
++++++++++++++++++++++++++++++++++++++++++++
- Container 1/2 umschließender Container +
- ------------------- ################### +
- - Container 1 - # Container 2 # +
- - - # # +
- - - ################### +
- - - +
- - - +
- - - +
- ------------------- +
++++++++++++++++++++++++++++++++++++++++++++
Normalerweise sollte das so gehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Zweispaltig</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#zweispalten {position:relative; border:1px solid black; background-color:#AD00FF;}
#links {width:49%; border:1px solid black; background-color:#00AEAD;}
#rechts {position:absolute; top:0; bottom:0; right:0; width:49%; border:1px solid black; background-color:#FF7D7B;}
-->
</style>
</head>
<body>
<h1>Vor der Teilung</h1><div id="zweispalten">
<div id="links">
<h1>Container 1</h1>
<p>Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. Text im Container 1. </p>
</div>
<div id="rechts">
<h1>Container 2</h1>
<p>Text im Container 2.</p>
</div>
</div><h1>Nach der Teilung</h1>
</body>
</html>Je mehr Text in #links steht, um so höher wird auch #zweispalten und damit auch #rechts, welches durch bottom:0 dazu gezwungen werden sollte. Aber natürlich macht der IE das nicht richtig. Die meisten tricksen dann damit, dass sie #zweispalten die selbe Hintergrundfarbe wie #rechts geben. Dann sieht es so aus, als würde #rechts mitwachsen.
viele Grüße
Axel
-
Hallo nochmal,
ich habe jetzt auf eine Notlösung zurückgegriffen: Hintergrundbild für den die Container 1/2 umschließenden Container.
++++++++++++++++++++++++++++++++++++++++++++
- Container 1/2 umschließender Container +
- ------------------- ################### +
- - Container 1 - # Container 2 # +
- - - # # +
- - - ################### +
- - - +
- - - +
- - - +
- ------------------- +
++++++++++++++++++++++++++++++++++++++++++++
Ist zwar nicht die elegantes Lösung.
Doch CSS unterstützt keine andere in diesem Sinne.Vielen Dank für eure Vorschläge.
Grüße
Julius-
Hallo.
ich habe jetzt auf eine Notlösung zurückgegriffen: Hintergrundbild für den die Container 1/2 umschließenden Container.
Damit du die Breiten etwas flexibler handhaben kannst, empfehle ich dir statt des zweifarbigen Hintergrundbildes ein einfarbiges und dessen Verschieben nach rechts um die Breite des linken Containers. Damit musst du zumindest keine neue Grafik erstellen, wenn du die Breite des Containers verändern oder sogar variabel gestalten willst.
MfG, at