Box als Inline Element
0 0 
Der Martin
0 
Tim Tepaße
Box als Inline Element
Hallo zusammen,
ich möchte über div Elemente ein layout erzeugen, bei dem abhängig von der Browserfensterbreite Textboxen nebeneinander stehen wenn genug Platz ist und untereinander wenn wenig Platz ist.
<div id="aussenrahmen" style="position:absolute; top:200; width:100%; height:600px; z-index:1;; overflow: auto; layer-background-image: url(250.jpg); border: 1px none #000000">
<div id="links" style="position:relative; display:inline; min-width:250px; min-height:250px; height:250px; overflow: auto">Links</div>
<div id="rechts" style="position:relative; display:inline; min-width:250px; min-height:250px; height:250px; overflow: auto; ">Rechts</div>
</div>
Dazu habe ich die zwei Boxen in einen Rehmen gepackt.
Folgende Probleme:
Im IE8 verhält sich das Layout wie gewollt: Wenn das Fenster schmaler als 500px wird flippt die rechte box eine "Zeile" tiefer.
Im Firefox4 wird die Breitenangabe überhaupt nicht berücksichtigt und der enthaltene Text fließt zeichenweise in die nächste "Zeile".
[habe mal Zeile geschrieben - ist klar ist die selbe Zeile aber eben eine Etage tiefer]
thx
-
Grüße,
1)und die fehlerkonsole die selbst FF haben sollte ist leer? gaaanz leer?
2)stell das ganze online zum untersuchen, wenn du fragen hast, copypasten ist man meist zu faul^^
MFG
bleicher -
Hallo,
ich möchte über div Elemente ein layout erzeugen, bei dem abhängig von der Browserfensterbreite Textboxen nebeneinander stehen wenn genug Platz ist und untereinander wenn wenig Platz ist.
die typische Lösung dafür ist float, eine gute Alternative ist display:inline-block.
<div id="aussenrahmen" style="position:absolute; top:200; width:100%; height:600px; z-index:1;; overflow: auto; layer-background-image: url(250.jpg); border: 1px none #000000">
Der Wert für "top" ist ungültig, und warum position:absolute? Mir ist außerdem layer-background-image fremd - aber ich sehe gerade, das ist etwas Neues aus CSS3. Also gut.
<div id="links" style="position:relative; display:inline; min-width:250px; min-height:250px; height:250px; overflow: auto">Links</div>
Wozu hier position:relative, wenn du keine Position bzw. keinen Offset angibst? Die Angabe ist damit zwar gültig, aber wirkungslos. Warum du height und min-height auf denselben Wert setzt, erschließt sich mir auch nicht.
<div id="rechts" style="position:relative; display:inline; min-width:250px; min-height:250px; height:250px; overflow: auto; ">Rechts</div>
Dito.
Dazu habe ich die zwei Boxen in einen Rehmen gepackt.
Der ist für das Verhalten, das du beschreibst, zunächst irrelevant, solange er sowieso 100% der verfügbaren Breite einnimmt. Allein display:inline (oder besser inline-block) bringt schon das, was du als Anforderung beschrieben hast.
So long,
Martin--
Realität ist eine Illusion, die durch Unterversorgung des Körpers mit Alkohol entstehen kann.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Mir ist außerdem layer-background-image fremd - aber ich sehe gerade, das ist etwas Neues aus CSS3.
Ich verfolge CSS3 recht interessiert, bin noch nie über layer-background-image gestolpert und kann es in den Spezifikationen und Working Drafts nicht recherchieren. Huh?
Wozu hier position:relative, wenn du keine Position bzw. keinen Offset angibst? Die Angabe ist damit zwar gültig, aber wirkungslos.
Die Zuweisung position:relative ohne Offset kann praktisch sein, will man innerhalb des Elementes mit position:absolute arbeiten. Dieses bezieht sich dann nicht mehr auf den viewport sondern eben auf das nächste Elternelement, das als „containing block“ (Auchtung, Fachbegriff) wirkt. Diesen Status erhält das Element eben durch Zuweisung von position:absolute, relative oder fixed.
-
Hallo,
Mir ist außerdem layer-background-image fremd - aber ich sehe gerade, das ist etwas Neues aus CSS3.
Ich verfolge CSS3 recht interessiert, bin noch nie über layer-background-image gestolpert und kann es in den Spezifikationen und Working Drafts nicht recherchieren. Huh?ich habe gestern auch nur oberflächlich gesucht und habe es in "Sekundärquellen" gefunden, das hat mir für den Augenblick genügt. Aber du hast recht, in der offiziellen Spec finde ich auch nichts dazu.
Wozu hier position:relative, wenn du keine Position bzw. keinen Offset angibst? Die Angabe ist damit zwar gültig, aber wirkungslos.
Die Zuweisung position:relative ohne Offset kann praktisch sein, will man innerhalb des Elementes mit position:absolute arbeiten.Ist mir bekannt und geläufig. Ich konnte aber keinen Hinweis darauf erkennen, dass der OP sowas im Sinn hat.
Ciao,
Martin--
Das Leben ist lebensgefährlich und endet meistens tödlich.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin,
Mir ist außerdem layer-background-image fremd - aber ich sehe gerade, das ist etwas Neues aus CSS3.
Ich verfolge CSS3 recht interessiert, bin noch nie über layer-background-image gestolpert und kann es in den Spezifikationen und Working Drafts nicht recherchieren. Huh?ist es auch nicht. Ganz im Gegenteil :-)
ich habe gestern auch nur oberflächlich gesucht und habe es in "Sekundärquellen" gefunden, das hat mir für den Augenblick genügt.
Hier erlebst Du welche Suggestivkraft ein Domainname haben kann.
Lies Dir den Text durch, wundere Dich über die Erwähnung eines mausetoten Browserherstellers. Suche ein wenig weiter, finde unter anderem (mein erstes Suchergebnis beim Suchbegriff layer-background-image) http://www.blooberry.com/indexdot/css/properties/colorbg/lbgimage.htm und begreife, dass es eine Netscape-Erfindung zu Zeiten des Browserkrieges war, die wohl noch früher beerdigt wurde ...
Freundliche Grüße
Vinzenz
-
-
-
