Zum Inhalt springen

Listenmenü mit CSS

Erstellt am 10. April 2006 · 2 Antworten · letzte Antwort am 10. April 2006

Tags: Frage

Andimueto ·

habe jetzt schon sehr viel probiert ein Menü mit CSS zu gestalten. Dabei habe ich auch einige nützliche Dinge in diesem Forum gefunden. Jetzt sitze ich allerdings fest und hoffe auf eure Hilfe.

Habe im Setup mein Menü wie folgt eingerichtet:

menu_links = HMENU
menu_links.special = directory
menu_links.special.value=392
menu_links.entryLevel = 1
menu_links {

1 = TMENU
1.noBlur = 1
1.wrap = <ul class="ullevel1">|</ul>
1.NO = 1
1.NO.linkWrap = <li class="level_1_NO">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="level_1_ACT">|</li>
1.CUR = 1
1.CUR.linkWrap = <li class="level_1_CUR">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="ullevel2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li class="level_2_NO">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="level_2_ACT">|</li>
2.CUR = 1
2.CUR.linkWrap = <li class="level_2_CUR">|</li>

3 = TMENU
3.noBlur = 1
3.wrap = <ul class="ullevel3">|</ul></li>
3.NO = 1
3.NO.linkWrap = <li class="level_3_NO">|</li>
3.ACT = 1
3.ACT.linkWrap = <li class="level_3_ACT">|</li>
3.CUR = 1
3.CUR.linkWrap = <li class="level_3_CUR">|</li>
}

Nachdem die Zustände über NO ACT und CUR aber nicht sauber wiedergegeben wurden greife ich in meiner CSS-Datei jetzt mit folgendem Code zu:

#menu {
	position: relative;
	top: 30px;
	left: 0px;
	width: 150px;
	height: 100%;
	list-style: none;
}

/* ----------------Menü-Links Stufe 1 ------------------------ */
#menu  ul.ullevel1 { 
font-color:#000000; 
list-style: none;
} 
	
#menu  ul.ullevel1 a { 
display:block; 
font-color:#000000; 
background:#ffdead; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 

#menu  ul.ullevel1 a:link { 
display:block; 
font-color:#000000; 
background:#ffdead; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 


#menu  ul.ullevel1 a:visited { 
display:block; 
font-color:#000000; 
background:#ffdead; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 

#menu  ul.ullevel1 a:hover { 
font-color:#000000; 
background:#ffffcc; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
} 

#menu  ul.ullevel1 a:active { 
font-color:#000000; 
background:#ffffcc; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 

#menu  ul.ullevel1 a:focus { 
font-color:#000000; 
background:#ffffcc; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 



/* ----------------Menü-Links Stufe 2 ------------------------ */
#menu  ul.ullevel2 {
background:none;
border:none;
margin-left: 20px;  
font-color:#000000; 
list-style: none;
	}
	
#menu  ul.ullevel2 a {   
background:none;
border:none;
margin:1px;
margin-left: 20px; 
padding:1px;
margin-left: 10px;     
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}
#menu  ul.ullevel2 a:link {  
background:none;
border:none; 
margin:1px;
margin-left: 20px; 
padding:1px;     
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}
#menu  ul.ullevel2 a:visited{     
background:none;
border:none;  
margin:1px;
margin-left: 20px; 
padding:1px; 
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}

#menu  ul.ullevel2 a:hover {  
background:none;
border:none; 
margin:1px;
margin-left: 20px; 
padding:1px;   
text-decoration:underline; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}

#menu  ul.ullevel2 a:active {    
background:none;
border:none;   
margin:1px;
margin-left: 20px; 
padding:1px; 
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullethell.gif);
	}

#menu  ul.ullevel2 a:focus {    
background:none;
border:none;    
margin:1px;
margin-left: 20px; 
padding:1px;
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullethell.gif);
	}

Folgende Probleme stellen sich mir nun:
1) mein oberster Menüpunkt wird im Internet Explorer immer ohne Hintergrund wiedergegeben - warum? warum nur der oberste?
2) die Aufzählungsgrafik in der zweiten Ebene werden nicht dargestellt (in einer anderen Seite habe ich es genauso gemacht - da geht es!)

wäre schön, wenn mir einer von euch weiterhelfen kann!
Ach ja... anschauen könnt ihr euch das ganze unter:
hsg.sport.uni-augsburg.de