
Navigationsfrage
- BenBase
- Erledigt
-
-
Mit Grafiken und CSS...
-
@ Ben
Was genau meinst du denn?
-
lukix, eine super Antwort von Dir. Respekt.
Tom, diese Navigation wie er sieh hat und auch mit dem Hover Effekt.
-
Das ist die Standardnavi wie ich sie in jedem Stil drin habe, du kannst dir also einen beliebigen Stil von mir Herunterladen und das Mainmenü unten aus den CSS-Deklarationen Herauskopieren (der WBB-World-Stil ist von mir), am besten Simplicity oder Bar.
Du musst nur:
1. Die Menüicons wieder einblenden (ich mach die ja immer raus)
Der Hovereffekt ist eine einfache Hintergrundgrafik (das Dreieck) und der blaue Streifen ist Teil der Headergrafik.
-
hmm, ich nutze aber einen eigenen Stil und möchte die Navi gerne dort verwenden.
LG
-
Davon bin ich ausgegangen. Du sollst ja auch nur die Deklarationen aus dem Stil kopieren. Ich poste dir das morgen hier mal.
-
Alles klar, Danke Tom.
Die beiden Images habe ich schon und auch hochgeladen.LG
-
So, du nimmst einfach das hier:
CSS
Alles anzeigen#mainMenu { position: absolute; top: 207px; <--- Abstand von Oben einstellen z-index: 100; height: 35px; padding-right: 5px; padding-left: 0px; border: 0px; margin-left:30px; <--- Abstand von Links einstellen width:950px; } .mainMenu a { background-position: center top; float:left; font-size:1.1em; <--- Texthöhe einstellen font-weight:bold; height:35px; line-height:42px; text-align:center; text-decoration:none; border:none!important; padding: 0px 5px 0px 7px; text-shadow: 0 -1px 0 #237199; <--- Textschatten einstellen margin-right:3px; } .mainMenu .active a, .mainMenu .firstActive a, .mainMenu .lastActive a { background:transparent url(../images/stilordner/menuBG.png) no-repeat scroll 0 0; <--- Hovergrafik einstellen background-position: center top; text-shadow: 0 1px 0 #292A29; <--- Textschatten einstellen background-repeat: no-repeat; } .mainMenu a:hover { background:transparent url(../images/stilordner/menuBG.png) scroll 0 0; <--- Hovergrafik einstellen background-position: center top; text-shadow: 0 1px 0 #292A29; <--- Textschatten einstellen background-repeat: no-repeat; }
Damit sollte das dann passen. Alle relevanten Teile sind markiert.