Bildpositionierung im Text
Jochen
- css
Hallo,
ich komme nicht dahinter. Ich möchte Bilder wahlweise rechts oder links anzeigen lassen. Der Text soll da herumfliessen. In die CSS habe ich geschrieben:
.bildlinks {
float: left;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
clear: left;
}
.bildrechts {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
clear: right;
}
Die class links funktioniert problemlos, jedoch nicht mit rechts. Das Bild überspringt stattdessen zwei andere Elemente und positioniert sich am Ende der Seite. Zwar rechts wie gewünscht, aber eben außerhalb des Textes
Ich verstehe gerade nicht was ich falsch mache.
Andere Sache: Ist es möglich mit div/css das Bild auch mitten in den Text zu zentrieren? float: center gibt's eben nicht. Ich habe das schon einmal gesehen, weiß aber nicht mehr wo.
Hi,
Die class links funktioniert problemlos, jedoch nicht mit rechts. Das Bild überspringt stattdessen zwei andere Elemente und positioniert sich am Ende der Seite. Zwar rechts wie gewünscht, aber eben außerhalb des Textes
Float bewirkt, dass *nach* dem Element kommende Inhalte um dieses herumfliessen.
Ist denn dein restlihcer Text auch *nach* dem Bild im Quelltext notiert?
Andere Sache: Ist es möglich mit div/css das Bild auch mitten in den Text zu zentrieren?
Ohne aufwendigere Tricksereien: Nein.
MfG ChrisB
Float bewirkt, dass *nach* dem Element kommende Inhalte um dieses herumfliessen.
Ist denn dein restlicher Text auch *nach* dem Bild im Quelltext notiert?
Ja. So etwa wie
» <img src="....jpg" alt="..." title="..." width="300" height="300" class="bildrechts size-medium wp-image-240" /> Text Text ....
Die mir bislang bekannte Variante
» <div class="bildrechts"> ... </div> Text ...
tut's leider auch nicht.
Hi,
sorry, auch aus dieser Beschreibung kann ich nicht herauslesen, wo denn nun eigentlich dein Problem liegt.
</hilfe/charta.htm#tipps-fuer-fragende>
MfG ChrisB
Hi Chris,
Das eigentliche Problem liegt, wie anfangs beschrieben, darin, dass das Bild entgegen der Formatierung sich sozusagen selbstständig macht.
Wenn ich das Problem verstehen würde, und ich nicht bereits viele Stunden damit verbracht hätte, würde ich nicht fragen.
Ich weiß einfach nicht weiter.
Hi,
sorry, auch aus dieser Beschreibung kann ich nicht herauslesen, wo denn nun eigentlich dein Problem liegt.
</hilfe/charta.htm#tipps-fuer-fragende>MfG ChrisB
Hi,
<gebetsmuehle> Bitte *sinnvoll* zitieren, und nicht einfach alles! </gebetsmuehle>
Das eigentliche Problem liegt, wie anfangs beschrieben, darin, dass das Bild entgegen der Formatierung sich sozusagen selbstständig macht.
Und "macht sich selbststaendig" haeltst du jetzt fuer eine verstaendlichere Problembeschreibung?
Wenn ich das Problem verstehen würde, und ich nicht bereits viele Stunden damit verbracht hätte, würde ich nicht fragen.
Ich habe dir die Tipps fuer Fragende verlinkt, damit du dort nachlesen kannst, wie man ein Problem in so einem Falle zumindest nachvollziehbar fuer Aussenstehende beschreiben kann.
MfG ChrisB
Und "macht sich selbststaendig" haeltst du jetzt fuer eine verstaendlichere Problembeschreibung?
Ja.
z.B. wenn ich das <div> Element vor "Nachricht beantworten" setze und dann taucht es aber unten vor "Classic Forum 3.4.13" auf, ja dann vermag ich das einfach nicht nachvollziehen.
Ich denke, ich habe das Problem eingangs bestmöglichst beschrieben. ChrisB, bitte antworte nicht mehr, wenn Dir keine Lösung bekannt ist. Deine Zwischenrufe machen das nämlich nur unübersichtlich. Danke.
Hallo Jochen!
»»
»» Und "macht sich selbststaendig" haeltst du jetzt fuer eine verstaendlichere Problembeschreibung?
Ja.
Selbständig kann sich vieles machen, aber nicht im Dokument. Dort erscheinen die Elemente so, wie Du sie definiert hast und/oder mittels CSS formatiert hast (von Bugs bei dummen Browsern abgesehen, ist es so).
Bisher hast Du uns nur Dein CSS gezeigt, und nicht Dein HTML-Code. Wenn dass CSS korrekt ist, was bleibt noch als Fehlerquelle?
Von welchem Bild also meinst Du, dass es sich selbständig macht?
Viele Grüße aus Frankfurt/Main,
Patrick
Hi Patrick,
ja, Du hast ja Recht, ohne Ansichtsmaterial ist es echt doof, sorry.
Nebenbei bist Du ein vorbildliches Beispiel in Sachen "Der Ton macht die Musik" ;-). Auf so etwas wie ChrisB kann ich nämlich gerne verzichten.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear
Wie dem auch sei, ich bin nun endlich draufgekommen. Auch wenn ich es schon des Öfteren gelesen hatte, Fehler war - warum auch immer - "clear: left" ohne das funktioniert's wie gewünscht, bislang :-/. Problem machte wohl dass das am Anfang des Absatzes stand, was wohl irgendwie nicht schmeckte. Sonderbar, aber egal.
Dann bis demnächst, danke!
Grüsse, Jochen
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear
Sonderbar, aber egal.
Wenn du den float mittels clear "beendest", ist es völlig normal, dass der Textfluss wieder in "normalen Bahnen" verläuft, ich kann daran nichts Sonderbares entdecken.