zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Float-Bilder im Fließtext an Absatz binden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.02.2008, 12:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.04.2007
Ort: Berlin
Beiträge: 159
netAction befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.02.2008, 13:05
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

FAQ Punkt 2
Du musst in p clearen, nicht img, schau Dir besonders EasyClearing an.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.02.2008, 13:19
Benutzerbild von Rupper
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.01.2008
Ort: Obersöchering
Beiträge: 183
Rupper wird schon bald berühmt werden
Standard

hallo...

dass einzigste was mir dazu sponatn einfällt ist das bild und den text je in ein div zu legen.. z.B. so:
Code:
<div class="xxx">
     <img src"xxx" width="xxx" height="xxx" border="xxx" alt="xxx" align="left" />
     <p>text</p>
</div>
hierbei bewirkt align="left", dass der text um das bild fließt...
und da jeder absatz in dem zu dem bild gehörendem div ist, kann er auch nicht verrutschen.

beim img reicht dann img{float:left} aus

beim definieren von dem div musst du nur darauf achten dass du class (.xxx) und nicht id (#xxx) verwendest, da du eine id im gegensatz zu class nur einmal verwenden darfst... und du solltest deiner class die benötigte breite und höhe geben

hoffe ich konnte damit helfen...
__________________
Alles was man weiß, wird nur dann wertvoll wenn man es mit anderen teilt ...

Geändert von Rupper (19.02.2008 um 13:22 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 19.02.2008, 13:32
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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%;
}
Wenn der Text immer zu dem Bild stehen soll und nicht evtl. neben dem darüber liegenden Bild angezeigt werden soll, dann würde ich hierfür ebenfalls einen eigenen Absatz nehmen.
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>
Habe es gerade mal ausprobiert und habe es auf Anhieb nicht hinbekommen 2 Bilder und Text-Abschnitte innerhalb eines Absatzes so auszurichten, dass der entsprechende Text immer neben dem zugehörigen Bild angezeigt wird, würde also zu obigem raten.

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.02.2008, 13:44
Benutzerbild von Rupper
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.01.2008
Ort: Obersöchering
Beiträge: 183
Rupper wird schon bald berühmt werden
Standard

@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 ...
Mit Zitat antworten
  #6 (permalink)  
Alt 19.02.2008, 13:55
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.02.2008, 14:03
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.04.2007
Ort: Berlin
Beiträge: 159
netAction befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.02.2008, 14:09
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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>
In den CSS-Anweisungen änderst Du p:after in div:after und * html p in * html 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>
Im CSS dann
Code:
div.section img {
	float: left;
}
div.section:after {
	display: block;
	content: ".";
	height:  0;
	clear:   both;
	visibility: hidden;
}
* html div.section {
	height: 1%;
}
@Rupper: In diesem Fall macht das div dann wieder Sinn, nicht dass da gleich die Frage nach dem warum kommt.
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)
Mit Zitat antworten
  #9 (permalink)  
Alt 19.02.2008, 14:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.04.2007
Ort: Berlin
Beiträge: 159
netAction befindet sich auf einem aufstrebenden Ast
Standard

Alles klar, danke.
Ich schenke mir das div und cleare einfach bei jeder neuen Überschrift h3.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.02.2008, 14:38
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Hey, von Überschriften war vorher nicht die Rede.

Das geht natürlich auch.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:04 Uhr.