Horizontale Trennline zwischen Artikeln

  • Template = Vorlage. Damit ist eine einzelne Theme-Datei gemeint (so stehts auch in unserem Forenlexikon, wo du alle hier grün unterstrichenen Begriffe erklärt bekommst). Bei WP ist das Template für die Startseite die home.php. Wenn das Theme keine hat, dann die index.php. An diesem Startseiten-Template erklär ichs dir, in den anderen Templates (z.B. archive.php für Archive) kannst du es dann sicher selbst einbauen.

    • 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

  • Vielen Dank schon mal!
    Ich wusste halt nicht, welche Datei Du meinst...

    Das ist die Index.php:

    Ich habe eben auch schon mal

    in die style.css eingebaut, aber da habe ich das gleich Problem der nicht durch gezogenen Linie...

  • Hmm,
    so

    Code
    <p style="border-bottom:15px solid #000000;">
    </p>
    <p style="border-left:15px solid #000000;">
    </p>


    haben zwar die Posts einen Rahmen, aber über den weißen Rand aussen komme ich immer noch nicht... :confused:

  • So, geht los Erstmal das <hr> weg, und auch die <br> sind unnötig. (Übrigens: <hr /> und <br /> in XHTML, beides sind leere Elemente)

    Dann hat bei dir bereits jeder Post einen eigenen Container

    HTML
    <div class="post" id="post-<?php the_ID(); ?>">
      <!-- der Artikel -->
    </div>


    Das machen wir uns hier zunutze. Dieser Container bekommt den schwarzen Rahmen oben und unten:
    .post {
    border-top:15px solid black;
    border-bottom:15px solid black;
    }
    Den Conteiner mit der Klasse "Block" außenrum kannst du weglassen (musst du sogar, da du sonst noch mehr Rand hast). Dein neues Template für die index.php sieht also so aus:


    Bau das erstmal so ein, dann schauen wir was noch nicht passt und bessern dort nach. Vermutlich müssen wir noch ein paar Abstände anpassen.

    PS: Es macht sich immer gut, schließende </div>-Tags u.ä. mit einem Kommentar zu markieren um die Übersicht zu behalten. Ich hab das mal oben mit eingebaut.

  • Danke für Deine Hilfe.

    Ich habe den Code jetzt so wie Du beschrieben hast verändert.
    Hier kannst Du sehen, wies aussieht:
    Deutsche und Europäische, Künstlerische und Dokumentarische FOTOGRAFIE
    Leider funktiioniert es noch nicht ganz.

    Der Post-Block fehlt ja jetzt, dass ich gar nicht weiß, ob ich die .post-Anweisung an richtiger Stelle eingefügt habe/funktioniert.
    Die muss doch dann in die style.css? Ist das irrelevant - außer für die Übersicht - an welcher Stelle dort?

  • Hallo!

    Ich habe eben mal versucht mitzudenken und den Eintrag in der style.css wie folgt angepasst:

    Code
    .post {
    background-color: #FFFFFF;
    margin-left:15px;
    margin-right:15px;
    margin-bottom:15px;
    margin-top:0px;
    padding:15px;
    }

    Jetzt sieht es schon sehr gut aus, nur wird der Post jetzt nicht mehr richtig angezeigt!?

  • Ich habe eben mal versucht mitzudenken und den Eintrag in der style.css wie folgt angepasst:


    Sehr schön! :-)

    Zitat

    Jetzt sieht es schon sehr gut aus, nur wird der Post jetzt nicht mehr richtig angezeigt!?


    Ach wo, da ist nur die Schrift weiß. Einfach auf schwarz ändern:

    Code
    .post {
    [COLOR="Red"]color:#000;[/COLOR]
    background-color: #FFFFFF;
    margin-left:15px;
    margin-right:15px;
    margin-bottom:15px;
    margin-top:0px;
    padding:15px;
    }
    Zitat

    Die muss doch dann in die style.css? Ist das irrelevant - außer für die Übersicht - an welcher Stelle dort?


    Im Prinzip ja. Eventuell ist zu beachten, dass frühere Anweisungen von späteren überschrieben werden, wenn sie die gleiche Spezifität haben. Aber du hast ja nur eine .post-Regel.

    PS: Du hast noch einen kleinen HTML-Fehler im Footer. Du machst dort einen Absatz <p> auf, aber einen Bereich </div> schließt du. Außerdem fehlt das </a> beim WP-Link. ;-)

  • Ah! Toll! :-D

    Aber die Links sind jetzt auch nicht mehr formatiert - über font habe ich das schon ausprobiert- und der Footer fehlt komischerweise ganz, obwohl er doch in der index.php steht... :???:

    Sehe ich das richtig, dass ich eigentlich "the_permalink" formatieren müsste?
    Den finde ich aber nirgends... :(

    Einmal editiert, zuletzt von ultimatte (30. Januar 2009 um 14:10)

  • Das der Footer weg ist liegt hieran:

    Code
    .Main {[B]/* style.css (line 38) */[/B]
    [COLOR="Red"]left:0;
    position:absolute;
    top:0;[/COLOR]
    width:100%;
    }


    Einfach rausnehmen, brauchst du nicht mehr.

    Was ist mit den Links? Alle Links werden hier korrekt (d.h. grau) dargestellt. Linkfarben findest du in deiner style.css ab Zeile 59.

  • Ich hab jetzt gerade folgendes eingefügt für die Links:

    Scheint jetzt zu gehen!
    (Grau sollten sie ja nicht sein...)

  • du solltest dir einmal die hierarchie von css ansehen. man kann prinzipiell so gut wie jedes element per css ansprechen.

    LINK: Css Selektoren I & Selektoren II

    Wenn Du Dir 10 Minuten Zeit nimmst, dann wirst Du Dich mit ALLEM was css angeht unendlich viel leichter tun. Hat mir auch sehr geholfen. Beste Grüße!

Jetzt mitmachen!

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