mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 27.04.2024 00:06 Benutzername: Passwort: Auto-Login

Thema: [CSS] Navigation bei a:hover bold > Verschiebung vermeiden vom 20.02.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Navigation bei a:hover bold > Verschiebung vermeiden
Seite: Zurück  1, 2
Autor Nachricht
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 21.02.2008 13:26
Titel

Antworten mit Zitat Zum Seitenanfang

Dann wird Dir nichts anderes übrigbleiben, als jedem li eine ID zu geben und dadurch jeweils eine individuelle Breite zuzuweisen. Und da Deine Seite eh eine feste px-Breite hat, würde ich die Breite von li nicht in % angeben, sondern in em (damit die li bei Textvergr. "mitwachsen").

Außerdem würde ich das seitliche padding von a rauswerfen, und nicht text-align: right; einsetzen, sondern center.
  View user's profile Private Nachricht senden
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 21.02.2008 13:51
Titel

Antworten mit Zitat Zum Seitenanfang

heiko_rs hat geschrieben:
Dann wird Dir nichts anderes übrigbleiben, als jedem li eine ID zu geben und dadurch jeweils eine individuelle Breite zuzuweisen. Und da Deine Seite eh eine feste px-Breite hat, würde ich die Breite von li nicht in % angeben, sondern in em (damit die li bei Textvergr. "mitwachsen").

Außerdem würde ich das seitliche padding von a rauswerfen, und nicht text-align: right; einsetzen, sondern center.


Been there done that.
Sieht jetzt gut aus und funktioniert. Ich hoffe ich habe keine Fehler eingebaut. Man muss immer auf sovieles achten Lächel.

Die Lösung

CSS
Code:

#navigationsleiste li {
   width: 6.0em;
   border:0;
   list-style: none;
   float: right;
   }
   
#navigationsleiste li.klein {
   width: 7em;
   }

#navigationsleiste li.gross {
   width: 9em;
   }


#navigationsleiste a {
   font-size: 1.05em;
   font-family: "Trebuchet MS", Times, Verdana, Arial, Helvetica, sans-serif;
   padding: 6px 0;
   color: #000000;
   text-align:center;
   text-transform:uppercase;
   text-decoration: none;   
   display: block;
   }
   
#navigationsleiste a:hover, a.active {
   font-weight: bold;   
   }


HTML
Code:
    <div id="navigation">
      <ul id="navigationsleiste">
        <li class="klein"><a href="http://www.marioandreya.de/der-fotograf">&Uuml;ber</a></li>
                <li class="klein"><a href="http://www.marioandreya.de/category/technik">Technik</a></li>
                <li class="gross"><a href="http://www.marioandreya.de/category/architektur">Architektur</a></li>
                <li class="gross"><a href="http://www.marioandreya.de/category/reportage">Reportage</a></li>
                <li class="klein"><a href="http://www.marioandreya.de/category/musik">Musik</a></li>
                <li class="klein"><a href="http://www.marioandreya.de/category/people">People</a></li>
                <li class="klein"><a class="active" href="http://www.marioandreya.de">Neueste</a></li>
          </ul>
    </div>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 21.02.2008 14:22
Titel

Antworten mit Zitat Zum Seitenanfang

Sieht gut aus! Sofern es Dich nicht stört, dass sich durch das float: right; die Reihenfolge der Links umkehrt (ausgehend von ihrer Reihenfolge im Markup). Alternative: li links floaten und ul ohne width rechts (für Opera < 8 noch display: table; dazu geben, da er sonst die li - trotz float - untereinander darstellt).

Übrigens brauchst Du hier kein clear-div - auch #content kann clear bekommen.

P.S.: Alle li haben jetzt eine Klasse - ich würde .klein rauswerfen und dessen Breite in der allg. li-Regel deklarieren, dann brauchen nur noch die beiden breiteren Links eine Klasse.


Zuletzt bearbeitet von heiko_rs am Do 21.02.2008 14:26, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Problem mit Verschiebung von Menüpunkten bei Hover
Listen-Navigation ruckelt bei bold
Problem mit IE7 und hover-Navigation
Probleme mit CSS Hover Navigation
Navigation mit Hover Elementen in Wordpress
hover-Button/hover-Bild wird darunter eingefügt
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.