mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 19:17 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: 1, 2  Weiter
Autor Nachricht
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 20.02.2008 18:47
Titel

[CSS] Navigation bei a:hover bold > Verschiebung vermeide

Antworten mit Zitat Zum Seitenanfang

Guten Abend!

Der Threadtitel sagt eigentlich schon alles.
Ich habe eine Navigation die beim hovern, sowie bei active bold werden soll. Problem ist, dass die Buchstaben nun "hüpfen".

Wie kann ich das vermeiden?

Code:

#navigationsleiste li {
   list-style: none;
   display: inline;
   border:0;
   }

#navigationsleiste a {
   font-size: 1.05em;
   font-family: "Trebuchet MS", Times, Verdana, Arial, Helvetica, sans-serif;
   padding: 6px 13px;
   color: #000000;
   text-transform:uppercase;
   text-decoration: none;
   
   }

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




Für Hilfe sei vorab gedankt Lächel.


Zuletzt bearbeitet von Xaven am Mi 20.02.2008 18:48, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
joe

Dabei seit: 28.06.2005
Ort: berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 20.02.2008 20:59
Titel

Antworten mit Zitat Zum Seitenanfang

Probier mal das hier:

Code:
#navigationsleiste a {
   font-size: 1.05em;
   font-family: "Trebuchet MS", Times, Verdana, Arial, Helvetica, sans-serif;
      padding: 6px 13px 6px 13px;
   color: #000000;
   text-transform:uppercase;
   text-decoration: none;
   
   }

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


Vielleicht musst du mit den Werten ein bisschen rumprobieren bis das Ergebnis stimmt.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 20.02.2008 23:27
Titel

Antworten mit Zitat Zum Seitenanfang

Solange Du's mit Inline-Elementen zu tun hast (die ihre Größe ihrem Inhalt anpassen), wird es nie wirklich passen - spätestens nach Textvergrößerung wird's wieder irgendwo springen.

Abhilfe: li floatet mit width (clearen nicht vergessen) und a bekommt display: block;.

Und Achtung:

Code:
#navigationsleiste a:hover, a.active {
...
}

Schau Dir den :active-Selektor mal genau an - abgesehen davon, dass Du einen Punkt statt des Doppelpunktes verwendest, spricht er alle aktiven Links innerhalb Deines Dokumentes an. Wichtig: Auch bei Kommatrennung müssen Selektoren immer komplett sein (das wird häufig falsch gemacht). Und nimm noch :focus hinzu.

Weiterhin: Setze sicherheitshalber noch padding & margin von li auf Null (falls dies kein Universalselektor übernimmt), und wiederhole in der zweiten a-Regel nicht alles, sondern nur die Änderungen (in Deinem Falle ausschließlich font-weight).

EDIT: Oder ist .active bei Dir die Klasse des "aktiven" Links (d.h. der gerade betrachteten Seite)? *zwinker* Ist ohne den HTML-Code ja nie genau zu sagen. Aber auch dann sollte der Selektor komplett sein (d.h. inkl. ID), da er sich ansonsten nicht gegen die Spezifität von #navigationsleiste a durchsetzen kann (auch wenn's in diesem Falle zufällig klappt, weil die einzige Änderung für .active eine Eigenschaft betrifft, die in der allgemeinen Regel für die Navi-Links nicht deklariert wird, nämlich font-weight).


Zuletzt bearbeitet von heiko_rs am Do 21.02.2008 00:08, insgesamt 8-mal bearbeitet
  View user's profile Private Nachricht senden
dastef

Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 21.02.2008 10:53
Titel

Antworten mit Zitat Zum Seitenanfang

das wird nie passen .. auch wenn du beim hover/active foo N Pixel
abziehst .. denn da kommts wieder auf die Wortlänge an. Was du
probieren kannst - was bei unseren Versuchen bisher aber auch
immer gescheitert ist: letter-spacing um den abstand zwischen den
zeichen auszugleichen. je nach wortlänge, bzw art des wortes gibt
das aber auch nen ergebnis das man nicht haben möchte!
  View user's profile Private Nachricht senden
heiko_rs

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

Antworten mit Zitat Zum Seitenanfang

Eben, daher ja auch mein Vorschlag mit display: block; und width. Erst dann werden a und li unabhängig von ihrem Inhalt und dehnen sich nicht mehr aus, wenn das enthaltene Wort plötzlich breiter wird.
  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 11:53
Titel

Antworten mit Zitat Zum Seitenanfang

Das klingt alles sehr unbefriedigend.

@Heiko: Padding & Margin wird zu Beginn festgelegt.

Code:

* {
   padding: 0;
   margin: 0;
   border: 0;
   }


Meine Navigation sieht nun so aus:

Code:

#navigationsleiste li {
   list-style: none;
   display: inline;
   border:0;
   }

#navigationsleiste a {
   font-size: 1.05em;
   font-family: "Trebuchet MS", Times, Verdana, Arial, Helvetica, sans-serif;
   padding: 6px 13px;
   color: #000000;
   text-transform:uppercase;
   text-decoration: none;
   }

#navigationsleiste a:hover, a.active {
   font-weight: bold;
   }


Wenn ich in li display: block einstelle habe ich allerdings keine horizontale Navigation mehr, sondern eine vertikale?!

Wer mal reinschauen will:
http://www.marioandreya.de - die Hauptnavigation.

Bei a.active handelt es sich tatsächlich um den gerade aktiven Link.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

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

Antworten mit Zitat Zum Seitenanfang

Lies meinen Post nochmal genau:

heiko_rs hat geschrieben:
Abhilfe: li floatet mit width (clearen nicht vergessen) und a bekommt display: block;.
  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 12:19
Titel

Antworten mit Zitat Zum Seitenanfang

heiko_rs hat geschrieben:
Lies meinen Post nochmal genau:

heiko_rs hat geschrieben:
Abhilfe: li floatet mit width (clearen nicht vergessen) und a bekommt display: block;.


Ich denke ich habe es jetzt nach meinem besten Wissen umgesetzt.

Wenn ich nun allerdings eine feste Breite für li angebe variiert der Abstand zwischen den Menüpunkten da diese ja unterschiedlich lang sind.

Code:

#navigationsleiste li {
   float: left;
   width: 10%;
   list-style: none;
   border:0;
   }

#navigationsleiste a {
   font-size: 1.05em;
   font-family: "Trebuchet MS", Times, Verdana, Arial, Helvetica, sans-serif;
   padding: 6px 13px;
   color: #000000;
   text-transform:uppercase;
   text-decoration: none;   
   display: block;
   }


Zuletzt bearbeitet von Xaven am Do 21.02.2008 12:21, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Problem mit Verschiebung von Menüpunkten bei Hover
Listen-Navigation ruckelt bei bold
Probleme mit CSS Hover Navigation
Problem mit IE7 und hover-Navigation
Navigation mit Hover Elementen in Wordpress
hover-Button/hover-Bild wird darunter eingefügt
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.