Stylen der Unternavigation

cester

Ich nutze das Plugin "Navigo" und das ganze ist zu sehen unter:
Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik

Wenn man auf den Menüpunkt "Service" klickt, öffnet sich ein Untermenü mit den Punkten "Der Zauberer für Ihre Veranstaltung:" und "test menü".

Wie kann ich das Ganze jetzt so formatieren, dass die Untermenüpunkte etwas eingerückt, kleinere Schrift und nicht fett angezeigt werden?

Werbepost

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

marX

Code

#sidebar ul li {
 /* Eigenschaften 1. Ebene */
}

Leg dir einfach eine weitere Regel an:

Code

#sidebar ul li ul li {
 /* Eigenschaften 2. Ebene */
}

uind überschreibe dort die Standardeigenschaften mit deinen Werten.

cester

Wenn ich das so anlege, dann passiert überhaupt nichts...

Außerdem ist mir aufgefallen, wenn ich auf der Seite DJ-Service, Barservice, Eventmanagement Augsburg | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik bin, dann ist der Rahmen bei "Service" kleiner als die Anderen und der Untermenüpunkt "test menü" leicht hochgestellt...

Ich hab schon versucht in der CSS rumzubasteln, aber das funktioniert alles nicht...

marX

Ah, sorry, ich sehe die Schriftfarbe, -größe usw. werden über die Links definiert, nicht über die Listenelemente. Dann musst du ebenfalls die Links mit einbeziehen, also so:

Code

#sidebar a:hover, #sidebar a:active {style.css (line 414)
   /* Eigenschaften 1. Ebene */
}
#sidebar a:link, #sidebar a:visited {style.css (line 414)
   /* Eigenschaften 1. Ebene */
}
#sidebar ul ul a:hover, #sidebar ul ul a:active {
   /* Eigenschaften 2. Ebene */
}
#sidebar ul ul a:link, #sidebar ul ul a:visited {
   /* Eigenschaften 2. Ebene */
}

Alles anzeigen

cester

Hab jetzt folgende Zeilen ergänzt:

Code

#sidebar a:link,#sidebar a:visited 
{
         font-weight: bold;
         color: #807D73;
         font-size: 12px;
         padding-left: 15px;
         border-bottom:none;
}
#sidebar a:hover, #sidebar a:active
{
 font-weight: bold;
         color: #E30917;
         font-size: 12px;
         padding-left: 15px;
         border-bottom:none;
}
#sidebar ul ul a:link,#sidebar ul ul a:visited 
{
 
         color: #807D73;
         font-size: 8px;
         padding-left: 15px;
         border-bottom:none;
}
#sidebar ul ul a:hover, #sidebar ul ul a:active
{
         color: #E30917;
         font-size: 8px;
         padding-left: 15px;
         border-bottom:none;
}

Alles anzeigen

Jetzt wird aber die komplette Navigation in Schriftgröße 8 angezeigt und nicht nur das Untermenü.

Ich habe mir jetzt einmal den Quelltext zur Navigation angeschaut und der sieht folgendermaßen aus:

Code

<ul>
  <ul id="menulev1">
   <li><a href="[URL="http://wengerundpartner.de/die-agentur"]Eventagentur Augsburg - GO-Event! - The Eventcompany die Agentur | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Die Agentur">Die Agentur</a></li>
   <li><a href="[URL="http://wengerundpartner.de/firmen-events"]Betriebsfeste, Firmenjubiläen, Kick-off Veranstaltungen, Messen und Kongresse | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Firmen-Events">Firmen-Events</a></li>
   <li><a href="[URL="http://wengerundpartner.de/private-events"]Eventpersonal, Künstler, DJs, Bands, Eventfotografie Augsburg | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Private Events">Private Events</a></li>
   <li><a href="[URL="http://wengerundpartner.de/offentliche-events"]Produkt-Präsentation, Sponsoring-Event oder Abi-Party | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Öffentliche Events">Öffentliche Events</a></li>
   <li><a href="[URL="http://wengerundpartner.de/eventtechnik"]Veranstaltungstechnik, Lichttechnik und Tontechnik Augsburg | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Eventtechnik">Eventtechnik</a></li>
   <li id="menulev1active"><a id="menulev1current" href="[URL="http://wengerundpartner.de/service"]DJ-Service, Barservice, Eventmanagement Augsburg | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Service">Service</a>
   <ul id="menulev2">
    <li><a href="[URL="http://wengerundpartner.de/service/zauberer-augsburg"]Zauberer | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Zauberer">Zauberer</a></li>
    <li><a href="[URL="http://wengerundpartner.de/service/test-menu"]test menü | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="test menü">test menü</a></li>
   </ul></li>
   <li><a href="[URL="http://wengerundpartner.de/kontakt"]Kontakt zur Eventagentur Augsburg | Eventagentur Augsburg - Go-Event! - The Eventcompany - Eventmanagement, Lichttechnik, Tontechnik, Veranstaltungstechnik[/URL]" title="Kontakt">Kontakt</a></li>
  </ul>

Alles anzeigen

Muss ich da jetzt irgendwas anderes anlegen? Mich verwundern die ID`s etwas... muss ich da neue anlegen oder sind die schon vorhanden? Die Darstellung, sobald man auf "Service" klickt ist auch etwas komisch und nicht wie gewollt. Die Zeile müsste genauso hoch sein wie die anderen (z.B. Firmen-Events) und das Untermenü, besonders der Punkt "test menü" ist auch nicht zentriert sondern hochgestellt...

marX

Das hier:

Code

<ul>
  <ul id="menulev1">

ist ungültiges HTML. Nimm mal das 1. <ul> raus, dann sollte es passen.

cester

Hab das jetzt mal so gemacht und es scheint zu funktionieren.

Jetzt ist nur noch das Formatierungsproblem mit dem Navipunkt "Service" das dieser und die Unterpunkte zentriert dargestellt werden wie die anderen Menüpunkte.

Meine Sidebar.php sieht so aus:

PHP

<div id="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
 
 
 <?php if(function_exists('navigo')) navigo('exclude=34,167,208,65,41,&collapse=true&sort_column=menu_order&level1=menulev1&level2=menulev2'); ?>
 
 
  <?php endif; ?>
</div><!-- end id:sidebar -->

Und die dazugehörige CSS so:

Code

#sidebar
{
 position: absolute;
 width: 195px;
         margin-top:170px;
 left:10px;
}
#sidebar h2
{
 position: relative;
 font-size: 10px;
 color: #9B988C;
         line-height: 1.1em;
 border-top: 1px solid #9B988C;
         padding-bottom: 15px;
         padding-top: 5px;
 text-transform:uppercase;
 font-family:Arial, Georgia, Tahoma, Verdana, Serif;
}
img.profile
{
 position: relative;
 top: -2px;
 background: url(images/a26.gif) no-repeat;
 width: 146px;
 height: 75px;
 padding: 7px;
}
#sidebar ul 
{
 list-style:none;
         font-size: 12px;
         padding-left: 10px;
         padding-bottom: 5px;
 margin: 0 0 20px 0;
}
 
#sidebar ull 
{
 border-bottom: 0px;
}
#sidebar ul li 
{
 padding: 5px 0;
 
         border-top: 1px dotted #9B988C;
 margin:0;
}
#sidebar ul li ul li
{
 padding: 5px 0;
 
         border-top: 1px dotted #9B988C;
 margin:0;
}
#sidebar ul ul 
{
 padding: 0 0 0 0px;
 margin:0;
}
#sidebar a:link,#sidebar a:visited 
{
         font-weight: bold;
         color: #807D73;
         font-size: 12px;
         padding-left: 15px;
         border-bottom:none;
}
#sidebar a:hover, #sidebar a:active
{
 font-weight: bold;
         color: #E30917;
         font-size: 12px;
         padding-left: 15px;
         border-bottom:none;
}
#sidebar ul ul a:link,#sidebar ul ul a:visited 
{
 
         color: #807D73;
         font-size: 10px;
         padding-left: 25px;
         border-bottom:none;
}
#sidebar ul ul a:hover, #sidebar ul ul a:active
{
         color: #E30917;
         font-size: 10px;
         padding-left: 25px;
         border-bottom:none;
}
#sidebar ul.feeds 
{
 margin-left:0px;
         text-align:left;
}
#sidebar ul.feeds li 
{
 list-style-image:url(images/feed.gif);
         margin:5px 0;
 padding:0;
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Stylen der Unternavigation

Jetzt mitmachen!