H3 gibt auch dem Bild einen Abstand

  • 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

    Fuffzehn Mann auf des toten Manns Kiste, ho ho ho und 'ne Buddel mit Rum!

    • Anzeige

    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

  • 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

    Fuffzehn Mann auf des toten Manns Kiste, ho ho ho und 'ne Buddel mit Rum!

    Einmal editiert, zuletzt von Wolf Larsen (10. Dezember 2009 um 20:16)

  • 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). ;)

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

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

  • 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

    Fuffzehn Mann auf des toten Manns Kiste, ho ho ho und 'ne Buddel mit Rum!

  • 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

    Fuffzehn Mann auf des toten Manns Kiste, ho ho ho und 'ne Buddel mit Rum!

  • 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. ;)

  • ...
    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

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!