Dezente Zierlinie oberhalb der .postmetadata

    Hallo zusammen,

    es gibt zahlreiche Beiträge zu den Linien im Theme, aber ich bekomm's einfach nicht hin, tut mir leid. Kann mir einer helfen? Das gewünschte Design soll so aussehen:

    Problem Nr. 1:

    Unmittelbar oberhalb der Post Metadaten soll eine feine Trennlinie über die ganze "Post-Breite" gehen und die Posts von einander abtrennen (siehe Beispiel unten!) und somit einen eleganten Post Metadaten Absatz bilden. Diese Linie soll aus grauen Punkten bestehen (siehe ebenfalls Beispiel)

    Problem Nr. 2:

    Da bei meinem Blog narrowcolumn und widecolumn identisch sind (finde das schöner bei der Single Post Ansicht) habe ich das Problem, dass die Post Metadaten bei der Single-Post Ansicht wie im Main Index ebenfalls linksbündig sind (finde ich eben für die Hauptseite schöner!). Kann man diese für die Single Post Ansicht mit ein paar wenigen Kniffen trotzdem zentrieren? Mit <center>Tags hat's natürlich nicht funktioniert :-(

    Ich würde mich freuen, wenn mir hier eine/-r weiterhelfen könnte!

    Meine Ansätze sind eben leider nur sporadisch:
    - evtl. mit <hr /> und diese im css formatieren?
    - oder mit #entryfooter oder sowas?

    Kann mir jemand Code-Hilfe anbieten?

    Vielen Dank im Voraus!

    Gruss Livio

    Mein Blog: Livio’s Weblog
    Beispiel für die Trennlinien (Photoshop):

    • 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

    Du hast zwei Möglichkeiten:

    Die div-class für deine Beiträge heißt "entry". Du könntest also im css in diese div-class einen border-bottom gestrichelt oder gepunktet einsetzen,

    oder die div-classes für meta heißen bei dir "postmetadata" bzw. "postmetadata_alt" - da könntest du im css einen border-top einrichten.

    Die "postmetadata_alt" ist übrigens die auf deiner single-php (da müßtest du im css nur von linksbündig auf zentriert ändern, um die andere Frage zu beantworten).

    Dann sind die Trennlinien (die ja dann in wirklichkeit keine mehr sind, aber so wirken) garantiert so lang wie die breite der entsprechenden div-classes.

    Du kannst allerdings auch mit hr zwei Klassen formulieren.
    Einmal eine class linksbündig, einmal eine zentriert (und Länge über pixel oder %Werte angeben).

    Danke!

    [FONT=Arial]Hi Magnifikatz! Danke schon mal für Deinen Input!

    also 1. Frage:
    Ich habe die postmetadata_alt so definiert:

    .narrowcolumn .postmetadata {
    text-align: left;
    }

    .alt {
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    [COLOR=Red] text-align: center;[/COLOR]
    }

    Davor hab ich's mit dem probiert:
    [/FONT][FONT=Arial]
    [COLOR=Red].narrowcolumn .postmetadata_alt {
    text-align: left;
    }[/COLOR]

    Ging leider beides nicht (du siehst, ich versteh's nicht so waaaahnsinnig :-) kann nur einigermassen kombinieren)

    Kannst du mir nochmals erklären, was da rein muss? Danke!

    Zum 2. Problem:

    Border top für die postmetadata tönt für mich die bessere Lösung (soll ja auch eine Einheit bilden). Jetzt bin ich nur nicht so recht sicher, wie das aussehen muss. Etwa so? Wenn ich jedoch noch border bottom und background hinzufüge geht's nicht mehr, ist das logisch? Ausschliesslich border top geht einwandfrei...

    .narrowcolumn .postmetadata {
    text-align: left;
    [COLOR=Red] [/COLOR][COLOR=Red]background-color: #f8f8f8;[/COLOR]
    border-top: 1px solid #ddd
    [/FONT][FONT=Arial] [COLOR=Red]border-bottom: 1px solid #ddd[/COLOR][/FONT]
    [FONT=Arial] }

    Danke bereits für Deine Hilfe! Bis jetzt schon mal super :-))
    [/FONT]

    In der "postmetadata" willst du doch nur eine Linie. Also brauchst du da nur:
    border-top: 1 px dotted (gepunktet) oder 1 px dashed (gestrichelt) und #ddd;
    einfügen (Background willst du da ja gar nicht, und border-bottom auch nicht).

    Warum das .alt nun den text-align: center nicht annimmt weiß ich auch nicht. Ich persönlich mag Kubrick gar nicht, ist mir zu verworren (kann sein, daß irgendwo im code oder an anderer Stelle im css mal wieder ein style-befehl herumfliegt, der eben den text-align: center im .alt nicht zum Tragen kommen läßt).

    Zumindest das erste problem mit der Trennlinie sollte aber nun gelöst sein.

    Sorry, ich war nicht ganz präzise :-)

    das mit background und border war nur so eine Idee (da ja in der single.php auch so vorhanden). Darum besteht für mich diese Frage noch :-) Hast du da noch ne Idee?

    Ok, das mit dem center muss ich dann wohl nochmals rumprobieren...

    Danke nochmals!

    Also in dem Fall ist dein Eintrag für die "postmetadata" schon völlig korrekt.
    Du kannst durchaus background, border-top, border-bottom usw. definieren. Müßte im css alles angenommen werden.
    Wenn du allerdings postmetadata auf die gleiche Art stylst wie postmetadata alt, dann würde ich aber keine Trennlinie mehr machen (hebt sich doch so schon gut ab vom Beitrag).

    bin ich völlig deiner Meinung, das Problem ist nur, es funzt nicht :-( es zeigt lediglich den Background, aber keine Linien mehr (möchte eben evtl. das leichte Grau im background mit orangen Linien kombinieren)

    Hab keine Ahnung was da falsch ist :-(

    Also momentan sehe ich auf der inex-seite nur die orangene Top-Linie,
    auf der single-seite sehe ich orangene top-linie, grauer background und graue bottom-linie.

    Ich finde das allerdings auch merkwürdig...

    Ach, übrigens: das mit dem postmetadata_alt ist natürlich falsch von mir.

    Versuchs mal mit

    narrowcolumn.postmetadata

    und

    narrowcolumn.postmetadata.alt

    und wenn du narrowcolumn und widecloumn benutzt, gib der widecolumn doch einfach mal exakt die gleichen style-werte wie der narrowcolumn. Vielleicht hilft das.

    Ich glaub das ist wegen meinem kleinen "Tweak"...

    er reagiert nur auf den Eintrag in der Postmetadata...kann nicht mehr zwischen narrow und widecolumn unterscheiden :-(( bin ich wohl selbst schuld...ich dachte dazumals, das ist die einfachste Weise, eine Single Post Ansicht mit Sidebar zu bekommen...

    ja, so macht's Sinn...manno...weiss nicht, ob ich Bock hab, nochmals soweit zurückzugehen...seufz

    haaa!

    haa...war ein guter Tipp...

    hab zwar noch Schiss, dass da mit der widecolumn noch einige Querverweise in der CSS drinstecken, aber so wie's scheint, ist alles i.O.

    dann probier ich grad mal noch die unterschiedlichen postmetadata Absätze aus... :-)

    Danke nochmals für Deine schnelle Top-Hilfe!

    Gruss aus dem (im Moment) sonnigen Zürich

    Positionierung?

    Hey Magnifikatz,

    jetzt muss ich deine Hilfe doch nochmals in Anspruch nehmen:

    Kann ich diese Linie mit margins oder padding noch irgendwie näher an die postmetadaten bringen? Wenn ich border bottom wähle ist die Linie bündig, aber bei top schwebt sie ein wenig hoch oben...kann ich das ändern? ich hab eben schon ein wenig probiert, aber sie wandert nur nach oben, nicht nach unten :-(

    Danke und Gruss

    für meinen Geschmack könnte er eben noch ganz bündig sein mit den metadaten. wie wenn du den text dort drin mit der maus aktivierst...so nah halt...aber wenn's nicht geht, geht's nicht :-)

    Hast du übrigens noch eine Idee zu meinem anderen Thread? mit dem Video? ich komm da nicht weiter...will keiner helfen, od. vielleicht weiss es ja keiner :-)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden