Probleme mit Menue

Precog · 25. September 2007

Hi,

ich habe mit Hilfe von CSS und ein dropdown-Menue erstellt, dass soweit auch gut funktioniert.

HTML:

<html>
<head>
<style>
#navi, #navi ul { list-style-type:none; margin:0; padding:0; } 

#navi li { width:153px; float:left; } 	
#navi li ul { display:none; } 
#navi li:hover ul { display:block; } 

#navcontainer { height:24px; position:relative; }  
#navi { position:absolute; }

</style>
</head>

<body>

<div id="navcontainer">
<ul id="navi">
  <li><a href="#"><img src="button1.jpg" width="200"></a>
    <ul>
          <li><a href="#">Eins</a></li>
	  <li><a href="#">Zwei</a></li>
	  <li><a href="#">Drei</a></li>
    </ul>
  </li>
  <li><a href="#"><img src="button2.jpg" width="100"></a>
    <ul>
          <li><a href="#">A</a></li>
	  <li><a href="#">B</a></li>
	  <li><a href="#">C</a></li>
    </ul>
  </li>
</ul>
</div>

</body>
</html>

Mein Problem ist, dass ich das dropdown Menue genauso breit haben will wie die jeweilige Buttongrafik. Koennt ihr mir helfen?

Danke,
Precog

PS: Wie kann ich dem Button1-dropdown andere Link-Hover Effekte usw zuweisen als dem Button2-dropdown?

mackattack · 27. September 2007

Moin,

du solltest erstmal versuchen, deine Style-Definitionen für die einzelnen Menüpunkte auf das a-Tag anzuwenden und nicht auf das li. Wenn du dem a-Tag dann noch die Eigenschaft display:block; gibst, dann ist der a-Tag genauso groß, wie das LI es ihm vorgibt.

Wenn du den Menüpunkten unterschiedliche Styles geben willst, würde ich dir vorschlagen, entweder mit ID- oder Klassen-Selektoren zu arbeiten.

Ich würde bei den Button-Grafiken empfehlen, die als Hintergrund der a-Tags einzubinden. Wird aber halt erst dann wirklich möglich, wenn du denen ne ID oder ne Klasse gibst, um sie zu identifizieren. Den jeweiligen Selektoren musst du dann natürlich noch die fixe Breite und Höhe der Grafik geben. Es bietet sich auch immer an, zusäzlich zu den Grafiken im Hintergrund, noch Text in den a-Tags stehen zu haben, den mit einem Span zu umgeben und per CSS auszublenden. Dann hast du bei deaktiviertem CSS immernoch lesbare Menüpunkte, die auch von Suchmaschinen und Screenreadern interpretiert werden können.

Ich hoffe, das hilft dir ein bisschen. Ich will dir jetzt keine Beispiele geben, weil solche Fälle immer ideal sind, um etwas dazu zu lernen

... Mit ein bisschen Mühe und Recherche wirst du schon zu deinem gewünschten Ergebnis kommen.

Peace,
MackAttack

Probleme mit Menue

Precog

Erfahrenes Mitglied

mackattack

Mitglied

Neue Beiträge