CSS - a:hover Problem!

[THE NOXIER]

Hallo!

Ich habe vor ca ner Woche mal angefangen, ein bisschen HTML zu "lernen" - dazu haben sich auch einige meiner Freund entschlossen.

Jetzt hab ich gestern mal CSS ein bisschen angetestet, aber ich habe folgendes Problem:

Geht dazu mal einfach auf unsere Seite: www.kochcity.de

Die Seite ist (noch) aus Frames aufgebaut. Die Navigation links am Rand wollte ich durch ein einfaches CSS File aufwerten - und habe dazu den a:hover tag verwendet.

Jetzt wird aber beim Zeigen auf z.B. "Nox's Heimkino" alle anderen Links (wegen der Schriftartänderung) nach unten geschoben.

Wie mache ich es, dass das nicht passiert, obwohl der Link beim daraufzeigen "größer" werden soll?

Danke schonmal!

 

[Castor]

du hast ein ziemliches durcheinander im stylesheet:

---------------
a:link { color: rgb(170, 170, 170); font-family: Arial; }
a:visited { color: rgb(85, 85, 85); font-family: Arial; }
a:active { color: rgb(63, 63, 63); font-family: Arial; }
a:hover { color: rgb(0, 0, 0); font-family: Arial Black; }
a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
----------------

du kannst alle zusammenfügen:

a:link { color: rgb(170, 170, 170); font-family: Arial; text-decoration: none;}
etc.

das eigentliche problem liegt im "hover".
dort hast du den font "arial black"

gruss castor

ps: sry, du wolltest ja das der font grösser wird.
gib bei jedem zustand ein "padding" an.
beim hover, verkleinerst du das "padding" zu den andern.

 

[chr1stoph]

Du kannst auch alles in eine unsichtbare Tebelle packen, bei der die Höhe der einzelnen Zellen fest vorgegeben ist und der Inhalt auf mittlerer Höhe steht.

Sollte eigentlich funktionieren.

 

[Castor]

die höhe kann ja gar nicht angegeben werden, ausser mit zusätzlichen "spacern".
wieso alles so kompliziert machen, wenn alles im css gelöst werden kann?

 

[matsche]

Quick & Dirty - Lösung:
Du legst einfach die Höhe der umgebenden h3-Tags auf nen Wert fest, der sowohl Arial als auch Arial Black höhenmäßig übertrifft. Dann verschiebt sich das darunter liegende nicht mehr.

Dazu reicht schon das hier im CSS-File:

h3 {
	height: 1.2em;
}

Bei Werten kleiner als 1.5em zickt bei mir der IE6, im Mozi geht's. Also entweder 1.5em nehmen oder evtl. feste Größenangaben wie z.B. 25px oder 20pt (Wert muß halt der Schrift entsprechend groß genug sein).

Gruß,
Matsche