Mit Bildbeschreibung kein umfließender Text mehr möglich

blog-cafe

Hallo zusammen,
ich habe mal wieder ein Problemchen. :oops:
Vorhin habe ich einen neuen Beitrag in meinem Blog erstellt, der auf der linken Seite ein Bild und rechts daneben den Text enthalten sollte.
Bisher habe ich das Bild immer ohne Bildbeschreibungstext eingefügt (so wie es jetzt auch wieder ist), da klappt das gut, dass der Text neben dem Bild steht.
Sobald ich aber bei Bildbeschreibung etwas eintrage, rutscht der gesamte Text einfach unter das Bild und die Bildbeschreibung (steht ja normalerweise in nem kleinen Rahmen direkt unter dem Bild) ist ganz normaler Text geworden.

Hat vielleicht jemand eine Idee, woran das liegen könnte? Ich würde eigentlich gerne die Bildbeschreibung nutzen.

Gruß

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

alchymyth

ich konnte kein bild mit bildbeschreibung im link finden, aber da fehlen wahrscheinlich einige styles im style.css deines themes; zB:

Code

.alignleft { float:left; margin: 0 5px 5px 0; }
.alignright { float:right; margin: 0 0 5px 5px; }
.aligncenter { display:block; margin: 0 auto 5px; }

oder aehnlich mit angepassten zahlenwerten.

blog-cafe

Hi,
danke erstmal für deine Antwort.
Hatte ich vielleicht schlecht beschrieben, dass ich das Bild erstmal wieder ohne Bildbeschreibung gesetzt habe (Desiderata im Beispiel), weil es mit dem Text eben sonst so komisch aussieht.
Außer das aligncenter habe ich beide Zeilen schon im style.css drin. Mit dem umfließenden Text klappts ja auch (nachdem ich eben diese Zeilen letztens eingefügt hatte), halt nur dann nicht mehr, wenn das Bild eine Bildbeschreibung besitzt...

So siehts aus:

Zitat

img.alignleft {
margin-right:5px;
margin-bottom:5px;
display: inline;
float: left;
padding:0;
}
img.alignright {
margin-bottom:5px;
margin-left:5px;
display: inline;
float: right;
padding:0;
}

Alles anzeigen

alchymyth

programmieren hat mit genauigkeit zu tun!

habe ich was von

Code

img.alignleft {...}

geschrieben?

natuerlich nicht; das war schon im style.css drin;
es geht um:

Code

.alignleft {...}

blog-cafe

Entschuldige bitte, ich frage hier schließlich weil ich mich damit nicht auskenne.
Ich bin (dummerweise) davon ausgegangen, dass der Ersteller des Themes das, was DU mit .alignleft meinst einfach img.alignleft genannt hat.
Danke also für deine Antwort.

mfitzen

Hast Du alchymyths Tipps denn mal befolgt und hat es was gebracht? Wenn nein, dann erstelle bitte einen Beitrag mit Bild und Beschreibung. Wenn man den Fehler live sieht, kann man ihn besser diagnostizieren.

blog-cafe

Konnte ich noch nicht ausprobieren, erst heute Abend.
Habe aber mit dem Hinweis noch ein paar andere Sachen ergoogelt, was in meiner style.css bisher auch nicht drin steht.

Zitat

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Alles anzeigen

Werde beides mal testen.

blog-cafe

Guten Morgen,
so, ausprobiert und klappt. Dankeschön alchymyth! :smile:

Was mir allerdings dabei jetzt noch aufgefallen ist, dass (Beispiel Beitrag Farben sehen - dunkelgrün)

a) der umfließende Text teilweise so komisch auf halber Höhe mit dem Bild steht. Ich vermute irgendwie, dass das mit den Rahmeneinstellungen (siehe unten) zu tun hat.
b) kann ich irgendwo die Zeilenhöhe vorgeben? Wenn man mit Enter im Editor in die nächste Zeile springt, ist zwischen den Zeilen immer so ein großer Zwischenraum.

Als letztes habe ich noch bemerkt, dass nicht alle Bilder einen Rahmen haben (alle bis auf die zentrierten, Beispiel Beitrag Farben sehen - hellblau), obwohl ich es in der style.css wie folgt drin habe (habe einfach mal die ganze style.css als txt angehängt)

Oder fehlt da auch wieder etwas an anderer Stelle bzw. ist zuviel? Die Einstellungen für die Rahmen habe ich aus anderen Forenbeiträgen zu dem Thema "abgeschrieben".

Ich danke euch schonmal für die geduldigen Antworten zu meinen Newbie Fragen ;-)

Gruß

alchymyth

ddie styles fuer die rahmen fuer die bilder (die ohne bildbeschreibung) in der style.css, sind im moment durch einen tippfehler blockiert:

Code

img {
 margin:5px;
/*--background-color: #FFF;
 border: 1px solid #DDD; --*/
 border:1px;
 margin:5px;
 padding:0px;
} 
}
img.aligncenter {
 display:block;
 margin-left:5px;
 margin-right:5px;
 /*--margin-bottom:5px;--*/
 padding:5px;
 background-color: #FFF;
 border: 1px solid #DDD;
}

Alles anzeigen

im obigen code ist eine schliessende klammer } zuviel:

Code

padding:0px;
} 
}

und dann ist im img.aligncenter code die margin-left und margin-right falsch:

das ganze sollte dann so aussehen:

Code

img {
 margin:5px;
/*--background-color: #FFF;
 border: 1px solid #DDD; --*/
 border:1px;
 margin:5px;
 padding:0px;
} 
 
img.aligncenter {
 display:block;
 margin-left:auto;
 margin-right:auto;
 /*--margin-bottom:5px;--*/
 padding:5px;
 background-color: #FFF;
 border: 1px solid #DDD;
}

Alles anzeigen

http://www.w3schools.com/css/css_border.asp

um den grossen abstand um den farbnamen zu verhindern, vor und nach dem namen nicht die 'enter' taste druecken, sondern 'shift' 'enter' (gleichzeitig) verwenden ('grosschreibung' 'eingabe').
'enter' macht einen neuen paragraph, mit den in der style.css festgelegten abstaenden; 'shift''enter' sollte nur einen zeilenumbruch machen.

blog-cafe

Hallo alchymyth,
danke für den Hinweis, das mit den Tippfehlern kommt davon, wenn man "mal eben" rumprobiert.
Ich habe die Zeilen mal wie von dir beschrieben angepasst, allerdings haben die zentrierten Bilder immernoch keinen Rahmen. Seltsam.

Super Hinweis mit dem Shift+Enter.
Komisch finde ich allerdings auch, dass (beispiel Farben sehen - dunkelgrün) ich es im Editor formatiere (siehe Bild editor.jpg) und der Text dann im Artikel (artikel.jpg) trotzdem wieder so an der Ecke des Bildes beginnt. Auch wenn ich Shift-Enter drücke, rutscht er nicht weiter runter. Bin ich zu blöd oder woran liegt das ?

Und in welchem Abschnitt von der style.css kann ich denn den Zeilenabstand bei "Enter drücken" einstellen?

Gruß!

alchymyth

erstens: der rahmen ist da; einfach mal versuchen, die seite im browser neu zu laden, oder den browser cache zu loeschen (ctrl F5).

das mit dem 'text halb auf der ecke' kommt vom 'margin-top:5px;' am bild; das ist fuer img allgemein in der style.css definiert, und wird bei den ausgerichteten bildern so uebernommen:

deshalb bei diesen styles noch 'margin-top: 0px;' hinzu fuegen:

Code

img.aligncenter {
 display:block;
margin-top: 0px;
 margin-left:auto;
 margin-right:auto;
 /*--margin-bottom:5px;--*/
 padding:5px;
 background-color: #FFF;
 border: 1px solid #DDD;
}
img.alignleft {
/*--border:5px;
 border-style:inset; --*/
margin-top: 0px;
 margin-right:5px;
 margin-bottom:5px;
 display:inline;
    float:left;
 padding:5px;
 background-color: #FFF;
 border: 1px solid #DDD;
}
img.alignright {
margin-top: 0px;
 margin-bottom:5px;
 margin-left:5px;
 display:inline;
 float:right;
 padding:5px;
 background-color: #FFF;
 border: 1px solid #DDD;
}

Alles anzeigen

ich glaube, den 'shift''enter' abstand kannst du mit dem folgenden formatieren:

Code

br {margin:5px 0 3px 0;}

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Mit Bildbeschreibung kein umfließender Text mehr möglich

Jetzt mitmachen!