CSS Navigation div ausblenden und wieder anzeigen

[macmensa]

Hallo Gunnar... (sorry, vorhin falschen Namen genommen)

Hier nun die Endlösung im Code, als erstes das HTML:

Endlösung?

das war geschrieben ohne Nachzudenken... sorry...!

Also denn, zurück auf Anfang... Ich habe mir deine Ratschläge zu Herzen genommen und alles nochmal überarbeitet...

Laut Validate ist die Seite im jetzigen Zustand zwar fehlerfrei, jedoch habe ich dafür wieder zwei, drei alte Probleme...

Hier der aktuelle Link zur Testseite... abgespeckt auf das nötigste:

Neue Testseite Navigation

Kuckuckseier und alles verschlimmbesserte ist verschwunden und ich muss zugebeben das sieht nun auch im CSS Code um einiges einfacher und kürzer aus... bisher zumindest:

#navi {  
position: absolute;  
width: 165px;  
top: 175px;  
}  
  
#navi li {  
position: relative;  
}  
  
#navi ul {  
list-style: none;  
padding: 0;  
}  
  
#navi a {  
display: block;  
height: 42px;  
padding-left: 10px;  
margin-bottom: 5;  
text-decoration: none;  
font: bold 12px arial, helvetica, sans-serif;  
color: #999999;  
background-repeat: no-repeat;  
background-position: top right;  
}  
  
#navi a:hover {  
color: #bdb177;  
}  
  
#navi ul ul a, #navi ul ul ul a {  
display: block;  
height: 15px;  
font: bold 11px arial, helvetica, sans-serif;  
background: #666666;  
margin: 3 0 0 8;  
padding: 2px 3px;  
}  
  
#navi ul ul ul a {  
background: #bdb177;  
color: #000000;  
margin-left: 35;  
margin-top: 3;  
}  
  
#navi ul ul ul a:hover {  
color: #666666;  
}  
  
div#navi ul ul ul,  
div#navi ul ul,  
div#navi ul li:hover ul ul  
{display: none;}  
  
div#navi ul li:hover ul,  
div#navi ul ul li:hover ul  
{display: block;}  
  
#raum {  
background-image: url("../assets/images/raumb40.jpg");  
}  
  
#shuttle {  
background-image: url("../assets/images/shuttleb40.jpg");  
}  
  
#iss {  
background-image: url("../assets/images/issb40.jpg");  
}  
  
#moon {  
background-image: url("../assets/images/moonb40.jpg");  
}  
  
#ground {  
background-image: url("../assets/images/groundb40.jpg");  
}  
  
#glossar {  
background-image: url("../assets/images/augeb40.jpg");

Daher nun zu meinem alten, neuen Problem...

1. Der Text neben dem Bild wird nun nicht mehr zentriert dargestellt. vertical-align hilft mir ja nicht, da es ein Block Element ist.

1.1 Ich musste #navi a eine height geben, da sonst das Hintergrundbild abgeschnitten wird. overflow:visible hat mir nicht geholfen. Und line-height funktioniert ebenfalls nicht

2. Beim ausklappen der Unterseiten beginnt er das Hintergrundbild zu wiederholen, obwohl background-repeat: no-repeat gesetzt ist. Auch dieses Problem bekomme ich gerade nicht in den Griff.

„Bei derartig invalidem Code [...] kann man eigentlich nicht von Darstellungsfehler sprechen - eher von Darstellungswunder.“ [MudGuard]

Erwähnte ich, das ich Wunder mag?! Aber du hast recht... Viele Fehler addieren sich manchmal zwar zu einem richtigen Ergebniss, aber Fehler bleiben es trotzdem...

HTML und CSS sind nun wie gesagt fehlerfrei, aber Hintergrundbild und align muss ich nun noch irgendwie in den Griff bekommen... Hoffe ich darf weiter auf so konstruktive Hilfe hoffen...

Danke und Gruss... Mac