• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation erstellen

Rostgnom

Neues Mitglied
Hallo Community,

es geht um die Navigation auf folgender Seite.
Ich weiß, dass folgende Konstruktion für ein Menü fehlerhaft ist:
Code:
    <div class="menu">
      <a href="index.html"><div class="menupt">Startseite</div></a>
      <a href="#"><div class="menupt">Link 1</div></a> 
      <a href="#"><div class="menupt">Link 2</div></a> 
      <a href="#"><div class="menupt">Link 3</div></a> 
      <a href="#"><div class="menupt">Link 4</div></a> 
      <a href="#"><div class="menupt">Link 5</div></a> 
      <a href="#"><div class="menupt">Link 6</div></a>      
    </div>
Aber leider weiß ich keine Alternative dazu. Könnt ihr mir helfen?
 
Werbung:
Ein Menü ist eine Aufzählung von Links, also zeichnet man sie als Liste aus.

HTML:
<ul id="navigation">
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>
 
Werbung:
Warum sollte es nicht mehr funktionieren? Die Browser der neueren Generation können mittlerweile :hover auch auf andere Elemente als <a>.
 
Hier findest zu zahlreiche Menuebeispiele, die du deinen Erfordernissen entsprechend anpassen kannst.
Natürlich muss dabei der Hovereffekt per CSS bei "a:hover" hinterlegt werden.
 
Werbung:
Dann musst du für ul bzw. für li oder a eben einen Breitenwert festlegen (a zusätzlich mit "display: block;")
 
Ach wie mies :D Am display:block hats gelegen ^^ Danke

Aber wenn dieses Thema jetzt schon einmal offen ist, kann ich auch gleich mit meinen Problemen weitermachen ^^
Also in Opera wird die Seite so dargestellt wie ich sie gerne hätte. Im Firefox verschiebt sich das Menü nach unten. Und im IE ist die Navi völlig verrutscht. Wer kann mir helfen?
 
Zuletzt bearbeitet:
Ohne nähere Prüfung:
Nimm mal zunächst diesen Doctype, der hilft dem IE, damit er das CSS-Boxmodell richtig darstellen kann:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Wenn es dann noch unterschiedliche Abstände in verschiedenen Browsern gibt, könnte dies nützlich sein:
Unterschiedliche Abstnde in verschiedenen Browsern
 
Werbung:
Zurück
Oben