Hallo zusammen,
ich habe in letzter Zeit ein bisschen mit CSS herumgespielt und eine nette Möglichkeit gefunden, um das Navigationsmenue zu gestalten. Leider ist das ein ziemlich übler Hack (siehe unten) und ich kriege das ganze nicht html-valide außerdem werden die Menue-Einträge in Lynx nicht als Links angezeigt. Ihr findet meine derzeitige Lösung unter
http://www.mekelburger.org/test www.ig-welsh.de (http://www.ig-welsh.de). Am besten seht ihr euch die Seite mit einem Mozilla an. Sie sollte zwar auch mit anderen Browsern funktionieren, aber es kann sein, dass dann das, was ich erreichen will nicht vollständig angezeigt wird.
Es geht mir um folgendes:
- Der Kreis neben dem Menue-Eintrag soll ausgefüllt werden, wenn man mit der Maus über den Link fährt.
- Der Link soll über die gesamte Seite des Menüs gehen.
- Standardmäßig werden Links via hover grau hinterlegt (siehe E-Mail-Link). Das soll mit denen in der Navigation nicht passieren.
- Ich möchte so weit es geht auf Java-Script verzichten
- Die Seite soll HTML-Konform werden.
Derzeit sieht die Lösung wie folgt aus:
<div id="menue1" class="menue">
<div class="ml"><a href="index.php?topic=rasseportrait&sub=index" class="menue-link">Menue-Eintrag 1</a></div>
<div id="sub-menue1" class="hov">
<ul class="menue-ul">
<a class="nav" href="index.php"><li class="menue-eintrag">ein Link</li></a>
<a class="nav" href="index.php"><li class="menue-eintrag">noch einer</li></a>
<a class="nav" href="index.php"><li class="menue-eintrag">usw.</li></a>
<a class="nav" href="index.php"><li class="menue-eintrag">usf.</li></a>
<a class="nav" href="index.php"><li class="menue-eintrag">...</li></a>
</ul>
</div>
</div>
Dass die <li>-Tags innerhalb der <a>-tags stehen ist absolut nicht vorgesehen. Ich würde lieber etwas in der Art machen:
<a style="width=180px;background-image=url(...);backfround-repeat=no-repeat;" href="bla">fasel</a>
aber leider krige ich weder <a> auf eine feste breite, noch wäre damit das "background-color=#eeeeee" aufgehoben und zu allem Überfluss scheint opera auch noch das "backfround-repeat=no-repeat;" komplett zu ignorieren.
Gruß Moritz
Habe das Problem lösen können, Lösung gibts unter www.ig-welsh.de (Quelltext)
Hat sich erledingt. Ich habe noch ein Paar Fehler gefunden.