float - clear - Problem

[Mel]

Hallo liebes Forum,

ich habe gerade ein Problem, welches mich ziemlich verstört.
Leider kann ich auf die Schnelle keinen Testlink anbieten ich probiere es deshalb mal so:

Stellt Euch ein flexibles 3-Spalten-Layout vor.

Rechte Spalte (float: right; width: 15em;)
Linke Spalte (float: left; width: 15em;)
Content mittig (margin: 0 15em 0 15em;)

->> genau in der Reihenfolge im Html-Grundgerüst.

Im mittleren Inhaltsbereich gibt es u.a. Texte und Bilder. Diese Bilder werden auch wieder gefloatet.
An sich kein Problem...es sei denn man hat ein Bild relativ wenig Text der um das Bild herum fliessen soll. Damit der darauffolgende Inhaltstyp sich nicht im Fluss befindet kommt ein clearendes Element zum Einsatz
--

also z.B. ein hr.clearer {
clear: both;
}

Und was passiert?
Der gesamte darauffolgende Inhalt macht einen Satz nach unten und zwar genau dahin wo der Inhalt der linken Spalte aufhört. Ist auch logisch beim näheren Hinsehen.

Aber was muss man tun, um floatende Elemente inkl. Clearer im Contentbereich anwenden zu können?

vg mel

[Detlef G.]

Hallo mel

Aber was muss man tun, um floatende Elemente inkl. Clearer im Contentbereich anwenden zu können?

Welche der Varianten für deine Seitenaufbau geeignet ist, kann ich dir jetzt
nicht sagen.
Du kannst z.B. dem Element, was jeweils Bild und Text enthält

• ein float geben (damit clear dann nur innerhalb wirkt), oder
• ein min-height (für IE height) mit der Höhe des Bildes.

Auf Wiederlesen
Detlef

[Mel]

Danke Detlef,

ersteres habe ich nun gemacht und das scheint ja zu wirken. Nr. 2 habe ich auch angedacht aber ist - da es sich im ein CMS handelt eher nicht zu verwirklichen.

vg melanie

[Detlef G.]

Hallo melanie

... Nr. 2 habe ich auch angedacht aber ist - da es sich im ein CMS handelt eher nicht zu verwirklichen.

Deshalb schrieb ich auch:
"Welche der Varianten für deine Seitenaufbau geeignet ist, kann ich dir jetzt
nicht sagen."

Auf Wiederlesen
Detlef

[Mel]

Deshalb schrieb ich auch:
"Welche der Varianten für deine Seitenaufbau geeignet ist, kann ich dir jetzt
nicht sagen."

Ich weiss ;) Und ich danke Dir für die schnelle Hilfe!
gute Nacht, Melanie

[Mel]

achja.
Ich sollte bevor ich mich der totalen Resignation hingebe wirklcih zuerst Ingos Tipps und Tricks sorgfältig prüfen (Ingo falls Du das hier liest - einmal wieder mehr ein Dankeschön).

Da ist zumindest mein Problem _exakt_ beschrieben. Und auch die Lösung.

Ich habe meinem Content-Container noch einen inneren Container verpasst und diesen mittels float: left; ebenfalls gefloatet. Tests im FF und IE zeigen nun alles wie gewünscht. Auch ein weiteres grausiges Phänomen, nämlich der "Ich mache Teile des Inhalts unsichtbar wenn ich mit der Maus über einen link gehe" - IE BUG (Guillotine Bug und oder Peekabo...)  den ich bis jetzt nicht bezwingen konnte scheint sich in Luft aufgelöst zu haben.

Falls sich das morgen alles als schöner Traum herausstellt melde ich mich wieder ;)

Gute Nacht, Melanie

[Jeena Paradies]

Hallo,

Ich habe meinem Content-Container noch einen inneren Container verpasst und diesen mittels float: left; ebenfalls gefloatet. Tests im FF und IE zeigen nun alles wie gewünscht. Auch ein weiteres grausiges Phänomen, nämlich der "Ich mache Teile des Inhalts unsichtbar wenn ich mit der Maus über einen link gehe" - IE BUG (Guillotine Bug und oder Peekabo...)  den ich bis jetzt nicht bezwingen konnte scheint sich in Luft aufgelöst zu haben.

auch wenn es funktioniert hast du jetzt unnötiges Markup reingebaut nur um irgendeinen Darstellungseffekt hinzubekommen. Eigentlich willst du dir das Tutorial zum markupfreien clearen verinnerlichen.

Grüße
Jeena Paradies

[Mel]

Ja, sehr richtig, div-Suppen sollten dadurch eigentlich auch nicht entstehen. Vielen Dank für den Link der trifft ja voll ins Schwarze. Ich werde das mal ausprobieren!

vg melanie

[Detlef G.]

Hallo Jeena

auch wenn es funktioniert hast du jetzt unnötiges Markup reingebaut nur um irgendeinen Darstellungseffekt hinzubekommen. Eigentlich willst du dir das Tutorial zum markupfreien clearen verinnerlichen.

Und wie soll ihr das helfen?
Ihr Problem bestand doch überhaupt nicht darin, das Float der Bilder zu
clearen, es bestand darin, dass damit auch das Float der Navi aufgehoben wird.
Bei deinem Vorschlag passiert (außer im IE) genau das Selbe.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Ich sollte bevor ich mich der totalen Resignation hingebe wirklcih zuerst Ingos Tipps und Tricks sorgfältig prüfen (Ingo falls Du das hier liest - einmal wieder mehr ein Dankeschön).

aber sicher lese ich das. :-)
Und ich würde mir kein schlechtes Gewissen über das zusätzliche Markup einreden, sodern es als das sehen, was es ist: eine funktionierende Methode, um das Ziel zu erreichen - ohne mehr oder weniger abenteuerliche CSS-Hacks. Schau Dir http://de.selfhtml.org/css/layouts/navigationsleisten.htm#float an - hier hatte ich auch Bedenken wegen des <div></div>, aber bisher hat sich noch niemand beschwert und außer dem "Aufblähen" des Quellcodes mit 11 zusätzlichen Bytes (die durch Verzicht auf CSS-Hacks u.U. wieder eingespart werden) hat dieses Element keine negativen Auswirkungen.

Un übrigens zu dem von Jeena verlinkten Artikel: Bei "Natürlich hat Opera 7 - genau wie es auch der IE tut (abgesehen von Bugs) - die Spezifikationen für clear immer korrekt implementiert" mußte ich doch Schmunzeln. ;-)

freundliche Grüße
Ingo

[Mel]

Hallo Ingo!

Ja, ich muss auch sagen dass der verlinkte Artikel nicht mein "Problem" gelöst hat- nachdem ich ihn noch ein paar mal durchgelesen habe denke ich dass es eher darauf zielt ein clearendes element nach einer "text umfliesst Bild"-Konstruktion zu ersparen also ein <div class="clear"></div>.

Ich habe dass dann auch an anderer Stelle ausprobiert und in FF etc. hat es prima geklappt aber im Ie eben nicht und da war ich es dann leid weiter herumzuprobieren auch wenn es sehr vielversprechend klang / klingt.

Nebenbei bemerkt: ich habe auch mal ein hr als clearendes Element probiert. JEdoch kriege ich da im IE so grosse Abstände dass ich wiederum selbst Abstand davon genommen habe. Und das bei sämtlichen CSS-Versuchen die man sich vorstellen kann also eine Definition wie

hr.clear {
clear: both;
height: 0;
font-size: 1px;
overflow:hidden;
border: 0 none;
margin: 0;
padding: 0;
}

--wobei ich bei margin und padding nicht sicher bin ob es da default-Einstellungen gibt - war nur zu testzwecken. Der Abstand blieb im IE. Deshalb bin ich entnervt zum inhaltsleeren div zurückgekehrt...
aber das nur mal so nebenbei.

Bei meinem grundsätzlichen Seitenaufbau jedoch war der zusätzliche Container jedoch die Lösung. Und ich muss wirklich sagen dass ich vorher    die float-clear-Problematik gegoogelt habe. Aber erst Dein Artikel hat den Sachverhalt klar und prägnant wiedergegeben.

vg melanie

[Ingo Turski]

Hi,

Nebenbei bemerkt: ich habe auch mal ein hr als clearendes Element probiert.

warum? Wenn Du das Element onhin nicht sichtbar zeigen willst, ist doch zu vermuten, daß es keine Bedeutung hat bzw. haben sollte. Oder wäre eine Trennung bzw. Trennlinie in Textbrowsern gewünscht?

freundliche Grüße
Ingo

[Mel]

warum? Wenn Du das Element onhin nicht sichtbar zeigen willst, ist doch zu vermuten, daß es keine Bedeutung hat bzw. haben sollte. Oder wäre eine Trennung bzw. Trennlinie in Textbrowsern gewünscht?

Also ich sage es mal so es würde da SInn machen weil es sich um News handelt die aufgezählt werden. Zur besseren Strukturierung bzw. Abgrenzung ist da ein hr in Textbrowsern oder handhelds sicher nicht die schlechteste Lösung.

Aber wie gesagt ich hatte unüberwindbare Probleme mit der Formatierung. Ist das so oder muss ich da den Fehler bei mir suchen?

vg melanie

[Ingo Turski]

Hi,

Aber wie gesagt ich hatte unüberwindbare Probleme mit der Formatierung. Ist das so oder muss ich da den Fehler bei mir suchen?

nö - CSS (2.1) ist längst nicht perfekt und läßt noch viele Wünsche offen.

freundliche Grüße
Ingo