Eine bessere Variante? (Navigation)

[Publisher]

Um die Links genau so zu positionieren wie es jetzt ist habe ich ziemilch lange rumpröbeln und korrigieren müssen. Verschiedene Varianten habe ich ausprobiert. Sodass ich nun das gefühl habe das es einfacher gehen könnte.

Ausserdem; Nun habe ich an #navig eine Textgrösse von 12px gegeben. Denn wenn das nicht ist, und man im Browser die Textgrösse vergrössert oder verkleinert, werden die Button Bilder entweder mitverkleinert oder mit vergrössert (sodass sich die Navigationanordnung verschiebt und falsch positioniert).

Wie könnte man das so Coden dass sich nur der Text vergrössern würde? Ich muss ja das Padding dem a tag geben, damit man auf der ganzen Buttonfläche klicken kann.

Diese Navigation:
DJ Sansire - official website

Codes:

<ul id="navig">
     <li><a href="../index.php" title="Zur Startseite">Startseite</a></li>
    <li><a href="../biographie.html" title="Zur Biografie">Biografie</a></li>
    <li><a href="../discographie.php" title="Zu den CDs">Discographie</a></li>
    <li><a href="../sanelectro.html" title="Lable SAN ELECTRO">SAN ELECTRO</a></li>
    <li><a href="../events1.html" title="Zu den Events">Events</a></li>
    <li><a href="../galerie.html" title="Zur Galerie">Galerie</a></li>
    <li><a href="../community/gb/gb.php" title="Zum Gästebuch">Gästebuch</a></li>
    <li><a href="../community/kontakt/kontakt.php" title="Zum Kontaktformular">Kontakt</a></li>
     </ul>

#navig { /* Navigation */
 background-color: #000;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
 border: 1px solid #000;
 font-size: 12px;
}
 
#navig li { /* Navigation - Listeneinträge */
 display: inline;
}
#navig li a{ /* Navigation - Listeneinträge Links */
 display: inline;
 text-transform: uppercase;
 color: #FFF;
 text-decoration: none;
 padding-right: 25px;
 padding-left: 24px;
 height: 30px;
 background-image: url(../images/navig_normal.gif);
 background-repeat: repeat-x;
 padding-top: 10px;
 padding-bottom: 10px;
 margin: 0px;
 font-size: 12px;
}
#navig li a:hover{ /* Navigation - Listeneinträge Links Mausüber-Effekt */
 background-image: url(../images/navig_over.gif);
}
#navig li a:visited{ /* Navigation - Listeneinträge Links Besucht-Effekt */
 color: #E0E0E0;
}

 

[_Thor_]

Wie könnte man das so Coden dass sich nur der Text vergrössern würde?

Das ist Einstellungssache des Browsers. Bei den meisten kann man wählen, ob nur der Text vergrößert werden soll, oder die gesamte Seite.

Ich muss ja das Padding dem a tag geben, damit man auf der ganzen Buttonfläche klicken kann.

Nein, dafür reicht es, wenn du dem a display: block; gibst.

 

[Publisher]

Ansonsten würdest du die Navigation auch so aufbauen?

Nein, dafür reicht es, wenn du dem a display: block; gibst.

Dann ist meine Navigation nichtmehr horizontal. Egal ob ich display:block; an #navig, #navig li oder #navig a mache

 

[_Thor_]

Ansonsten würdest du die Navigation auch so aufbauen?

Ja, so zeichnet man ein Menü aus.

Dann ist meine Navigation nichtmehr horizontal. Egal ob ich display:block; an #navig, #navig li oder #navig a mache

Die Listenelemente brauchen dafür float: left