Horizontale Navigation -- Problem ?

Captain Cupra

hallo,

hab ein problem.

Ich möchte auf meiner hp eine horizontale Navigation einbauen.
Habe mit css programmiert, daß sich aktive links in der fabre und schriftgröße ändern.

Jetzt habe ich aber das Problem , daß sich dadruch alles in der Leiste
verschiebt sobald man mit der Maus über den Link geht, weil die schrift ja größer wird.

Habe versucht das Problem mit position absolute zu lösen, aber dann ich wieder das Problem, daß alles beschissen (sorry) aussieht , sobald ich irgendetwas um die Navileiste herum ändere (Bilder oder Auflösung).

Weiß da einer Rat ?

Achja, by the way, wenn ich die Links einfach hintereinander schreibe, wie zum Teufel kriege ich die weiter auseinander ausser mit $nbsp ?
Über eine schnelle Antwort würde ich mich freuen.

Mfg

Captain Cupra

admin

Zitat

Achja, by the way, wenn ich die Links einfach hintereinander schreibe, wie zum Teufel kriege ich die weiter auseinander ausser mit $nbsp ?

Mit einer Tabelle !
Für das andere Problem habe ich jetzt auch keine Lösung parat

Michael

Ganz einfach: es reicht doch, wenn sich die Farbe beim hoovern ändert, die Größe muss ja nicht geändert werden.

Gruß, Michael

Captain Cupra

Naja, klar würde das reichen, aber wenn sich die Größe ändert finde ich es schöner !!!

das mit der Tabelle habe ich jetzt auch gemacht...

Ed Home

du musst für die Links eine Weite vorgeben.

Code

<style type="text/css">
<!--
 a {width:150px;}
-->
</style>

dann brauchts du auch keine Tabelle....

OK, danke Ed Home.

Zur Seite hin verschiebt sich jetzt nichts mehr, aber leider verschiebt sich
immer noch alles was unterhalb der Linkleiste ist nach unten, da ja beim hovern die Schrift auch höher wird.
Habe versucht über height auch die Höhe zu definieren , aber das bringt nichts

Weiß Du oder jmd anders da vielleicht auch noch Rat ?

MfG
Captain Cupra

Ed Home

also..... pack die links in ein Element, das kann sein P, DIV oder SPAN. gGib diesem Element eine ID (hier: big)
gib den links eine Weite und ein FLOAT:left; (nachfolgende Elementen dann bitte ein CLEAR:left oder Clear Both verpassen, sonst verschiebt sich das)

zur Anschauung mal ein kurzes script:

Code

<style type="text/css">
<!--
#big {background:silver; color:darkgreen; height:35px;}
 #big a {float:left;  text-align:center; font-size:11px; height:30px; width:130px;  text-decoration:none; background:white; color:blue; border:1px solid maroon; margin:1px;}
 #big a:hover {font-size:23px; background:blue; color:white;}
 #big span {float:left; padding:0px 20px; font-size:30px;}
-->
</style>
 <div id="big"><span>Big Hover Links</span>[url='#']Link1[/url] [url='#']Link2[/url] [url='#']Link3[/url]</div>

Damit kannst du erst einmal (in einem html/text Editor) herumspielen. Zum Beispiel gibt es ganz nette Effekte, wenn height:30px; im style (#big a) auf height:20px; gesetzt würde...

ok? greetz ed

Tags