Autor |
Nachricht |
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Mi 20.02.2008 18:47
Titel [CSS] Navigation bei a:hover bold > Verschiebung vermeide |
|
|
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 .
Zuletzt bearbeitet von Xaven am Mi 20.02.2008 18:48, insgesamt 1-mal bearbeitet
|
|
|
|
|
joe
Dabei seit: 28.06.2005
Ort: berlin
Alter: -
Geschlecht:
|
Verfasst Mi 20.02.2008 20:59
Titel
|
|
|
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.
|
|
|
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 20.02.2008 23:27
Titel
|
|
|
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)? 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
|
|
|
|
|
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 21.02.2008 10:53
Titel
|
|
|
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!
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 21.02.2008 11:28
Titel
|
|
|
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.
|
|
|
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Do 21.02.2008 11:53
Titel
|
|
|
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.
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 21.02.2008 12:05
Titel
|
|
|
Lies meinen Post nochmal genau:
heiko_rs hat geschrieben: | Abhilfe: li floatet mit width (clearen nicht vergessen) und a bekommt display: block;. |
|
|
|
|
|
Xaven
Threadersteller
Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht:
|
Verfasst Do 21.02.2008 12:19
Titel
|
|
|
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
|
|
|
|
|
|
|
|
Ä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
|
|