Freiraum um Menü

  • Hallo,

    ich möchte zwischen zwei Menüelementen einen gewissen Freiraum schaffen. Die Menüelemente stehen untereinander. Wie kann ich das genau anstellen? Es geht um eigene Menüs unter 'Design'.

    Gruß Hille

    • 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

  • Regel das am besten über das Stylesheet würde ich sagen. Menü-Elemente kriegen von WP Klassen mitgegeben. Die kannst Du im Stylesheet ansprechen, z.B. so:

    Code
    .menu li.page-item-10 {
      margin-bottom: 25px;
    }

    Falls es mehrere Menüs gibt, solltest Du das noch eingrenzen, durch Verweis auf die Sidebar oder eindeutige IDs.

  • Hallo,

    danke erst mal für deine Antwort.
    Mir geht es nicht generell um die Abstände, sondern nur um 2 Menüpunkte. Nur dort soll ein größerer Abstand sein (siehe Anhang). Habe dort zwar eine Lösung, aber das gefällt mir so nicht. Ich suche eine bessere Variante.

  • Hm... Aber wie denn sonst wenn nicht per CSS? Wie Ammaletu ja bereits sagte, kannst Du dieses eine Element ja gezielt ansteuern.

    Ja, genauso wollte ich es eigentlich auch machen. Aber genau da komme ich ins straucheln.

    Code
    <div class="dcjq-floating-menu" id="dc_jqfloatingmenu_widget-2-item">
     <ul id="menu-menue-shop" class="menu"><li id="menu-item-1524" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1084 current_page_item menu-item-1524"><a href="Link0">Obstbrände</a></li>
     <li id="menu-item-1525" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1525"><a href="link1">Liköre</a></li>
     <li id="menu-item-1526" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1526"><a href="link2">Kräuterliköre</a></li>
     <li id="menu-item-1553" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1553"><a href="link3">Kornbrände</a></li>
     <li id="menu-item-1527" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1527"><a href="link4">Geschenkpackungen</a></li>
     <li id="menu-item-1554" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1554"><a href="link5">Weinbrände</a></li>
     <li id="menu-item-1561" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1561"><a href="link6"><strong>Warenkorb</strong></a></li>
     </ul><div class="dc-corner"><span></span></div></div>

    Die zu bearbeitende Klasse wäre doch ein meinem Fall "menu-item menu-item-type-post_type menu-item-object-page menu-item-1554 "? Allerdings tritt keine Veränderung ein.

    Einmal editiert, zuletzt von Hille (28. März 2012 um 08:48)

  • Mit Leerzeichen werden mehrere CSS-Klassen getrennt, die kannst Du also nicht einfach als einen Klassennamen behandeln. Da Dein Menü aber auch IDs hat, nimm doch einfach die. das ist doch viel eindeutiger. Einfach eine Raute davor im CSS.

  • Da Dein Menü aber auch IDs hat, nimm doch einfach die. das ist doch viel eindeutiger

    Hatte ich ebenfalls getestet, allerdings ohne Erfolg (Irgend wann zweifelt man an seinem eigenen Verstand und probiert dann wahllos irgend welche Sachen). Das Problem lag woanders. In der css war ein Eintrag

    Code
    margin: 0px;

    Den hatte ich komplett übersehen. Nach entsprechender Korrektur funktionierte dann alles wieder tadellos und die gewünschte Änderung trat ein.

    Gruß Hille

Jetzt mitmachen!

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