Karteikarten per CSS, unterer Rand - Problem

  • Moinsen an alle WordPressler!

    Bin recht neu hier drin, also erstmal ein kurzes Hallo an Euch!

    kurz zu mir:
    bin 43, u.a. DiplomBiologe aus dem derzeit herrlich winterlichen Wurzach im Allgäu und seit Anfang April mit WordPress zugange und wurschtel so vor mich hin (hab' auch einen Blog (war klar), aber direkt um den geht es nicht).

    Nun bin ich mehr aus Neugier ein eigenes Theme am Basteln. Das klappt auch soweit alles ganz gut ... halt Schritt für Schritt.

    so ...
    Allerdings bin ich nun auf ein Problem gestoßen, für das ich zwar inzwischen (seit gestern Nacht, ca 2:30 ^^) eine Lösung habe, aber so ganz zufrieden bin ich nicht damit. Weniger das Design (das ist, wie ich es wollte), als eben CSS, in Kombo mit HTML und PHP (halt auf WordPress), hoffe also, ich bin hier richtig.
    Ich denke mir übrigens, daß es mehr als genug entsprchende Plugins gibt, aber ich wollt es selbst versuchen. Vermutlich werde ich aber bei Gelegenheit ein passendes Plugin auseinanderschrauben und schauern, was drin ist °_O


    Zur (üblichen) Idee:
    Ich möchte meine Reiter wie in einem Karteisystem angezeigt haben, wenn die "aktive" Seite offen ist, soll der Reiter an dieser Stelle in der Farbe "nach unten offen sein", die restlichen sollen einen Rand nach unten haben ... wie gesagt, üblich.

    Zur (üblichen) Lösung:
    Ich habe im Netz schon zig Design-Lösungen mit Reitern gesehen, die aber stets mit jpgs, javascript, and whatnot gelöst werden. Ich suche aber schon "ewig" nach einer "reinen" CSS-Lösung so a la

    #id_reiter.etc.bla a:hover
    border-left : 1px solid black;
    z-index : 100;


    Mein Idee soweit:
    Nun habe ich gestern folgende Lösung er- und gefunden. Also die übliche Mischung aus eigenem und geklauten. Snippets, eben.

    Ich hole mir per WordPress API get_permalink( $post->ID ), damit ich weiß, wo ich bin (und der Computer auch), dann baue ich in der index.php ein kleines php-statement mit einer switch/case Anweisung ein (jetzt wird ... ugly!) und stelle die Weiche, jenachdem, wo ich eben bin zu einem div, nebst ID:

    <?php
    switch (get_permalink( $post->ID ))
    {
    case "web-adresse vom permalink":
    {
    echo "Bei wissenswertes";
    ?>
    <div id="passender_reiter">

    </div>
    <?php
    break;
    }
    case
    ...
    ?>


    Mit dieser ID baue ich dann im css für das Reiter-Menü (also JEDEN #menu-Item!) mittels

    #passender_reiter {
    position : absolute;
    top : -3px;
    left : 521px;
    height : 1px;
    width : 139px;
    border-bottom : 1px solid white;
    z-index : 300;
    }

    einen Strich, der auf dem Menü dann auf den unteren Rand geklatscht wird.

    Leute ... es klappt, aber DAS ist häßlich! *seufz*


    Ich habe es mit mit etlichen css-Statements versucht, aber nix hat mir das Ergebnis gebracht, wie meine aktuelle Lösung.

    Allerdings ist die u.a. schon deshalb nicht gut, weil sie im HTML ein klar-namen-Adress-Statement angibt und das wiederum verrät natürlich potentiellen Hackern eine ganze Menge, also uncool (u.a. aus diesem Grund ist die Lösung auch nicht online ^^)

    Meine Frage also:
    hat jemand von euch eine "geschicktere" Lösung, OHNE javascript, OHNE jpegs reinzuklatschen, etc.

    Also reines CSS, php, html

    Ich habe wirklich etliche Seiten durchgelesen und versucht zu verstehen, aber gefühlte 130% sind js und jpegs.

    beste Grüße und Danke schonmal für jede Antwort!
    Moorsau

    May "the Loop" be with You!

    • 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

  • Ok, viel einfacher ist es nicht - zugegebenermassen.

    Je nachdem wie du dein Menü aufrufst (wp_list_pages , wp_nav_menu) vergibt wp schon spezielle klassen für den aktiven Menüpunkt (current_page_item , current_menu_item vs. page_item und menu_item für (alle) inaktiven). Darüber kannst du den Aktiven anders gestalten als die Inaktiven -> border-bottom etc. , was dann im Anschluss mittels der "position: absolute; bottom/top: -Xpx;" des gesamten Menüs (durch Überlappung) zu dem Karteikarten-Look führt.

    lg, pixselig

    ps: je nachdem wie man das Menü einbaut ist ein "z-index" nicht zwingend nötig ;)

  • hm, das Problem ist aber immer, daß das Menü in der gleichen Ebene liegt und i.d.R. auch im gleichen div-Tag. Den zusätzlichen habe ich je erst für jeden Aufruf neu eingeführt. Ohne zindex würd' ich es ja gar nicht hinbekommen.

    Wenn ich also border-bottom setze, dann ist das eben in der gleichen Ebene wie das ganze Menü, oder nicht? Klar kann ich das über a:hove, etc. differenzieren, aber es ist eben alles im Menü. Daher habe ich ja diesen "Aufwand" betrieben. Skurilerweise (find' ich) wird die entsprechende Stelle übrigens doch nicht im "Seitenquelltex anzeigen" angezeigt, aber da will ich nochmal reinschauen, vielleicht brauch' ich 'ne Pause.

    Zudem habe ich den Unterstrich bei mir (der das Karteisystem nach unten begrenzt) als Extra-div drin, auch da wußte ich mir nicht anders zu helfen.
    Leeres Extra-div im html, Eigenschaften per css

    Inzwischen komme ich aber immer mehr zu dem Ergebnis, daß CSS-Lösungen nach außen oft elegant, aber nach innen niemals wirklich kurz sind.

    Aber jetzt habe ich ja wieder ein paar Schlagworte für die Google-Fütterung.

    beste Grüße und nochmals Danke!
    Moorsau

    PS
    ich versuche mal ob ich einen Screenshot reinbekomme.

    May "the Loop" be with You!

Jetzt mitmachen!

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