✔ Farbe der Navigation ändern

Möglich ist alles :D

Die Angabe
Code: 
.nav li.sfHover { background:#510e00; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  }

aus dem geposteten CSS-Code beschreibt den gehooverten Listenpunkt, in deinem Bild also Home.
Du müsstest
Code: 
.nav {
also um jene Angaben ergänzen. Entweder klatscht du das Zeug von oben (bis auf background) direkt hinein und hast dann dieselben "Rundungen" wie beim aktiven li, oder du spezifizierst das Ganze. Hier [Stück runter] findest du ein paar Beispiele.
 
Habe ich das auf der Seite richtig verstanden, dass die Änderungen, welche auf der Seite aufgeführt werden nur in bestimmten Browser funktionieren?

Funktioniert das mit dem { grundsätzlich in jedem gebräuchlichen Browser? Wenn ja, wo genau muss ich das { überall davor setzen. Um ganz ehrlich zu sein, habe ich das nicht so wirklich verstanden. Sorry! Aber vielen Dank für die Mühe die ihr euch gebt! :)
 
Auf der verlinkten Seite steht, dass -moz-border-radius: & -webkit-border-radius nicht mehr nötig wären, weil alle modernen Browser die "Hauptangabe" border-radius verstünden - aber ehrlich gesagt bin ich mir da nicht so sicher. Auf anderen Seiten hab ich was von Einbinden einer .htc-Datei gelesen, die die runden Ecken auch für die IE-Versionen verfügbar machen soll.

Und, sorry, das mit der geschweiften Klammer { war zu undeutig ;)
Du hattest in deiner CSS-Datei ursprünglich

Code: 
.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }

stehen (vielleicht steht mittlerweile dein background-color: #farbcode zusätzlich drin).

Als ersten Versuch könnte die Zeile z.B. so aussehen:

Code: 
.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #farbcode; }

Als Alternative könnte man auch noch mit Hintergrundbildern der einzelnen li's herumspielen beziehungsweise sich ebenjene .htc-Beispiele aus dem Netz anschauen, aber zumindest bei Letzterem hängts bei mir mit der Erfahrung.

Vielleicht hat ja noch jemand einen Tip dafür parat.
 
Nachdem es bei anderen Anpassungen zu großen Problemen gekommen ist, musste ich leider das Theme wechseln :-(. Nun habe ich allerdings wieder ein Problem mit der Navigation. Momentan sieht das ganze so aus:

Ich hätt es gerne aber so, dass der Navigationsbalken normalerweise dunkelrot ist und wenn man über die Menüpunkt geht (bzw. sie anklickt) dass der entsprechende Menüpunkt weiß wird. Das mit dem weißen Menüpunkt habe ich hinbekommen. Was noch fehlt ist folgendes ein einheitlicher dunkelroter Balken mit abgerundeten Ecken (momentan sind es einzelne dunkelrote Rechtecken, die außerdem noch viel zu hoch sind).

Könnt ihr mir da weiterhelfen? Der CSS-Code für die Navigation lautet:

Code: 
/* Layout
-----------------------------------------*/

div#menubar { float: right; margin: 25px 0 0 0; }
div#menubar a { border-bottom: 0 none; }
div#menubar h3 { display: none; }
div#menubar ul { display: block; margin: 0; padding: 0; list-style: none; height: 50px; }
div#menubar ul li { display: block; margin: 0 0 0 10px; padding: 0; float: left; position: relative; height: 50px; }
div#menubar ul ul { 
	position: absolute; display: none; width: 15em; float: none; 
	margin: 0; padding: 20px 0 0 0; left: 0; height: auto; z-index: 9999999;
}
div#menubar ul ul li { padding: 0; margin: 0; float: none; height: auto; }
div#menubar ul ul ul { float: left; margin: 0; top: 0; padding: 0;}

div#menubar ul li a { display: block; margin: 0; padding: 0 20px; outline: none; text-decoration: none; }
div#menubar ul li a span.sf-sub-indicator { float: right; padding: 0 0 0 7px; }

div#menubar ul ul a { display: block; margin: 0; padding: 15px 20px; outline: none; height: auto; border: 0 none; }
div#menubar ul ul a span.sf-sub-indicator { display: block; float: right; height: auto; }

div#menubar ul li:hover a, div#menubar ul li.hover a {  }
div#menubar ul li.current_page_item a { }
div#menubar ul li.current-menu-item a { }

div#menubar ul li:hover ul, div#menubar ul li.hover ul { display: block; z-index: 999999; }




/* Colors and Images
-----------------------------------------*/

div#menubar ul li { background: #7c0507 }
div#menubar ul li a { color: #fff; text-shadow: #000 px3 1px; }
div#menubar ul li:hover a { color: #7c0507; background: #ffffff none; }
div#menubar ul li.hover a { color: #7c0507; background: #ffffff none; }
div#menubar ul li.current_page_item a { color: #7c0507; background: #ffffff none; }
div#menubar ul li.current-menu-item a { color: #7c0507; background: #ffffff none; }

div#menubar ul li:hover ul { }
div#menubar ul li.hover ul { }

div#menubar ul li:hover li a { color: #7c0507; background: transparent url('../images/bg-menubar-item-2.png') left top repeat; }
div#menubar ul li.hover li a { color: #7c0507; background: transparent url('../images/bg-menubar-item-2.png') left top repeat; }
div#menubar ul li:hover li:hover a { background: #ffffff none; }
div#menubar ul li.hover li.hover a { background: #ffffff none; }

div#menubar ul li:hover li:hover li a { color: #7c0507; background: transparent url('../images/bg-menubar-item-2.png') left top repeat;  }
div#menubar ul li.hover li.hover li a { color: #7c0507; background: transparent url('../images/bg-menubar-item-2.png') left top repeat;  }
div#menubar ul li:hover li:hover li:hover a { background: #ffffff none; }
div#menubar ul li.hover li.hover li.hover a { background: #ffffff none; }


/* Typography
-----------------------------------------*/

div#menubar ul { }
div#menubar ul li a { font: normal 12px/30px Helvetica, Arial, sans-serif; }
div#menubar ul ul li a { font: normal 12px/20px Helvetica, Arial, sans-serif; }

In diesem Theme sind die CSS-Codes auf viele CSS-Dateien verteilt. Wenn ihr noch weitere Codes benötigt, sagt bitte bescheid.

Vielen Dank bereits im Voraus!

Viele Grüße
Sebastian
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück