nicht angemeldet
Liebes Forum,
Ich habe ein CSS-Layout-Problem. Ich habe 3 ineinander verschachtelte Float-DIVs in "L"-Form:
AAA BBBB CCCCCCCC
AAA BBBB CCCCCCCC
AAA BBBB CCCCCCCC
AAA BBBB CCCCCCCC
BBBB CCCCCCCC
BBBBBBBBB CCCCCCCC
BBBBBBBBB CCCCCCCC
BBBBBBBBB CCCCCCCC
CCCCCCCC
CCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCC
ich möchte C um B um A fliessen lassen. In A, B und C ist Fliesstext im Blocksatz, also ":justified". Getestet in Opera, FF, Mozilla und IE6.
Alles OK, ausser IE. Ich versuche das Problem zu beschreiben:
Das Layout ist "liquid", ausser A alles in Prozent der Screenbreite, ich hoffe man kann schon erkennen weswegen der Name des Themas: "L-Flip-Float"
Es kommen jetzt 2 Screenshots, beide OK in ALLEN von mir getesteten Browsern. Ich hoffe ich krieg das jetzt hin mit den Bildern hier, evtl. die URL eintippen, also zweimal, in verschiedenen Fenstergrössen/-breiten:
Wenn man jetzt das erste Bild, also das Fenster;-), schrumpft, sollen 2 Sachen passieren:
1. C(gelbes L) und B(rotes L) sollen in der Breite schmaler werden, A(blauer Kasten) hat eine festgelegte Pixelbreite.
2. Und ausserdem, weder B(rot) noch C(gelb) sollen schmaler werden können als der blaue A-Kasten.
Das funktioniert auch so, also richtig, in allen Testkandidaten. Innerhalb des roten und des gelben "L"s marschiert der Fliesstext in geordnetem Blocksatz korrekt um die Ecken. Und wenn man das Browserfenster verschmälert ergibt sich, jedenfalls bis zu einer gewissen Minimal-Breite, auch immer dasselbe GESUNDE Bild, und soweit in allen Browsern auch noch identisch:
Leider, jetzt, kommt doch noch ein Problem:-( Wenn ich das Fenster noch ein bischen mehr verschmälere, bleiben die gewünschten Minimalbreiten immer erhalten, nur nicht im IE. Ich hoffe man kann das Bild sehen:
Obwohl das rote "L-Float" noch genauso breit ist wie es soll, so breit wie die blaue A-Box, auch im IE, das "Null eins zwei drei..." wird trotzdem schmaler. Und zwar NUR im IE. Ich will aber dass es immer mindestens so breit bleibt wie die blaue A-Box obendrüber.
Das ist das Problem.
Ich habe viel, und jetzt tagelang, probiert, und die bunten Streifen geben Zeugnis. Ich weiss nicht mehr weiter. Ich ärgere mich nur noch ein bischen. Ich bin matt. Was ich auch probiert habe: Im IE wird der rote Fliesstext zu früh umgebrochen, und NUR dort anscheinend.
Bevor ich noch den Quelltext rüberreiche, sei es gestattet, dass ich meine Fragen formuliere:
1. Funktioniert mein Ansatz wenigsten, wenn schon nicht in IE6, denn doch in IE7?
2. Weiss jd. weiter, welche IE-Bugs sich hier evtl. bemerkbar machen könnten?
3. Gibt es überhaupt Hoffnung auf eine Lösung im IE6? Wenn man meine DIVs anders verschachtelt vielleicht? Oder im CSS? Oder egal was, wenigstens so ähnlich wie ein L? Und zuletzt vielleicht: Könnte man wenigstens sagen, dass es für den IE6 erwiesenermassen keine Lösung gibt, was man eben nicht ändern kann?
So, jetzt der Quelltext. Erstmal ein Link, wo man den "L-Flip-Float" in Aktion testen kann, nicht im Vollbildfenster ;-), wenn der Link nicht geht evtl. tippen:
http://zinux.de/selfhtml/css_lego/myflow.html
Hier gibt's den QUELLCODE eben verlinkter Datei "myflow.html" farbig formatiert:
http://zinux.de/selfhtml/css_lego/myflow_src.html
Falls der Link nicht klappt derselbe Quelltext nochmal, ein zweites Mal, gleich nach dem Scherenstrich, und nach meinem Danke für die renovierte Texteingabe( Schön! Auffällig && trotzdem nichtstörend, optimal gelungen jetzt, m.E. )
Also, viele freundliche Abschiedsgrüsse aus Kaiserslautern,
Christian
------8< ------------8< -------------8< ---------------------8< ------------8< -------------8< ---------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS-Lego: Der "L-Flip-Float"</title>
<style type="text/css">
/*
Der "L-Flip-Float"
AAA-BBBB-CCCCCCCC
AAA-BBBB-CCCCCCCC
AAA-BBBB-CCCCCCCC
AAA-BBBB-CCCCCCCC
BBBBBBBB-CCCCCCCC
BBBBBBBB-CCCCCCCC
BBBBBBBB-CCCCCCCC
CCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCC
*/
html{ width:100%; height:100%; margin:0px; padding:0px; border:0px; }
body{ width:100%; height:100%; margin:0px; padding:0px; border:0px;font-size:14px; font-family:'monospaced Century Gothic';
vertical-align:baseline; background:transparent;
}
div{
border:0px solid #009900;
text-align:justify;
font-weight:bold;
margin:0px; padding:0px; border:0px;
}
.inner{ width:100% }
.Double_flippedL_Float div {
/*background-image:url('./millimeter.png'); */
font-weight:bold; font-size:18px; line-height:20px;
}
</style>
</head>
<!-- ================================================================================================================================ -->
<body style="margin:0px; background:black; width:98%">
<div class="Double_flippedL_Float" style="background:white; min-width:150px; overflow:visible; width:100%;">
<div style="float:left; width:50%; text-align:justify; background-color:green; min-width:150px; ">
<div class="inner" style="min-width:150px;text-align:right;position:relative; ">
<div style="float:left; padding-right:0px; width:150px; min-width:150px; max-width:150px;">
<div style="background-color:#9cceff; /*-- B-L-U-E --*/ color:#000066; text-align:left;
min-width:150px; width:150px; max-width:150px; overflow:hidden;
">
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 6 7 8 9
<br><img src="./px.gif" width="1" height="1" alt="" style="clear:left;height:0px; overflow:hidden; min-width:150px; /*display:none;*/
"></div>
</div>
<div id="red" style="background-color:#f78ca5; /*-- R-E-D --*/ color:#990000;
min-width:150px; display:block;
/*--- 4IEonly: ---*/ /* margin-left:-150px; padding-left:150px; overflow:hidden; */
">
<span style="background:#d76c85; border-right:1px solid red; border-top:1px solid #993333;">Null eins zwei drei vier fuenf sechs sieben acht neun null eins zwei drei vier fuenf sechs sieben acht neun zehn
0123456789012</span>
<!-- HIER TRAT DAS PROBLEM GERADE EBEN IN ERSCHEINUNG , IE<7 KANN KEINE MIN-WIDTH,
Die rote Box bleibt zwar so breit wie der blaue Kasten, nur die Inline-Boxes schrumpfen ( o.a. 50% entsprechend? )
-->
<!-- Jetzt, hilft aber nicht, eine Box breit wie blaue Box( 150px ), + 1 Break( wg. justify ), trotzdem: KEINE Mindestbreite d. roten Kasteninhalts. -->
<div style="height:10px; width:150px; overflow:hidden; background:red;
"><img src="./px.gif" width="150" height="1" alt="" style="background:red; /*display:none;*/
"><br style="font-size:1px; line-height:1px;"><!--div style="height:1px; display:none;
overflow:hidden; width:150px;">01234567890123
--></div>
</div>
<div style="clear:left; background-color:#0033ff; /*-- C-Y-A-N UNVISIBLE --*/ width:100%; color:cyan;
line-height:5px; font-size:5px; overflow:visible; height:10px; width:100%; text-align:right;
"><!-- padding-left=Breite d. linken Rands von Blau, dto. right
--><img src="./px.gif" width="150" height="10" alt="" style="clear:left; /*-- Y-E-L-L-O-W --*/height:5px; background:yellow;
/*overflow:hidden; *//*display:none; */
min-width:150px; position:relative; right:0px;
"><!-- lastrow_of_red, gruener Balken
--></div>
Abcdefghij
</div>
</div>
<div style="background-color:#ffef9c; /*yellow*/ color:#cc6600; display:block;overflow:visble; margin-left:0px;
"><!-- padding-left=Breite d. linken Rands von Gelb, dto. right -->
A AA 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789
01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 01234 56789 ZZ Z
<!-- img src="./px.gif" width="800" height="10" alt="" style="background:red;" -->
</div>
<div style="background-color:yellow; clear:both;">
Lastrow_yellow
</div>
</div>
</body></html>