nicht angemeldet
alternative Darstellung bei optionalem Bereich
'Nabend.
Ich möchte zwei Bereiche einer Seite nebeneinander darstellen, was sich mit Floats natürlich prima umsetzen läßt. So weit so unspektakulär.
Einer der Bereiche wird, je nach Wetterlage sozusagen, vom erzeugenden Skript ins HTML-Dokument geschrieben und soll sich dann in der Breite mit dem fixen Bereich den Platz teilen. Ist der optionale Bereich nicht vorhanden, soll der fixe Bereich sich über die gesamte Breite erstrecken.
Meine Umsetzung sieht folgendermaßen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>Optionaler Bereich</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
div { background-color: #eda; margin: 0px; }
h2, p { font-size: 1em; margin: 0px; padding: 0px; }
#optional + #fix {
margin-left: 50%;
}
#optional {
float: left;
width: 49%;
}
</style>
</head>
<body>
<div id="optional">
<h2>Optionaler Bereich</h2>
<p>Wenn nötig, wird dieser Bereich ins Dokument eingefügt. Andernfalls herrscht an dieser Stelle im Quelltext gähnende Leere.</p>
</div>
<div id="fix">
<h2>Fixer Bereich</h2>
<p>Dieser Bereich ist immer vorhanden.</p>
<p>Teilt er sich den Platz mit dem optionalen Bereich, soll der in der Breite verfügbare Platz zwischen beiden aufgeteilt werden. Andernfalls dehnt sich der fixe Bereich über die ganze Breite aus.</p>
</div>
</body>
</html>
Da #fix i.d.R mehr Inhalt hat als #optional, muß ersterer zwingend ein margin-left erhalten, wenn beide Bereiche nebeneinander stehen. Padding scheidet an dieser Stelle aus, da sich auch die Hintergründe beider Bereiche unterscheiden sollen. Ohne margin-left beginnt #fix ja am linken Rand des Elternelements – das soll nicht so sein.
Problematisch an obiger Lösung ist eigentlich nur die Tatsache, daß die IEs den "Adjacent Sibling Selector" nicht kennen. Nun bin ich auf der Suche nach einer alternativen Umsetzung in CSS, die auch in den IEs funktioniert. Hat jemand eine zündende Idee? Ich sehe eigentlich bloß noch Inline-Styles für #optional als Möglichkeit.
-
n'abend,
wenn du sowieso schon im HTML-Source änderst, wieso dann nicht auf folgende Art und Weise?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <html> <head> <title>Optionaler Bereich</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> div { background-color: #eda; margin: 0px; } h2, p { font-size: 1em; margin: 0px; padding: 0px; } #split #fix { margin-left: 50%; } #split #optional { float: left; width: 49%; } </style> </head> <body> <!-- wir kapseln die beiden divs in einem weiteren div um für einen "selektor" zu sorgen --> <div id="split"> <div id="optional"> <h2>Optionaler Bereich</h2> <p>Wenn nötig, wird dieser Bereich ins Dokument eingefügt. Andernfalls herrscht an dieser Stelle im Quelltext gähnende Leere.</p> </div> <div id="fix"> <h2>Fixer Bereich</h2> <p>Dieser Bereich ist immer vorhanden.</p> <p>Teilt er sich den Platz mit dem optionalen Bereich, soll der in der Breite verfügbare Platz zwischen beiden aufgeteilt werden. Andernfalls dehnt sich der fixe Bereich über die ganze Breite aus.</p> </div> </div> </body> </html>Ich gehe nicht davon aus, dass dies einer angestrebten Lösung entspricht. Wenn du jedoch ohne großen Aufwand dieses kapselnde <div> hinzufügen kannst, wird das wohl eine der schnelleren Methoden sein...
weiterhin schönen abend...
--
wer braucht schon großbuchstaben?
sh:( fo:# ch:# rl:° br:> n4:& ie:{ mo:} va:) de:] zu:} fl:{ ss:? ls:[ js:|-
Hallo globe.
Ich gehe nicht davon aus, dass dies einer angestrebten Lösung entspricht.
Du hast recht, begeistert bin ich von dieser Lösung nicht. Aber sie hat mich an etwas erinnert, das ich an anderer Stelle schon benutzt habe:
Statt ein zusätzliches DIV einzufügen, erhält einfach der BODY eine entsprechende ID. Das CSS sieht dann prinzipiell genauso aus wie in deinem Beispiel.
Hmm, na das ist doch schon mal was! Vielleicht hat jemand noch eine ganz andere Variante, die sogar ohne weitere Änderungen am HTML-Code auskommt (vom einzufügenden #optional mal abgesehen).
--
Once is a mistake, twice is jazz.
-