Label als "Klammer" von Links am Artikel platzieren

    Hi,

    ich möchte in meinen Artikeln von links in den Textbereich "Optische Klammern" mit der Aufschrift
    "Teil 1"
    "Teil 2"
    usw. einfügen.

    Diese sind logischerweise in jedem Artikel nach einer unterschiedlichen Anzahl an Zeilen platziert.

    Wenn ich die Klammern als Bild in den Artikel einfüge, so kann ich sie links-, rechts- oder zentriert im Textbereich einfügen. Doch wie kann ich das Bild nach links, außerhalb des Textbereiches platzieren?
    Zudem sollte es ja für jede Displaybreite an der richtigen Stelle sein.

    Kann mir hier jemand einen Tipp geben, wie ich das am Besten anstellen kann?

    • Gerade eben
    • 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

    Ich habe nicht verstanden wie das aussehen soll. Mach doch mal ein Bild, wie Du Dir das vorstellst.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Das ist erstmal eine Frage von Struktur. Wenn die Einheiten relativ klein und überschaubar sind, bietet sich eine durchnummerierte Liste <ol> an. Jedes Listenelement <li> erhält deine Klammer (optisch) als Hintergrundbild, die Nummerierung ergibt sich aus der Liste und „Teil“ kannst du entweder als Pseudoklasse :before definieren (bin nicht sicher, ob man das mit der Positionierung einfach hinbekommt) oder zu Anfang jedes Listenpunkts in <span>-Tags reinkopieren.

    Wenn es auch eine sehr überschaubare Anzahl an nummerierten Abschnitten ist, kannst du statt Liste auch <p>-Tags oder div-Boxen nehmen.

    Gruß
    helix

    Zitat von sunshineh

    Ich bräuchte eigentlich einen negativen Offset nach links.
    Wie geht das als html überhaupt?

    So sieht ja der Code für ein normales Bild aus […]

    Wenn du es über „normales Bild“ lösen willst, geht das mit einem negativen margin. Nicht im html, sondern im css. Wobei ich im Moment nicht sicher bin, ob das im normalen Elementfluss, d.h. alle Elemente position: static; so funktioniert.
    Wenn nicht, Element, das den Abschnitt enthält relativ positionieren, das enthaltene Klammerbild absolut positionieren (dafür brauchst du ergänzend ein display: block;) und ebenfalls wieder mit negativem margin nach links rücken.

    Oder eben das übergeordnete Element (das den Abschnitt enthält) breiter definieren, über css eine Hintergrundgrafik oben links positionieren und den Textinhalt über padding-left nach rechts einrücken.

    Das ist die Theorie. Wenn du konkretere Hilfe brauchst, bitte zu deiner Grafik noch ein bisschen Text daneben, damit man sieht, wie es im Verhältnis sein soll. Und Link zur Seite, damit man sehen kann, wie die umschließenden Elemente (Contentbereich, trallalla) sind.

    Gruß
    helix

    Vielen Dank!

    Ich habe nun eine gesonderte Bild-Klasse gestellt und dieser im CSS-Code eine negative Margin zugewiesen.
    Soweit ich jetzt überblicken kann funktioniert es.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden