H3 gibt auch dem Bild einen Abstand

Wolf Larsen

Hallo Zusammen,

ich weiß, es kann eigentlich nicht sein, der Quellcode scheint ok, aber es ist doch so. Unter einem Bild auf einer Seite beginne ich mit H3. H3 hat im Stylesheet einen Abstand oben. Der Code:

HTML

<div id="attachment_598" class="wp-caption alignleft" style="width: 510px"><img class="size-full wp-image-598" title="Test" src="http://www.meineseite.com/wp-content/uploads/test.jpg" alt="Test" width="500" height="281" /><p class="wp-caption-text">Test</p></div>
<h3>Test</h3>

Nun sieht es so aus, als ob der H3 auch das Bild anfasst. Das heißt, es gibt nicht nur einen Abstand der H3 zur Beschreibung und Bild, sondern im meinem CSS-Durchleuchter CSSEdit (Mac) sehe ich, dass auch das Bild oder der Div einen Abstand nach oben bekommt bzw. dass in CSSEdit H3 und das ganze Bild irgendwie zusammenhängt. Im Code ist H3 doch aber nur auf die Überschrift bezogen? Danke!

Wolf

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

koslowski

Moin,

Link zum Problem?

Kristallkugel ist grad zum Polieren weg. ;)

Wolf Larsen

Also das Bild bekommt einen Abstand oben. Bei anderen Post und Seiten steht das Bild im p. Ist das normal? Kann es nicht "nirgends" stehen?

Danke,
Wolf

koslowski

der Grund ist der Float in der style.css Zeile 1018

Das nachfolgende Element h3 erstreckt sich unter dem Float, nur der Text weicht dem float aus.
Ein völlig normales und standardkonformes Verhalten.

Nur bei älteren IE'S (6/7) weicht fälschlicherweise die ganze Box dem Float aus.

Ich würde den Float einfach streichen (warum da überhaupt gefloatet wird erschließt sich mir nicht so recht). ;)

Putzlowitsch

Genau, für ein Bild, was sowieso die ganze Breite einnimmt, ist die Klasse "alignleft" überflüssig.

Gruß
Ingo

Wolf Larsen

Danke Dir, Danke Euch! Ich wäre da nicht drauf gekommen. Ich bin mit CSS noch nicht so fit, dass ich solche Dinge erkenne. Ich schau halt im Quältext und wenn ich da nix finde, dann finde ich es nicht. Dieses Float bringt das Template mit. Dass die Bilder über die ganze Breite gehen, habe ich festgelegt. Da werde ich also das Opfer einer historischen Altlast :-) Nun habe ich das besser im Griff denn mit den Überschriften hatte ich schonmal Probleme.

Wolf

Wolf Larsen

Ha, ich habe mich doch noch mal reingelegt. Das Float left darf nicht aus dem Stil, denn das wird ja tatsächlich benutzt, wenn man ein kleines Thumb links im Text ausrichten will. Das große Bild oben aber darf aber keinen align haben, weil es eben direkt in der ganzen Spalte steht. Habt ihr vielleicht gemeint, ich habs halt im Stil gestrichen.

Wolf

koslowski

dann kriegen halt die Thumbs den Float und die Großen nicht.
Das sollte doch kein Problem sein. ;)

Putzlowitsch

Es sollte ja auch nicht in der CSS-Datei geändert werden, sondern nur die Zuweisung der Klasse "leftalign" beim Einfügen des Bilder in den Artikel entfernt werden. Bei mir sieht der Dialog zum Einfügen etwa so aus:
http://putzlowitsch.de/images/bilder-einfuegen.png
Da bei "Ausrichtung" keine auswählen, dann sollte es passen.

Gruß
Ingo

koslowski

Zitat von Putzlowitsch

Es sollte ja auch nicht in der CSS-Datei geändert werden, sondern nur die Zuweisung der Klasse "leftalign" beim Einfügen des Bilder in den Artikel entfernt werden. Bei mir sieht der Dialog zum Einfügen etwa so aus:
http://putzlowitsch.de/images/bilder-einfuegen.png
Da bei "Ausrichtung" keine auswählen, dann sollte es passen.
Gruß
Ingo

ach so, beim Benutzen der WP-Bildeinfügefunktion.

Bilder und Artikel mache ich erstmal immer von Hand in meinem Lieblingseditor.
Da geb ich Klassen und Struktur selber vor. ;)

Putzlowitsch

Zitat von koslowski

...
Bilder und Artikel mache ich erstmal immer von Hand in meinem Lieblingseditor.
Da geb ich Klassen und Struktur selber vor. ;)

Na dann laß halt das "leftalign" einfach weg :-)

Gruß
Ingo

Willkommen! Melden Sie sich an oder registrieren Sie sich.

H3 gibt auch dem Bild einen Abstand

Jetzt mitmachen!