Menüfelder mit verschiedenen Farben

[Sascha]

Ich möchte ein Menü haben, das beim ansteuern, des jeweiligen Feldes seine Farbe verändert und die Größe des Feldes.   Ich habe bis jetzt folgende Lösung. Doch das mit der Farbe bekomme ich nicht hin, auch ist mein Menü nicht bündig an der linken Seite.
Für eine Hilfe wäre ich sehr dankbar

Sascha

[code lang=html]  
  
<style type="text/css">  
  
ul.haupt {  
list-style-type: none;background: #000;  
height:112px;  
}	  
  
li.haupt {  
float:left;  
}	  
a.haupt {  
display: block;  
}  
  
a.haupt:link, a.haupt:visited{  
background: #F1EDC2;  
border: 1px solid #CDBE70;  
color: #000;  
width: 100px;  
height: 100px;  
padding: 5px;  
text-decoration: none;  
}  
  
a.haupt:hover{  
border: 1px solid #008800;  
color: #191970;  
width: 100px;  
height: 200px;  
padding: 5px;  
text-decoration: none;  
}  
  
</style>  
	  
  
<ul class="haupt">  
<li class="haupt"><a class="haupt" href="xxxx">1</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">2</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">3</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">4</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">5</a></li>  
</ul>  
  
  

~~~[/code]

[suit]

Einerseits: das Verändern der Größe einzelner Menüpunkte die sich im normalen Fluss befinden ist eine unkluge Idee - überleg dir das vielleicht nochmal.

Anderseits: dein Markup ist höchst unsinnig und verkompliziert dein Ansinnen - sei so nett und nimm dieses Markup und versuch nochmal es zu formatieren.

<ul id="haupt">  
 <li><a href="xxxx">1</a></li>  
 <li><a href="xxxx">2</a></li>  
 <li><a href="xxxx">3</a></li>  
 <li><a href="xxxx">4</a></li>  
 <li><a href="xxxx">5</a></li>  
</ul>

Ich sehe übrigens keinen Grund, warum sich die Textfarbe des Menüpunktes beim Mousehover nicht ändern sollte.

a.haupt:hover sollte sowohl a.haupt:link alsauch a.haupt:visited überschreiben.

[Sascha]

Wahrscheinlich habe ich mich falsch ausgedrückt. Es sollen verschieden Farben sein.

also

<ul id="haupt">
 <li><a href="xxxx">1</a></li>
 <li><a href="xxxx">2</a></li>
 <li><a href="xxxx">3</a></li>
 <li><a href="xxxx">4</a></li>
 <li><a href="xxxx">5</a></li>
</ul>

wenn ich das Gerüst jetzt nehme, dann z.B.
bei 1 rot
bei 2 grün
etc. das bekomme ich nicht hin

Sascha

[suit]

Wahrscheinlich habe ich mich falsch ausgedrückt.

Offenbar, ja :)

Es sollen verschieden Farben sein.

Das ändert die Sachlage: Du brauchst für jeden Menüpunkt eine ID da nth-child() leider nicht flächendeckend funktioniert - "Irgend Ein" Browser ist da meistens dagegen ;)

wenn ich das Gerüst jetzt nehme, dann z.B.
bei 1 rot
bei 2 grün
etc. das bekomme ich nicht hin

Ja, aber auch mit deinem anderen wäre es nicht möglich gewesen.

#haupt a { color: blue; }  
  
#menupunkt1:hover { color: red; }  
#menupunkt2:hover { color: green; }  
#menupunkt3:hover { color: yellow; }

[Gunnar Bittersmann]

@@suit:

nuqneH

Es sollen verschieden Farben sein.

Das ändert die Sachlage: Du brauchst für jeden Menüpunkt eine ID

Njein, das hängt davon ab, was man will.

da nth-child() leider nicht flächendeckend funktioniert - "Irgend Ein" Browser ist da meistens dagegen ;)

CSS-Expression.

Qapla'

PS: Auch der Hinweis auf Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen] könnte hier angebracht sein.

[suit]

Njein, das hängt davon ab, was man will.

Punkt für dich.

da nth-child() leider nicht flächendeckend funktioniert - "Irgend Ein" Browser ist da meistens dagegen ;)

CSS-Expression.

Es gibt noch genug andere verbreitete Browser die nth-child() nicht verstehen und kein IE sind :(

[Sascha]

Danke erst mal für die tolle Hilfe, vieleicht kannst du mir nochmal helfen?

Jetzt klappte es, aber ich verstehe immer noch nicht ganz wie ich den LINKS auch eigene Farben zuordnen kann, beim hover klappt es aber, nur beim LINK leider nicht.

Sascha

[code lang=css]  
  
  
  
<style type="text/css">  
  
  
  
#haupt {  
	list-style-type: none;  
	background: #000;  
	height:102px;  
	margin:0;  
	padding:0;  
	border: 1px solid #CDBE70;  
	}  
#haupt a { float:left;  
width:60px;  
height:100px;  
border: 1px solid #fff;  
display:block;  
color:#FFF;  
text-decoration:none;}  
  
  
#menupunkt1:hover { background: red; color: #000; width:180px;}  
#menupunkt2:hover { background: green; color: #000; width:180px;}  
#menupunkt3:hover { background: yellow; color: #000; width:180px;}  
#menupunkt4:hover { background: black; color: #000; width:180px;}  
#menupunkt5:hover { background: red; color: #000; width:180px;}  
  
</style>  
	  
  
<ul id="haupt">  
 <li><a id="menupunkt1" href="xxxx">1 das ist ein Test</a></li>  
 <li><a id="menupunkt2" href="xxxx">2 das ist ein Test</a></li>  
 <li><a id="menupunkt3" href="xxxx">3 das ist ein Test</a></li>  
 <li><a id="menupunkt4" href="xxxx">4</a></li>  
 <li><a id="menupunkt5" href="xxxx">5</a></li>  
</ul>  
  
  
  

~~~[/code]

[suit]

Jetzt klappte es, aber ich verstehe immer noch nicht ganz wie ich den LINKS auch eigene Farben zuordnen kann, beim hover klappt es aber, nur beim LINK leider nicht.

Genauso - anstatt #menupunkt1:hover schreibst du halt #menupunkt1 - oder verstehe ich deine Frage grade falsch?

[Sascha]

Ich habe vergessen meine neuen "Gedanken" einzufügen

[code lang=css]  
  
<style type="text/css">  
  
ul#haupt {  
list-style-type: none;  
background: #000;  
height:112px;  
margin:0;  
padding:0;  
border: 1px solid #CDBE70;  
}	  
  
li#haupt {  
}	  
  
  
ul#haupt a {  
float:left;  
width:100px;  
height:100px;  
border: 1px solid #fff;  
display:block;  
color:#FFF;  
text-decoration:none;  
}  
  
ul#haupt a:hover {  
background:#000080;  
}  
  
</style>  
	  
  
<ul id="haupt">  
 <li><a href="xxxx">1</a></li>  
 <li><a href="xxxx">2</a></li>  
 <li><a href="xxxx">3</a></li>  
 <li><a href="xxxx">4</a></li>  
 <li><a href="xxxx">5</a></li>  
</ul>  
  
  
  

~~~[/code]

[MudGuard]

Hi,

Ich möchte ein Menü haben, das beim ansteuern, des jeweiligen Feldes seine Farbe verändert und die Größe des Feldes.   Ich habe bis jetzt folgende Lösung. Doch das mit der Farbe bekomme ich nicht hin, auch ist mein Menü nicht bündig an der linken Seite.

Du sagst ja auch nirgends, daß das ul und die li keinen linken margin und kein linkes padding haben sollen.

Warum gibst Du eigentlich allen li und allen a die Klasse haupt?
Es reicht vollkommen, wenn das ul die Klasse hat, der Rest ist dann per Nachfahrenselektor auf die zugehörigen li/a einschränkbar.

Da a-Elemente per default display:inline sind, haben width und height keine Auswirkung (außer im kranken IE ...).

cu,
Andreas