Horizontale Navigation -- Problem ?

1. offizieller Beitrag

    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

    • Offizieller Beitrag
    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 :roll:

    du musst für die Links eine Weite vorgeben.

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

    dann brauchts du auch keine Tabelle.... 8)

    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

    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