|
|||
Float-Bilder im Fließtext an Absatz binden
Hallo!
Ich habe einen langen Text und einige kleine Bilder darin. Die Bilder sollen links sein und den Text herumfließen lassen. <p> Text 1 <img 1> </p> <p> <img 2> Text 2 <img 3> Text 3 </p> Also habe ich img { float:left; clear:left; } gesetzt. Ohne clear:left würden sich nämlich unter Umständen Bilder nach rechts rüberstapeln. Jetzt das Problem: Wenn ich zu viele hohe Bilder einbaue, erscheint Text 3 neben Bild 1. Es muss also immer wenn ein neues img kommt der gesamte Textfluss abbrechen und in Höhe des neuen Bildes weitergehen. Abhilfe würde schaffen, auch für p ein clear:left; anzugeben. Das möchte ich aber nicht, weil dann immer nur ein einziger Absatz neben jedem Bild steht. Und der sieht ganz schön verlassen aus, wenn er nur eine Zeile hat. Versteht jemand, was ich meine? Thomas |
Sponsored Links |
|
||||
FAQ Punkt 2
Du musst in p clearen, nicht img, schau Dir besonders EasyClearing an. |
Sponsored Links |
|
||||
Bitte nicht.
Damit der Text innerhalb der Absätze nicht hochrutscht, musst/kannst Du das so machen Code:
p img { float: left; } p:after { display: block; content: "."; height: 0; clear: both; visibility: hidden; } * html p { height: 1%; } Code:
<p> <img src="blub.png" width="50" height="80" alt="blub" /> Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p> <img src="blub.png" width="50" height="80" alt="blub" /> Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p> <img src="blub.png" width="50" height="80" alt="blub" /> Text Text Text Text Text Text Text Text Text Text Text Text Text </p> Die Anweisung "* html ..." am Besten in ein eigenes CSS für den IE, welches per CC eingebunden wird. Wenn der Text immer neben dem Bild angezeigt werden soll, dann würde ich auch sagen, dass es semantisch völlig korrekt ist dann immer einen eigenen Absatz zu definieren, da Text und Bild ja dann immer zusammengehörig sind. Layout-Angaben, wie align="left" gehören nicht ins Markup. |
|
||||
@mantiz
...deine lösung ist natürlich wesentlich leichter zu erstellen und zu pflegen, bei weiteren dazukommenden bildern und inhalten etc... ist mein vorschlag aber nun falsch oder zu umständlich ?
__________________
Alles was man weiß, wird nur dann wertvoll wenn man es mit anderen teilt ... |
|
||||
Falsch würde ich nicht sagen, klingt so hart.
Im Sinne der Trennung von Design und Inhalt ist sie es aber und zu unflexibel. Außerdem verwendest Du ein zusätzlich div, was nicht nötig ist. Angenommen Du hast nur 2-3 Wörter, die neben dem Bild stehen sollen, dann machst Du das div so hoch, wie das Bild, sagen wir mal 100px. Plötzlich ändert sich der Text und da stehen dann auf einmal 10 Zeilen Text neben dem Bild und die 100px Höhe reichen nicht mehr aus, dann fängst Du an das div höher zu machen. Dann kommt aber einer an, der eine größere Schriftart im Browser eingestellt hat und der Platz reicht trotzdem nicht aus. Wenn Du das align="left" im Markup hast, dann brauchst Du kein float:left mehr, was wäre doppelt-gemoppelt. Aber wenn es im Markup ist, dann musst Du es überall ändern, wenn die Bilder auf einmal rechts und nicht links stehen sollen. Grundsätzlich: Alles, was zum Design gehört ins CSS, alles zum Inhalt ins Markup. |
|
|||
Hier ein Beispiel:
http://www.netaction.de/floattest/ Wenn ich die Schrift klein und den Browser breit mache, wandert der gesamte Text neben das erste Bild. Dadurch verlieren die Bilder völlig den Bezug zum Text. Meine Angaben im HTML-Text wo was stehen soll sind nur Anhaltspunkte. Die vertikale Ausrichtung muss aber grob stimmen. mantiz Version würde ich nur sehr ungerne verwenden, weil dann zu schnell gecleart wird und nicht die maximale Menge Text neben die Bilder kommt. |
|
||||
OK, wenn Du u.U. mehrere Absätze neben einem Bild stehen haben möchtest, dann pack das ganze jeweils in ein div und dann hast Du es.
Code:
<div> <img /> <p> Text neben Bild 1 </p> </div> <div> <img /> <p> Text neben Bild 2 </p> <p> Noch ein Text neben Bild 2 </p> </div> <div> <img /> <p> Text neben Bild 3 </p> </div> Bzw. würde ich hier eine Klasse verwenden, z.B. section und das ganze dann so schreiben Code:
<div class="section"> <img /> <p> Text neben Bild 1 </p> </div> <div class="section"> <img /> <p> Text neben Bild 2 </p> <p> Noch ein Text neben Bild 2 </p> </div> <div class="section"> <img /> <p> Text neben Bild 3 </p> </div> Code:
div.section img { float: left; } div.section:after { display: block; content: "."; height: 0; clear: both; visibility: hidden; } * html div.section { height: 1%; } Das div sorgt hier für eine inhaltliche Gruppierung der Elemente die zusammengehörig sind, hat also durchaus eine semantische Bedeutung und ist nicht nur als Mittel zum Zweck da, obwohl es natürlich nur deswegen eingefügt wurde. Geändert von mantiz (19.02.2008 um 14:11 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Bilder im div mit float positionieren | henmey | CSS | 4 | 25.01.2009 02:53 |
Layoutcheck von einer Beispielseite | wave | Site- und Layoutcheck | 1 | 12.11.2008 22:48 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |
IE zeigt gewisse Texte nicht an | zitronenbaum | CSS | 2 | 16.01.2008 16:25 |