Aktives Mitglied
Hallo,
ich möchte für mein Main Menü in meinem WP-Theme die CSS-Werte für a:focus und a:active bestimmen. In meiner CSS Datei habe ich die Navigation mit der id "navi" bestimmt und darüber sämtliche Werte für a, a:active, a:hover und a:focus bestimmt.
Als reine HTML-Version funktioniert das auch einwandfrei. Nur sobald ich es in mein Theme integriere nicht mehr. Ich habe gesehen, dass WP das Menü nochmals in ein DIV mit class="menu" packt.
Leider kann ich ja über die Klasse nicht die Werte der darin liegenden Elemente bestimmern, wie bspw. bei einer id (#navi a:hover in meinem Fall).
Gibt es da irgendeinen Weg, das doch noch irgendwie hinzukriegen. Denn meine Werte für :hover übernimmt auch die Klasse von der übergeordneten id.
Mein CSS-Code:
Und das HTML, das WP generiert:
Es wäre schade, wenn man die Werte nicht übergeben könnte, vor allem, weil :hover auch noch übernommen wird.
Es wäre schön, wenn mir jemand einen Tipp oder einen Lösungsansatz nennen könnte.
Besten Dank im Voraus.
ich möchte für mein Main Menü in meinem WP-Theme die CSS-Werte für a:focus und a:active bestimmen. In meiner CSS Datei habe ich die Navigation mit der id "navi" bestimmt und darüber sämtliche Werte für a, a:active, a:hover und a:focus bestimmt.
Als reine HTML-Version funktioniert das auch einwandfrei. Nur sobald ich es in mein Theme integriere nicht mehr. Ich habe gesehen, dass WP das Menü nochmals in ein DIV mit class="menu" packt.
Leider kann ich ja über die Klasse nicht die Werte der darin liegenden Elemente bestimmern, wie bspw. bei einer id (#navi a:hover in meinem Fall).
Gibt es da irgendeinen Weg, das doch noch irgendwie hinzukriegen. Denn meine Werte für :hover übernimmt auch die Klasse von der übergeordneten id.
Mein CSS-Code:
Code:
#navi
{padding: 0;
list-style-type: none;
position: relative; }
#navi li {float: left;}
#navi a
{float: left;
position: relative;
margin: 0px 20px 0px 0px;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
text-decoration: none;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
border: none;
color: #111111;
text-shadow: 1px 1px 0px rgba(255,255,255,0.3);}
#navi a:hover, #navi a:active, #navi a:focus
{color: #da0615;
text-shadow: none;
text-shadow: 1px 1px 0px rgba(255,255,255,0.5);}
Code:
<div id="navi">
<div class="menu">
<ul>
<li class="page_item page-item-6"><a href="">Home</a></li>
<li class="page_item page-item-8 current_page_item"><a href="">News</a></li>
<li class="page_item page-item-10"><a href="">Produkte</a></li>
<li class="page_item page-item-12"><a href="">Service</a></li>
<li class="page_item page-item-14"><a href="">Galerie</a></li>
<li class="page_item page-item-16"><a href="">Über uns</a></li>
<li class="page_item page-item-18"><a href="">Kontakt</a></li>
<li class="page_item page-item-20"><a href="">Karriere</a></li>
<li class="page_item page-item-22"><a href="">FAQ</a></li>
</ul>
</div>
</div>Es wäre schön, wenn mir jemand einen Tipp oder einen Lösungsansatz nennen könnte.
Besten Dank im Voraus.
