1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 4.9 Waagrechtes Menü mit css formatieren

Dieses Thema im Forum "Design" wurde erstellt von klingi1977, 11. April 2018.

  1. klingi1977

    klingi1977 Active Member

    Registriert seit:
    4. April 2018
    Beiträge:
    29
    Zustimmungen:
    0
    Hallo Zusammen,

    ich verwende WordPress 4.9.5–de_DE mit dem Theme Twenty Fourteen.
    Ich würde gerne das ober Menu anpassen, damit es das gleiche Layout
    wie das Menü in der linken Seitenlleiste hat.

    upload_2018-4-11_12-39-3.png

    Mit Hilfe des Forums habe ich geschafft mit css code das linke Menü zu formatieren.

    /*-- Menu Links --*/
    ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 40px;
    }
    ul.menu li {
    border: 3px solid #000;
    border-radius: 15px;
    background-color: #99cc66;
    margin-bottom: 6px; /*-- Abstand zwischen den Menüpunkten --*/
    padding: 1px;
    text-align: center;
    }
    ul.menu li a {
    border-radius: 15px;
    text-decoration: none;
    color: #000;
    padding: 5px 0px;
    text-align: center;
    }
    ul.menu li:hover {
    background-color: #fff;
    }

    Jetzt wollte ich das Design mit einer neuen Class auf das Menü oben übertragen, leider klappt es nicht!

    /*-- Menue Oben --*/
    ul.nav {
    list-style: none;
    background-color: #444;
    text-align: center;
    padding: 0;
    margin: 0;
    }
    ul.nav li {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #888;
    }
    ul.nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
    }
    ul.nav a:hover {
    background-color: #005f5f;
    }
    ul.nav a.active {
    background-color: #fff;
    color: #444;
    cursor: default;
    }

    In den Menü Einstellungen habe ich die class eingetragen!

    upload_2018-4-11_12-42-21.png


    Happt Ihr einen Tipp woran es liegen könnte?

    LG, Markus
     
  2. SirEctor

    SirEctor WPDE-Team
    Mitarbeiter

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    10.860
    Zustimmungen:
    162
    Nicht die ul bekommt die Class, sondern der li. Die Formatierung stimmt also nicht ganz.

    Allerdings gehe ich davon aus, dass das Menü oben bereits eine eigene ID bekommt. Im Standard twenty fourteen müsstest du es mal mit
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    versuchen. Also das .menu weglassen. Alles andere musst du entsprechend ergänzen.

    Das .nav und die extra vergebenen Class brauchst du dann auch nicht.
     
  3. klingi1977

    klingi1977 Active Member

    Registriert seit:
    4. April 2018
    Beiträge:
    29
    Zustimmungen:
    0
    Danke für den Tipp! habe jetzt folgenden CSS-Code verwendet!
    Habe jetzt noch das Problemm das die "BUTTON" relativ hoch sind und ich die
    richtige Einstellung nicht finde damit ich die Höhe anpassen kann!

    Kannst du mir vielleicht noch einen Tipp geben?

    /*-- Navigation oben --*/
    .primary-navigation li{
    border: 3px solid #000;
    border-radius: 15px;
    background-color: #99cc66;
    margin-bottom: 3px; /*-- Abstand zwischen den Menüpunkten --*/
    padding: 1px;
    text-align: center;
    }
    .primary-navigation li a{
    border-radius: 15px;
    text-decoration: none;
    color: #000;
    padding: 1px 8px;
    text-align: center;
    }
    .primary-navigation li:hover
    {
    background-color: #fff;
    }


    upload_2018-4-11_13-43-53.png
     
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    515
    Zustimmungen:
    54
    Die Einstellungen für die Höhe dieser 'Buttons' sind ...
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Hier sind aktuell die Werte 48px eingetragen - das kannst du nach Belieben ändern. Aber beide Werte sollten gleich sein, sonst verschiebt sich die Schrift in vertikaler Richtung.
     
  5. klingi1977

    klingi1977 Active Member

    Registriert seit:
    4. April 2018
    Beiträge:
    29
    Zustimmungen:
    0
    PERFEKT :) DANKE !!!!
    Jetzt habe ich noch eine letzte Frage, gibt es eine Möglichkeit die Menüpunkte in die Mitte (und nicht rechts so wie am Bild) des grünen Balkens zu bringen?

    upload_2018-4-11_15-32-55.png

    Danke für EURE Geduld!!!!!

    LG, Markus
     
  6. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    515
    Zustimmungen:
    54
    Ja - gibt es. Allerdings ist die Zentrierung dann über die Gesamtbreite der Anzeige und nicht 'nur' über den weißen Textblock.
    Das könnte man aber, wenn dir das nicht gefällt mit ein wenig 'margin' an der richtigen Stelle etwas weiter nach rechts rücken.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    ... und fürs 'nach-rechts-rücken' könnte man zB sowas nutzen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    834
    Zustimmungen:
    51
    Du hast eine einzelne CSS-Anweisung wie folgt:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Floar right richtet das Menü rechts aus, Wofür das margin-left: 20px sein soll - man weiß es nicht genau :rolleyes:.

    Wenn du nun den oberen Teil änderst, sieht das ganze so aus.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  8. klingi1977

    klingi1977 Active Member

    Registriert seit:
    4. April 2018
    Beiträge:
    29
    Zustimmungen:
    0
    DANKE FÜR DEN TIPP :)
    Hat geklappt!

    LG, Markus
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden