nicht angemeldet
CSS-Layout und Float für Bilder
Hallo,
folgendes, ich habe ein 3-spaltiges CSS-Layout mit float gemacht, innerhalb der 2. und 3. Spalte befinden sich Einträge mit Texten zu denen u.U. auch ein Bild gehört, das wiederum float links oder rechts hat.
Funktioniert soweit auch alles einwandfrei, außer wenn der Text kürzer als das Bild ist => das Bild ragt über den Hintergrund hinaus.
Das ist auch noch klar, hängt ja am float.
ABER wenn ich jetzt noch ein Element mit clear:both; darunter setze, geht das Div nicht nur bis zum ende des Bildes sondern bis zum Ende der Navigation herunter! Da danach aber ein weiterer Eintrag folgen soll ist das äußerst unpraktisch!
Hier mal als vereinfachtes Beispiel, wo man es gut sieht:
<html>
<head>
<style>
[code lang=css]
#links{
float:left;
height:100px;
width:50px;
background-color:#f00;
}
#mitte{
background-color:#0f0;
padding-left:50px;
width:200px;
}
#Bild{
width:50px;
height:50px;
background-color:#77f;
float:right;
}
</style>
</head>
<body>
<div id="links">
navi
</div>
<div id="Mitte">
<div id="Bild">Bild</div>
<p>Das ist ein kurzer Absatz</p>
<div style="clear:both;"></div>
</div>
</body>
</html>
[/code]
Irgendwelche Lösungsvorschläge?
Das einzige was mir einfällt ist, dass man eben doch ein Tabellen-Layout verwenden muss!
-
Hallo,
wenn man diesem Artikel glauben schenken kann:
" Vermeidung des Fremd-Clearings
Wenn man das oben erwähnte Problem hat, gibt es dennoch einen Weg zur Lösung. Man macht aus dem Container (dem der clearer innewohnt) einen floatenden Container. Wenn ein clearer innerhalb eines floatenden Containers liegt, wird er nur die ihm innerhalb dieses Containers vorangehenden Floats clearen. Das clearing Element wirkt nicht auf andere Floats außerhalb eines mittels Float platzierten Containers. Ebenso hat der clearer keine Auswirkung auf sein Elternelement, außer daß dieser alle enthaltenen Floats umschließt.
Okay, dies erfordert also strukturelle Änderungen, aber weniger, als man denkt. Wenn alle Hauptelemente in einem Spalten-Layout Floats sind, treten eigentlich die schlimmsten IE Float-Bugs nicht auf. Insofern kann kann die Anwendung einer "Nur Float Methode" auf das Spaltendesign tatsächlich einfacher zu bewerkstelligen sein, jedenfalls für ein Layout mit festen Breiten. "
Gruß
Ole--
Das Wort Vegetarier kommt aus dem Indianischen und bedeutet: Zu dumm zum Jagen.-
wenn man diesem Artikel glauben schenken kann:
Warum irgend einen Mirror wenn das Original noch existiert?
-
Warum irgend einen Mirror wenn das Original noch existiert?
Kein Mirror, eine Lokalisierung :)
Gruß
Ole--
Das Wort Vegetarier kommt aus dem Indianischen und bedeutet: Zu dumm zum Jagen.-
Kein Mirror, eine Lokalisierung :)
Aaah - mein Gehirn parst Englisch so wie Deutsch, mir fällt da teilweise beim Lesen kein Unterschied auf :D
-
-
-
Hm... Das funktioniert zwar, aber dann müsste ich für den Container eine feste Breite angeben, er soll aber denn gesamten restlichen Platz füllen!
-
aber dann müsste ich für den Container eine feste Breite angeben
wo steht das?
-
aber dann müsste ich für den Container eine feste Breite angeben
wo steht das?Das steht nirgendwo aber wenn ich es nicht mache richtet sich die Breite nach dem Inhalt, der besteht aus Text und wird erst umgebrochen, wenn das Elternelement zu klein wird, vorher rückt die 2. Box aber unter die 1. (was wiederum laut w3c so seien muss, bei gefloateten Boxen)
Zumindest ist es bei mir bei FF so
-
Ich hab grad selber die Lösung gefunden (hab mit dem Ansatz bissel weiter gesucht):
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-verschachteln
man kann also statt float auch overflow:auto verwenden um einen "Block Formatting Context" zu erzeugen
-
-
-
-