Bilder im Fließtext

Lotte

Hallo,

erstmal ein Frohes Neues und so...
Seit Wochen versuche ich es hinzubekommen, Bilder im Fließtext erscheinen zu lassen, sodass sich der Text um das Bild strukturiert.

z.B. wenn ich ein Avatar, Themenbild (100px x 100px) o.ä. an den Anfang eines Beitrages setzen möchte und der Text nicht nach einer Freizeile beginnen soll, sondern in der selben Zeile. So wie in diesem Beispiel das Themenbild "Pflanzenorakel": http://www.brandungskieker.de/?p=178

Ich würde das jeweilige Bild bei Flickr hochladen und dann manuell einbauen, wenn ich den betreffenden Beitrag schreibe (oder ist das schon der falsche Ansatz und ich muss im style.css schon was ändern?). Welche Befehle muss ich einsetzen? Meine Versuche und meine Suche hier im Forum könnte mir noch keine Antwort geben.

Deshalb auf diesem Wege.
Lotte

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Jeriko

Die Änderungen erfolgen in der style.css. Ein Link zu deinem Blog wäre hilfreich, um dir besser weiterhelfen zu können.

Generell werden die Bilder via float:left; bzw. float:right; links- bzw. rechtsbündig ausgerichtet, der Text umfließt diese dann automatisch.

Gruß Jeriko

floyd

vielleicht hilft dir dieser thread auch weiter:
http://forum.wordpress-deutschland.org/showthread.php?t=15511

viele grüße
floyd

jottlieb

HTML

<img src="bildadresse" style="float:left;" />

Bzw. right...mit margin kannst du dann auch noch einen Abstand zum Text festlegen.

Lotte

Vielen Dank für die erste Hilfe.

Ich habe es nun folgendermaßen im style.css ergänzt:

Code

}
img.alignleft {
float: left;
margin: 0px 7px 2px 0;
}

so dass der style.css so aussieht:

PHP

/*
Theme Name: Conestogastreet
Theme URI: http://www.conestogastreet.com
Description: Everything happens on Conestoga Street
Version: 1.0
Author: Theron Parlin
Author URI: http://www.thoughtmechanics.com/ 
Copyright 2004 Sonny Parlin, http://www.conestogastreet.com/
*/
body {
 background: #fff;
 font:x-small Verdana,Georgia,Serif;
 text-align:left;
 color:#666;
 font-size: 11px;
 line-height: 16px;
 margin: 0;
}
.meta {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666;
 padding-bottom: 0px;
 text-align: left;
}
h2 {
 color: #666;
 font-size: 14px;
 text-align: left;
}
.metaBottom {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 text-transform: uppercase;
 color: #666;
 padding-bottom: 10px;
 text-align: center;
}
h3 {
 font-family: Georgia, Verdana, Arial;
 font-size: 24px;
 font-weight: normal;
 margin: 0 0 0px 0;
 padding-top: 10px;
 text-align: left;
 line-height: 1.0em;
 color: #CC3366;
}
h1 {
 font-family: Georgia, Verdana, Arial;
 font-size: 32px;
 font-weight: normal;
 margin: 0 0 0px 0;
 padding-top: 14px;
 padding-bottom: 14px;
   border-bottom: 1px solid #999999;
 color: #000;
 text-align: left;
}
hr {
 border: 0;
 height: 1px;
}
hr.hr1 {
    color: #999;
    background-color: #CC3366;
    height: 1px;
}
.archives { 
 margin-top: 30px;
 padding-bottom: 0px;
 padding-left: 28px;
 margin-bottom: 0px;
 text-align: left;
 width: 150px;
 color: #000;
}
form {
 margin-bottom: 0px;
}
input, textarea {
 size: 15;
}
ul {
 margin-top: 0px;
 margin-left: 0px;
 margin-bottom: 0px;
 padding-left: 0px;
}
li {
 list-style-type: none;
 margin-left: 0px;
}
.column {
 width:410px;
 text-align:justify;
} 
blockquote, blockquote p {
 text-indent: 0px;
 margin-bottom: 7px;
 color: #CC3366;
}
a {
 color: #CC3366;
 text-decoration: none;
}
a:visited {
 color: #CC3366;
}
a:hover {
 color: #999999;
}
.lineSep {
 border-top: 1px solid #999999;
 width: 100%
}
img.alignleft {
float: left;
margin: 0px 7px 2px 0;
}

Alles anzeigen

Bei den betreffenden Beiträgen muss ich dann zusätzlich auch einen Code für das Bild eingeben, wenn ich euch richtig verstanden habe. Normalerweise sieht er ja so aus:

HTML

<img src="http://farm1.static.flickr.com/125/347761586_8777f38317_s.jpg" alt="" />

Muss ich da noch was ergänzen? Denn bis jetzt setzt er das Bild zwar rechtsbündig und der Text folgt, jedoch nur ab der letzten Bildzeile und dann weiter unter dem Bild. Der Text fließt noch nicht um das Bild. :confused:

Viele Grüße!
Lotte
http://www.lotteinlove.de

Jeriko

PHP

<img class="alignleft" src="........

Dann passts :D

Gruß Jeriko

Lotte

Es funktioniert. Ich danke allerherzlichst :-D

Jedoch noch eine Frage: Wenn ich den Befehl

Code

<p align="justify">

zum zentrieren des Textes verwende, verschiebt er den Text wieder 2 Zeilen nach unten. WARUM? Und kann man da noch was ändern?

Ich grüße!

Lotte

Weiß keiner einen Rat?

Morris

Wenn du CSS einsetzt, nutze es konsequent.

align="justify" kann durch "text-align: justify" in einer CSS-Deklaration ersetzt werden. Allerdings zentriert es den Text nicht, sondern setzt ihn in eine Art Blocksatz.

Grüße
Mo

Lotte

Ja natürlich, ich meinte Blocksatz.

Die Ergänzung folgt unter CSS. Verstehe. Bis jetzt steht ja auch noch alls auf links und anscheinend kollidiert es deshalb.

Jedoch weiß ich nicht, unter welchem Teil ich dies ändern muss? Da ja das "h" für die Überschriftenebenen steht und nicht für den Fließtext. body?

PHP

/*
Theme Name: Conestogastreet
Theme URI: http://www.conestogastreet.com
Description: Everything happens on Conestoga Street
Version: 1.0
Author: Theron Parlin
Author URI: http://www.thoughtmechanics.com/ 
Copyright 2004 Sonny Parlin, http://www.conestogastreet.com/
*/
body {
 background: #fff;
 font:x-small Verdana,Georgia,Serif;
 text-align:left;
 color:#666;
 font-size: 11px;
 line-height: 16px;
 margin: 0;
}
.meta {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666;
 padding-bottom: 0px;
 text-align: left;
}
h2 {
 color: #666;
 font-size: 14px;
 text-align: left;
}
.metaBottom {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 text-transform: uppercase;
 color: #666;
 padding-bottom: 10px;
 text-align: center;
}
h3 {
 font-family: Georgia, Verdana, Arial;
 font-size: 24px;
 font-weight: normal;
 margin: 0 0 0px 0;
 padding-top: 10px;
 text-align: left;
 line-height: 1.0em;
 color: #CC3366;
}
h1 {
 font-family: Georgia, Verdana, Arial;
 font-size: 32px;
 font-weight: normal;
 margin: 0 0 0px 0;
 padding-top: 14px;
 padding-bottom: 14px;
   border-bottom: 1px solid #999999;
 color: #000;
 text-align: left;
}
hr {
 border: 0;
 height: 1px;
}
hr.hr1 {
    color: #999;
    background-color: #CC3366;
    height: 1px;
}
.archives { 
 margin-top: 30px;
 padding-bottom: 0px;
 padding-left: 28px;
 margin-bottom: 0px;
 text-align: left;
 width: 150px;
 color: #000;
}
form {
 margin-bottom: 0px;
}
input, textarea {
 size: 15;
}
ul {
 margin-top: 0px;
 margin-left: 0px;
 margin-bottom: 0px;
 padding-left: 0px;
}
li {
 list-style-type: none;
 margin-left: 0px;
}
.column {
 width:410px;
 text-align:justify;
} 
blockquote, blockquote p {
 text-indent: 0px;
 margin-bottom: 7px;
 color: #CC3366;
}
a {
 color: #CC3366;
 text-decoration: none;
}
a:visited {
 color: #CC3366;
}
a:hover {
 color: #999999;
}
.lineSep {
 border-top: 1px solid #999999;
 width: 100%
}
img.alignleft {
float: left;
margin: 0px 7px 2px 0;
}

Alles anzeigen

Morris

[COLOR=#000000][COLOR=#0000CC][/COLOR][COLOR=#006600]Du kannst im Prinzip einfach am Ende deines CSS-Codes eine eigene Deklaration für <p> einfügen.

Grüße
Mo
[/COLOR][/COLOR]

Catrippchen

Hi!

Besteht die Möglichkeit beim Einfügen eines Bildes automatisch <img class="alignleft" in den Code zu schreiben, ohne dieses über die html Ansicht zu erledigen?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bilder im Fließtext

Jetzt mitmachen!

Benutzer online in diesem Thema