Problem mit Menü (bzgl. "position: fixed")

[JPL]

Aloha

Aloha ;)

Haben wir wirklich zufällig die gleiche Begrüßung gewählt, oder hängst du an mein Aloha nur ein ;) an?
:-)

Du erkennst sicher auf den ersten Blick was das Problem ist?

Nö ;)

Zumindest etwas beruhigend bzgl. den Zweifeln an den eigenen "Fähigkeiten" :-)

Aber ich wage mal einen educated guess: Das Problem tritt eventuell in allen Navigationsebenen auf, ist aber nur in der ersten sichtbar, da bei den anderen ein overflow:hidden vorliegt.

Naja, die zweite und dritte Menüebene ist ja genau so definiert, hab den Code ja geschrieben. Da wird aber - obwohl sie um 20 bzw. 30, und nicht nur 10, Pixel "gepaddet" werden - nichts über den Rand hinaus verschoben.

Oder noch ein educated guess: Das label-Element steht schon in jedem Status über das li hinaus, das wird aber erst beim hovern sichtbar. Das liegt daran, dass nach den von dir geposteten CSS-Regeln das label-Element zunächst einen transparenten Hintergrund hat (eingefärbt ist nur das li) und erst beim hovern Farbe bekommt.

Siehe oben.

In beiden Fällen solltest du dir vielleicht das box-model nochmal vergegenwärtigen. Für mich verhält sich die width nämlich alles andere als intuitiv. Intuitiv würde ich erwarten, dass außen zuerst margin kommt, dann border, dann die von width vorgeschriebene Breite und dann das padding. Das ist aber nicht so. Width kommt erst ganz innen. Wenn du also ein padding festlegst, dann musst du von der beabsichtigten Elementbreite das padding abziehen, um die width zu erhalten. Oder anders ausgedrückt: in diesem Fall (ohne Border, ohne Berücksichtigung umliegender Elemente) verhält sich padding genauso wie margin!

Ja, ich blick das auch nicht, dieses vielfach verschachtelte System... Versuch und Irrtum sag ich nur :D

Aber wie gesagt: Den Code hab ich hier ja reinkopiert, die .e-Klassen selbst sind völlig identisch zueinander, abgesehen von den Padding-Werten.

So werden die .e-Klassen im Menü eingebaut:

<li  id=\"hobbies1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_2\" class=\"hackbox\""; if ($menu == "hobbies") {echo " checked=\"checked\"";} echo "><label class=\"e1\" for=\"navi_1_2\">Hobbies</label>"; echo "  
                        <ul class=\"hobbies2\">  
                                <li><input type=\"radio\" name=\"navi_2\" id=\"navi_2_2\" class=\"hackbox\""; if ($menu == "kochen") {echo " checked=\"checked\"";} echo "><label class=\"e2\" for=\"navi_2_2\">Kochen</label>"; echo "  
                                        <ul class=\"hobbies3\">...

Sehe ich prinzipiell auch keinen Unterschied.
Nur daß die Klasse .e1 von einem <LI>-Element umgeben wird, das eine ID hat...

 #hobbies1 {  
          background: #ff7707;  
          }  
  
         #hobbies1 label:hover {  
               background: #000000;  
               color: #ff7707;  
               }

...während die .e2-Klasse zuzsätzlich noch in in einer <ul><li>-Schachtel steckt, wobei dem <ul> eine Klasse zugewiesen ist.

 .hobbies2 {  
          background: #ff963f;  
                    }  
  
          #hobbies1 ul li label:hover {  
               background: #000000;  
               color: #ff963f;  
               }  
  
          #hobbies1 ul li label>a:hover {  
               background: #000000;  
               color: #ff963f;  
               }  

Letztendlich ist es nicht mehr wirklich wichtig, da ich die Hauptmenüeinträge nicht mehr mit Text mache, sondern eine Grafik einbinde:

<input type="radio" name="navi_1" id="navi_1_1" class="hackbox"><label class="e1" for="navi_1_1"><div class="karriere">&nbsp;</div></label>

Das DIV ist notwendig, weil die Grafik als transparentes PNG einbinde, des entsprechend nach rechts eingerückt ist:

   .karriere {  
          background:url(../menue/karriere-normal.png) no-repeat;  
          background-position: 20px 1px;  
          }  
  
          .karriere:hover {  
          background:url(../menue/karriere-hover.png) no-repeat;  
          background-position: 20px 1px;  
          } 

Ob das jetzt elegant ist? Es funktioniert auf jeden Fall genau so wie es soll :)

Vielleicht noch ein Wort zur Semantik: Das <label><a>...</a></label> ist nicht semantisch sinnvoll. Wozu eine Beschriftung wenn es garnix zu beschriften gibt? Mir ist schon klar, dass du das zu Gunsten der stilistischen Gleichbehandlung von "Text zum Aufklappen" und "Linktext" gemacht hast. Da wäre es aber besser, das Markup nicht zu verbiegen (also einfach nur <a> an diesen Stellen) und die stilistische Gleichbehandlung stattdessen im CSS umzusetzen - entweder, indem du immer label und a ansprichst, oder - vllt. noch besser - indem du allen label und a eine gemeinsame Klasse "navielm" oder so zuweist und diese dann gemeinsam formatierst.

Das hast vollkommen recht - ich bin zwar absoluter Anhänger für systematisches Vorgehen - aber noch mehr Anhänger eines schlanken Codes, der nur da notwendigste Enthält. Du kannst davon ausgehen, dass wenn du diese Zeilen liest, nur noch entweder ein <label> ODER ein <a> in den Menüzeilen zu finden sein wird...
:-)

MfG,