tag:forum.selfhtml.org,2005:/self Menüfelder mit verschiedenen Farben – SELFHTML-Forum 2011-02-01T09:14:59Z https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491963#m1491963 Sascha 2011-01-31T10:18:39Z 2011-01-31T10:18:39Z Menüfelder mit verschiedenen Farben <p>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.<br> Für eine Hilfe wäre ich sehr dankbar</p> <p>Sascha</p> <pre><code class="block language-css"><span class="token selector">[code lang=html] <style type="text/css"> ul.haupt</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>112px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li.haupt</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a.haupt</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a.haupt:link, a.haupt:visited</span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #F1EDC2<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #CDBE70<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a.haupt:hover</span><span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #008800<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #191970<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> <ul class=<span class="token string">"haupt"</span>> <li class=<span class="token string">"haupt"</span>><a class=<span class="token string">"haupt"</span> href=<span class="token string">"xxxx"</span>>1</a></li> <li class=<span class="token string">"haupt"</span>><a class=<span class="token string">"haupt"</span> href=<span class="token string">"xxxx"</span>>2</a></li> <li class=<span class="token string">"haupt"</span>><a class=<span class="token string">"haupt"</span> href=<span class="token string">"xxxx"</span>>3</a></li> <li class=<span class="token string">"haupt"</span>><a class=<span class="token string">"haupt"</span> href=<span class="token string">"xxxx"</span>>4</a></li> <li class=<span class="token string">"haupt"</span>><a class=<span class="token string">"haupt"</span> href=<span class="token string">"xxxx"</span>>5</a></li> </ul> ~~~[/code] </code></pre> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491965#m1491965 suit suit@rebell.at http://rebell.at/ 2011-01-31T10:40:53Z 2011-01-31T10:40:53Z Menüfelder mit verschiedenen Farben <p>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.</p> <p>Anderseits: dein Markup ist höchst unsinnig und verkompliziert dein Ansinnen - sei so nett und nimm dieses Markup und versuch nochmal es zu formatieren.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>haupt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Ich sehe übrigens keinen Grund, warum sich die Textfarbe des Menüpunktes beim Mousehover nicht ändern sollte.</p> <p><code class="language-css">a.<span class="token property">haupt</span><span class="token punctuation">:</span>hover</code> sollte sowohl <code class="language-css">a.<span class="token property">haupt</span><span class="token punctuation">:</span>link</code> alsauch <code class="language-css">a.<span class="token property">haupt</span><span class="token punctuation">:</span>visited</code> überschreiben.</p> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491964#m1491964 MudGuard http://www.andreas-waechter.de/ 2011-01-31T10:44:30Z 2011-01-31T10:44:30Z Menüfelder mit verschiedenen Farben <p>Hi,</p> <blockquote> <p>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.</p> </blockquote> <p>Du sagst ja auch nirgends, daß das ul und die li keinen linken margin und kein linkes padding haben sollen.</p> <p>Warum gibst Du eigentlich allen li und allen a die Klasse haupt?<br> Es reicht vollkommen, wenn das ul die Klasse hat, der Rest ist dann per Nachfahrenselektor auf die zugehörigen li/a einschränkbar.</p> <p>Da a-Elemente per default display:inline sind, haben width und height keine Auswirkung (außer im kranken IE ...).</p> <p>cu,<br> Andreas</p> <div class="signature">-- <br> <a href="http://MudGuard.de/" rel="nofollow noopener noreferrer">Warum nennt sich Andreas hier MudGuard?</a><br> <a href="http://ostereier.andreas-waechter.de/" rel="nofollow noopener noreferrer">O o ostern ...</a><br> Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.<br> </div> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491966#m1491966 Sascha 2011-01-31T12:48:50Z 2011-01-31T12:48:50Z Menüfelder mit "verschiedenen Farben" <p>Wahrscheinlich habe ich mich falsch ausgedrückt. Es sollen verschieden Farben sein.</p> <p>also</p> <p><ul id="haupt"><br>  <li><a href="xxxx">1</a></li><br>  <li><a href="xxxx">2</a></li><br>  <li><a href="xxxx">3</a></li><br>  <li><a href="xxxx">4</a></li><br>  <li><a href="xxxx">5</a></li><br> </ul></p> <p>wenn ich das Gerüst jetzt nehme, dann z.B.<br> bei 1 rot<br> bei 2 grün<br> etc. das bekomme ich nicht hin</p> <p>Sascha</p> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491968#m1491968 suit suit@rebell.at http://rebell.at/ 2011-01-31T12:54:48Z 2011-01-31T12:54:48Z Menüfelder mit "verschiedenen Farben" <blockquote> <p>Wahrscheinlich habe ich mich falsch ausgedrückt.</p> </blockquote> <p>Offenbar, ja :)</p> <blockquote> <p>Es sollen verschieden Farben sein.</p> </blockquote> <p>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 ;)</p> <blockquote> <p>wenn ich das Gerüst jetzt nehme, dann z.B.<br> bei 1 rot<br> bei 2 grün<br> etc. das bekomme ich nicht hin</p> </blockquote> <p>Ja, aber auch mit deinem anderen wäre es nicht möglich gewesen.</p> <pre><code class="block language-css"><span class="token selector">#haupt a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#menupunkt1:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#menupunkt2:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#menupunkt3:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491967#m1491967 Sascha 2011-01-31T12:56:58Z 2011-01-31T12:56:58Z Menüfelder mit "verschiedenen Farben" <p>Ich habe vergessen meine neuen "Gedanken" einzufügen</p> <pre><code class="block language-html">[code lang=css] <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">ul#haupt</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>112px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #CDBE70<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li#haupt</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">ul#haupt a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #fff<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul#haupt a:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span>#000080<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>haupt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> ~~~[/code] </code></pre> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491971#m1491971 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2011-01-31T15:01:59Z 2011-01-31T15:01:59Z Menüfelder mit "verschiedenen Farben" <p>@@suit:</p> <p>nuqneH</p> <blockquote> <blockquote> <p>Es sollen verschieden Farben sein.</p> </blockquote> <p>Das ändert die Sachlage: Du brauchst für jeden Menüpunkt eine ID</p> </blockquote> <p>Njein, das hängt davon ab, <a href="http://forum.de.selfhtml.org/archiv/2010/1/t194570/#m1301350" rel="nofollow noopener noreferrer">was man will</a>.</p> <blockquote> <p>da nth-child() leider nicht flächendeckend funktioniert - "Irgend Ein" Browser ist da meistens dagegen ;)</p> </blockquote> <p><a href="http://forum.de.selfhtml.org/archiv/2010/6/t198641/#m1334330" rel="nofollow noopener noreferrer">CSS-Expression</a>.</p> <p>Qapla'</p> <p>PS: Auch der Hinweis auf Punkt 10 der <a href="http://www.usability.ch/Alertbox/20031110.htm" rel="nofollow noopener noreferrer">zehn meist-missachteten Homepage-Design-Richtlinien</a> [Nielsen] könnte hier angebracht sein.</p> <div class="signature">-- <br> Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.<br> (Mark Twain) </div> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491969#m1491969 Sascha 2011-02-01T07:59:38Z 2011-02-01T07:59:38Z Menüfelder mit "verschiedenen Farben" <p>Danke erst mal für die tolle Hilfe, vieleicht kannst du mir nochmal helfen?</p> <p>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.</p> <p>Sascha</p> <pre><code class="block language-html">[code lang=css] <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">#haupt</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>102px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #CDBE70<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#haupt a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #fff<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#menupunkt1:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>180px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#menupunkt2:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>180px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#menupunkt3:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>180px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#menupunkt4:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>180px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#menupunkt5:hover</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>180px<span class="token punctuation">;</span><span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>haupt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menupunkt1<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1 das ist ein Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menupunkt2<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2 das ist ein Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menupunkt3<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3 das ist ein Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menupunkt4<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menupunkt5<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> ~~~[/code] </code></pre> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491970#m1491970 suit spam.2011@rebell.at http://rebell.at/ 2011-02-01T09:14:59Z 2011-02-01T09:14:59Z Menüfelder mit "verschiedenen Farben" <blockquote> <p>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.</p> </blockquote> <p>Genauso - anstatt<code class="language-css"> #<span class="token property">menupunkt1</span><span class="token punctuation">:</span>hover</code> schreibst du halt <code class="language-css">#menupunkt1</code> - oder verstehe ich deine Frage grade falsch?</p> https://forum.selfhtml.org/self/2011/jan/31/menuefelder-mit-verschiedenen-farben/1491972#m1491972 suit suit@rebell.at http://rebell.at/ 2011-01-31T15:10:17Z 2011-01-31T15:10:17Z Menüfelder mit "verschiedenen Farben" <blockquote> <p>Njein, das hängt davon ab, <a href="http://forum.de.selfhtml.org/archiv/2010/1/t194570/#m1301350" rel="nofollow noopener noreferrer">was man will</a>.</p> </blockquote> <p>Punkt für dich.</p> <blockquote> <blockquote> <p>da nth-child() leider nicht flächendeckend funktioniert - "Irgend Ein" Browser ist da meistens dagegen ;)</p> </blockquote> <p><a href="http://forum.de.selfhtml.org/archiv/2010/6/t198641/#m1334330" rel="nofollow noopener noreferrer">CSS-Expression</a>.</p> </blockquote> <p>Es gibt noch genug andere verbreitete Browser die nth-child() nicht verstehen und kein IE sind :(</p>