Navigation mit css - Problem gelöst.

Begonnen von MBurger, 26. Februar 2005, 13:05:19 Uhr

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

MBurger

26. Februar 2005, 13:05:19 Uhr Letzte Bearbeitung: 16. April 2005, 18:41:11 Uhr von MBurger
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)
Linux is like a wigwam!
No windows, no gates
and an apache inside.

MBurger

Hat sich erledingt. Ich habe noch ein Paar Fehler gefunden.
Linux is like a wigwam!
No windows, no gates
and an apache inside.