nicht angemeldet
Elemente innerhalb von Ebenen (divs)
Hi Leute,
hier eine Frage für echte CSS-Freaks unter Euch: Gibt es eine Möglichkeit, zwei Elemente (Text,Bild...) INNERHALB einer Ebene (div) so NEBENEINANDER zu positionieren, dass der eine linksbündig, der andere rechtsbündig erscheint??? (die äußere Ebene ist flexibel, mit % formatiert)
Sowas hat man früher mit Tabellen und mittels Direktformatierung (align) ganz easy hinbekommen - per CSS scheint es ein Problem zu sein. "Float" hat align abgelöst, tut aber nicht dasselbe.
Nennen wir die beiden "inneren" Elemente mal "links" und "rechts". Definiert man beide als Klassen und verpasst man ihnen ein float:left bzw. float:right, dann ist das Ergebnis im MSIE befriedigend. Im Netscape 6 jedoch fallen mit float positionierte Elemente INNERHALB eines umgreifenden Bereichs aus diesem heraus. (Keine Ahnung, welches Verhalten standardgemäß ist)
Hat jemand eine Lösung???
Beim Umstieg von LayOut-Tabellen auf CSS-Divs scheint es ganz allgemein ein Problem zu sein, das Verhalten von Ebenen/Abschnitten innerhalb von Divs vorauszusehen bzw. im Griff zu behalten. Wie war das doch bei Tabellenzellen noch nett! Nie kamen Elemente aus der Zelle heraus, allenfalls mal war ein Wort für die Zelle zu lang und ragte nach rechts über den Rand. Die Divs dagegen machen was sie wollen - so kommts mir jedenfalls vor.
Entnervte Grüße
Claudia
-
Hi Leute,
hier eine Frage für echte CSS-Freaks unter Euch: Gibt es eine Möglichkeit, zwei Elemente (Text,Bild...) INNERHALB einer Ebene (div) so NEBENEINANDER zu positionieren, dass der eine linksbündig, der andere rechtsbündig erscheint??? (die äußere Ebene ist flexibel, mit % formatiert)
Sowas hat man früher mit Tabellen und mittels Direktformatierung (align) ganz easy hinbekommen - per CSS scheint es ein Problem zu sein. "Float" hat align abgelöst, tut aber nicht dasselbe.
Nennen wir die beiden "inneren" Elemente mal "links" und "rechts". Definiert man beide als Klassen und verpasst man ihnen ein float:left bzw. float:right, dann ist das Ergebnis im MSIE befriedigend. Im Netscape 6 jedoch fallen mit float positionierte Elemente INNERHALB eines umgreifenden Bereichs aus diesem heraus. (Keine Ahnung, welches Verhalten standardgemäß ist)
Hat jemand eine Lösung???
Beim Umstieg von LayOut-Tabellen auf CSS-Divs scheint es ganz allgemein ein Problem zu sein, das Verhalten von Ebenen/Abschnitten innerhalb von Divs vorauszusehen bzw. im Griff zu behalten. Wie war das doch bei Tabellenzellen noch nett! Nie kamen Elemente aus der Zelle heraus, allenfalls mal war ein Wort für die Zelle zu lang und ragte nach rechts über den Rand. Die Divs dagegen machen was sie wollen - so kommts mir jedenfalls vor.
Entnervte Grüße
Claudia
Versuche es mal mit text-align:right; und text-align:left:
Ist zwar zweckentfremdet, da hier alignement(Positionierung in Divs) angebracht wäre, aber es müßte funktionieren, da alignement von vielen Brausen nicht interpretiert wird.
Ich habe es explizit für einen derartigen Fall noch nicht getestet, in ähnlich gelagerten Fällen hat es aber funktioniert.
Mußt du halt ausprobieren.Gruß
Kurt
-
Hi Kurt,
das hab ich ausprobiert, werde es auch nochmal in diesem konkreten Fall tun, aber es kann schon rein logisch nicht funktionieren, denn:
"text-align" beschriebt die Ausrichtung von Inhalten INNERHALB eines Bereichs (div, span, p..), und NICHT die Ausrichtung des Bereichs selber, also seine Platzierung innerhalb eines ÜBERGEORDNETEN Bereichs/Containers.
Trotzdem danke für die schnelle Reaktion!
-
Hi Kurt,
das hab ich ausprobiert, werde es auch nochmal in diesem konkreten Fall tun, aber es kann schon rein logisch nicht funktionieren, denn:
"text-align" beschriebt die Ausrichtung von Inhalten INNERHALB eines Bereichs (div, span, p..), und NICHT die Ausrichtung des Bereichs selber, also seine Platzierung innerhalb eines ÜBERGEORDNETEN Bereichs/Containers.
Trotzdem danke für die schnelle Reaktion!
Uups, sorry, dann hab ich wohl dein Problem falsch verstanden.
Gruß
-
Moin, Claudia!
"text-align" beschriebt die Ausrichtung von Inhalten INNERHALB eines Bereichs (div, span, p..), und NICHT die Ausrichtung des Bereichs selber, also seine Platzierung innerhalb eines ÜBERGEORDNETEN Bereichs/Containers.
Ich denke, du hast die Funktion von float noch nicht so richtig erfaßt. Im Prinzip ist float nämlich genau deine Lösung.
<div>
<div style="float:left"><img src="..."></div>
hier Text....
</div>So gehts eigentlich. Siehe auch das Beispiel zu float in SelfHTML.
- Sven Rautenberg
-
-
Hallo!
Versuche es mal mit text-align:right; und text-align:left:
Ist zwar zweckentfremdet, da hier alignement(Positionierung in Divs) angebracht wäre, aber es müßte funktionieren, da alignement von vielen Brausen nicht interpretiert wird.
Ich habe es explizit für einen derartigen Fall noch nicht getestet, in ähnlich gelagerten Fällen hat es aber funktioniert.mit text-align kann man keine Block-Level-Elemente, wie div eines ist, ausrichten. Der Microsoft Internet Explorer macht sowas wohl, aber es ist falsch und unwahrscheinlich, dass man damit auch in Zukunft Erfolg haben wird.
Übrigens habe ich gerade die FAQ hier vom Forum gelesen, da steht auch etwas drin, dass man nicht unbedingt unnötig zitieren soll, nur so als Tipp.
Tschuess
Steve
-
Moin!
Versuche es mal mit text-align:right; und text-align:left:
Ist zwar zweckentfremdet, da hier alignement(Positionierung in Divs) angebracht wäre, aber es müßte funktionieren, da alignement von vielen Brausen nicht interpretiert wird.
FYI: Die Definition "alignment" ist aus den CSS-Spezifikationen verschwunden, also gibts alignment nicht (mehr). Es sollte angeblich aber identische Wirkung wie text-align haben.
Please update your Brain. ;)
- Sven Rautenberg
-
-
Hallo!
Nennen wir die beiden "inneren" Elemente mal "links" und "rechts". Definiert man beide als Klassen und verpasst man ihnen ein float:left bzw. float:right, dann ist das Ergebnis im MSIE befriedigend. Im Netscape 6 jedoch fallen mit float positionierte Elemente INNERHALB eines umgreifenden Bereichs aus diesem heraus. (Keine Ahnung, welches Verhalten standardgemäß ist)
Hat jemand eine Lösung???
Vielleicht mal zu der Sache einen Link zu einer Beispielseite angeben oder etwas Quelltext posten. Das Problem an sich ist in etwa klar, nur möchte ich jetzt nicht alles neu tippen, wo am Ende vielleicht nur eine Kleinigkeit zu ändern ist.
Tschuess
Steve
-
hier eine Frage für echte CSS-Freaks unter Euch: Gibt es eine Möglichkeit, zwei Elemente (Text,Bild...) INNERHALB einer Ebene (div) so NEBENEINANDER zu positionieren, dass der eine linksbündig, der andere rechtsbündig erscheint??? (die äußere Ebene ist flexibel, mit % formatiert)
Nennen wir die beiden "inneren" Elemente mal "links" und "rechts". Definiert man beide als Klassen und verpasst man ihnen ein float:left bzw. float:right, dann ist das Ergebnis im MSIE befriedigend. Im Netscape 6 jedoch fallen mit float positionierte Elemente INNERHALB eines umgreifenden Bereichs aus diesem heraus. (Keine Ahnung, welches Verhalten standardgemäß ist)
Letzteres. Den sehr gut und verständlich geschriebenen CSS2-Standard findest du unter http://www.w3.org/TR/REC-CSS2.
Um deinen übergeordneten Block in der Höhe anzupassen, mußt du unter den beiden <div>s einen dritten setzen, und zwar folgendermaßen:
<div style="border:2px solid black">
<div style="float:left;border:2px dotted green">Linker Block</div>
<div style="float:right;border:2px dotted red">Rechter Block</div>
Text in der Mitte.
<div style="clear:both"></div>
</div>Mit dem clear:both zwingst du Block 3 unter die beiden float-Blöcke, und da Block 3 innerhalb vom Elementfluss des "großen Ganzen" liegt, passt sich auch die Gesamthöhe an.
Sicherlich irgendwo eine etwas unglückliche Konstruktion, aber das lässt sich leider nicht verhindern.Noch'n Tipp zu einem ebenso fürchterlichen, verwandten Problem:
Der IE berechnet die Breite von Elementen falsch. Falls du deine beiden Blöcke links und rechts auf die Breite 50% setzt, werden sie im IE nebeneinander dargestellt, Opera und Netscape 6 zeigen sie aber (normalerweise) untereinander an.
Der Grund dafür ist, daß der IE die width-Angabe als Breite des gesamten Elements nimmt, tatsächlich ist das aber nur die des Inhalts. Das bedeutet, daß zu width noch padding, border und margin hinzugezählt werden müssen. Eine Box mit der Angabe "width:50%;margin:20px" innerhalb eines 300 Pixel breiten Elements ist also 150+20=170 Pixel breit, nicht 150 (wie im IE). Deshalb passen zwei 50%-Floats auch nicht so ohne weiteres nebeneinander.
Da es keine Möglichkeit gibt, etwas in der Art "width:50%-20px" zu machen, ist die IMHO beste Lösung, noch'n <div> in das float-<div> reinzusetzen.Beim Umstieg von LayOut-Tabellen auf CSS-Divs scheint es ganz allgemein ein Problem zu sein, das Verhalten von Ebenen/Abschnitten innerhalb von Divs vorauszusehen bzw. im Griff zu behalten. Wie war das doch bei Tabellenzellen noch nett! Nie kamen Elemente aus der Zelle heraus, allenfalls mal war ein Wort für die Zelle zu lang und ragte nach rechts über den Rand. Die Divs dagegen machen was sie wollen - so kommts mir jedenfalls vor.
Das liegt leider zum Teil auch an der Unfähigkeit -aller- Browserhersteller, CSS2 vollständig bzw. korrekt zu unterstützen.
Gruß,
soenk.e-
Hallo ihr,
Noch'n Tipp zu einem ebenso fürchterlichen, verwandten Problem:
Der IE berechnet die Breite von Elementen falsch. Falls du deinezu diesem IE (5.X) -Bug gibt es einen sehr schoenen Workaround unter:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.htmlder 6er IE solls richtig koennen, konnte dies aber nicht testen.
viel spass beim testen ...tschau
scribble -
Danke soenk.e
, das muss ich testen, hört sich interessant an.Zum zweiten "leidigen" Problem: Das kenn ich schon und umschiffe es, indem ich "umgreifende Bereiche" immer ohne margin/padding und border formatiere. Für die drin liegenden Elemente formuliere ich dann die richtigen Abstände zu den Rändern. Ist auch nicht so doll, weil man dadurch auf die Border-Möglichkeiten verzichtet - brauch ich Ränder, mnehm ich dann eben ein Altmodisches Backgroundbild für so einen Bereich (geht natürlich nur nach links hin).
So long und danke nochmal
Claudia
-