nicht angemeldet
Lego mit CSS: Der "Flipped-L-Float" mit Fliesstext um Ecken
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>
-
Hallo Christian,
- Gibt es überhaupt Hoffnung auf eine Lösung im IE6? ... Oder egal was
ich könnte dir folgendes anbieten.
<style type="text/css">
#red { width:expression(document.getElementById('green').offsetWidth > 150 ? 'auto' : '150px'); }
</style>Die id="green" musst du natürlich noch dem entsprechenden <div> verpassen. Aber vielleicht hat ja noch jemand eine bessere Idee die ohne javascript auskommt.
Grüße,
Jochen
-
Hi,
- Funktioniert mein Ansatz wenigsten, wenn schon nicht in IE6, denn doch in IE7?
ja.
Könnte man wenigstens sagen, dass es für den IE6 erwiesenermassen keine Lösung gibt, was man eben nicht ändern kann?
mit Sicherheit zwar nicht, aber ich würde den IE6 diesen Fehler einfach machen lassen.
freundliche Grüße
Ingo-
Hi,
_________________________________
@Ingo :-),... wenigsten, wenn schon nicht in IE6, denn doch in IE7?
ja.JA?! ♪♫ Si-ie-ben Brüc-ken mußt' er geeh'n, um das miien-width, ♪, ♫zu ver-steh'n … ♫ ♪♫♫
... wenigstens sagen, dass es für den IE6 erwiesenermassen keine Lösung gibt ...?
mit Sicherheit zwar nicht, aber ich würde den IE6 diesen Fehler einfach machen lassen.Ich lass' ihn noch ein bischen _machen_, aber grab' schon mal. Ende! EIN-mal ♪♫ in die Grube, nur die Wurst ♪♫♫♪....:-)).
_________________________________
@Jochen :-),... eine Lösung im IE6? ...
... #minwidth { width:expression(document.getElementById('rotesL').offsetWidth > 150 ? 'auto' : '150px') } ...JS. Hm, :(, dachte ich erst, hab' dann aber doch mal danach gegugglt, und gefunden _bei_ "expression": 2 Lösungen bzgl. min-width, Deine, & noch eine _ohne_ JS.
_________________________________So, _könnte_ reichen, trotzdem;-) während ich jene Grube grub kam ich in allerbeste Stimmung, ♫, und _noch_ einen Tag drangehängt. Sicher noch nicht "sicher", aber _ich_ lass' es mit dem IE6 und dem ursprünglichen Ansatz. Der Vorschlag von Jochen wird umgesetzt, ohne JS, und es wird dann immer noch Lego sein. Und eine DIV-Suppe kübelweise, wird mir ein Vergnügen sein, brühheiß mit ins Grab, lebendig. Eh Wurscht ♪♫♫♪, und runde Ecken kriegt das Lego auch noch, morgen.
Finsterst-Freundliche Grüße aus KL
Christian
-
Hi,
bin über den Code nochmal drüber bzgl. d. Anregungen von Ingo und Maxx. Sollte jetzt funktionieren, und ich poste mal einen Link auf die 2te Version: http://zinux.de/selfhtml/css_lego/lego_v2.html.
Wesentlicher Unterschied zur 1. Version: Der DIV-Inhalt des obersten DIVs hat mit CSS-Hacks eine min-width verpasst bekommen, auch im IE<=7. Der o.a. Fehler verschwindet dadurch. TODO: Klassen & IDs, unnötige(?) Spacer-DIVs, im Ausgleich für das jetzt nötige min-width kann evtl. die fixierte Pixelbreite des blauen Kastens aufgehoben werden, ... .
Über Feedback bzgl. "Klappt in Safari, Khtml, im PDA" werde ich mich immer wieder freuen. V2 sollte den Bildschirm optimal ausfüllen, im Blocksatz, und innerhalb der oben ja schon erläuterten Ls. Getestet hab' ich bis jetzt Opera, FF, IE6. Da der beschriebene Fehler ja nur bei Fensterverkleinerung auftritt wäre das Testen für mich wirklich eine ziemlich große Hilfe. Irrtümer sind nur manchmal produktiv, die reine Wahrheit aber auch nicht immer.
Ceterum censeo vinum posse lactare nunc: Pfälzer Qualität, eine Erzeugerabfüllung allerlieblichsten Rotweins von Stefan Kuntz aus Landau.
^Alla hopp, freundliche Grüße aus KL
Christian-
Hallo Christian,
ich zitiere aus deinem CSS
#red { width:expression(document.getElementById('red').offsetWidth > 150 ? 'auto' : '150px');ist ungünstig. Wenn das Browserfesnter verkleinert wird, und #red < 150px wird klappt alles. Aber wenn das Browserfenster wieder vergrößert wird hängt #red fest bei 150 px. Das sieht dann so aus:
http://www.electric-lemon.de/self/lego.pngIch hatte in meinem letzten Posting den Vergleich an #green festgemacht. Das würde dann diesen Fehler vermeiden.
Dann ist mir der Sinn des folgenden Konstrukts unklar:
width:67%; min-width:150px; max-width:150px; Es scheint dazu zuführen, dass im IE7 der blaue Bereich
a) < 150px werden kann
b) im Gegensatz zum Opera und Firefox eine variable Breite hat.IE6 kann ich von hier aus leider nicht ausprobieren. Viel Spaß weiterhin.
Jochen
-
Hi,
Lego-v3 sollte funktionieren jetzt in allen Browsern. Hoffentlich hab ich das id green red jetzt richtig. Mit dem blauen Kasten weiss ich selber noch nicht. Das Ganze gestaltet sich überraschend schwierig. Das Ausräumen des IE6-Fehlers machte 8 weitere Div-Blöcke erforderlich, einige CSS-Hacks mit negativen margins, und ich glaube den Quirks Mode auch noch. Deswegen habe ich sowohl die JS als auch die IE6-Fehler tolerable Lösung als auskommentierbare Möglichkeit miteingebaut. Ist noch nicht aufgeräumt, sollte aber funktionieren. Bei mir klappt Mozilla, FF Opera. IE6. Wie ists mit IE7??? Auf meineipadresse.de hab ich mal im Vollbildmodus gesnapt, aber wie ists beim verkleinern?
Lego v3 http://zinux.de/selfhtml/css_lego/lego_v3.html
Source v3http://zinux.de/selfhtml/css_lego/lego_v3_src.html
Vielen vielen Dank fürs Mitlesen.
Freundliche Grüße aus KL
Christian
-
-
