[CSS] Problem beim Anzeigen von Buttons

[Chrissi91]

Hi,

ich hatte in diesem Thread Verbesserungsvorschläge für meine Homepage bekommen.

Ein Thema ist sehr oft gefallen, und zwar der Header (Links). Bei jedem sind sie anders, und z.T. geht der Link "Impressum" in die nächste Zeile.

Diese Buttons oben habe ich ausschließlich mit CSS gecodet.

CSS Code:

Code:

#header{width:760px; margin-left:auto; margin-right:auto;}
#header ul{margin:0px; padding-left:0px; height:35px; line-height:44px;}
#header li{display:inline; background-color:#222222; float:left;}
#header li a{height:35px; line-height:35px; display:block; padding-left:30px; padding-right:30px; border-left:1px solid #000000; float:left;}
#header li a:hover{background-color:#444444; color:#FFFFFF; text-decoration:none;}
#header .logo{height:130px; background-image:url(images/logo.jpg); background-repeat:no-repeat; background-color:#4492C8; border-top:3px solid black;}

HTML-Code zum Einfügen:

Code:

<div id="header">


  <ul>[*][url="index.php"]Home[/url][*][url="downloads.php"]Downloads[/url][*][url="referenzen.php"]Referenzen[/url][*][url="agb.php"]AGB[/url][*][url="links.php"]Links[/url][*][url="kontakt.php"]Kontakt[/url][*][url="impressum.php"]Impressum[/url][/list]

Nun muss ich sagen, dass ich kein Ass in Sachen CSS bin und ich mir dachte, bei 760 Pixeln Längenvorgabe und bei der Aufteilung in 8 Buttons kann ja nichts passieren. Das sieht bei jedem gleich aus. ;)

Aber denkste. :mrgreen:

Hat jemand eine Idee, woran es liegt bzw. wie ich es löse.

Screens für verschiedene Ergebnisse liegen im oben genannten Thread.

[Thorben77]

Das Problem ist, dass sich der Header nicht der (möglicherweise größer oder kleiner eingestellten) Schriftgröße des Browsers anpasst, wenn Du seine Breite in Pixeln angibst.
Damit er dies tut, solltest Du seine Breite in em angeben (http://de.selfhtml.org/css/formate/w...htm#numerische).
Wie groß der Wert sein muss, musste ausprobieren.

Möglicherweise musst Du auch die Breite des ganzen „Körpers“ in em angeben, damit sich nicht noch andere Probleme ergeben.

[Chrissi91]

Ich habe alles, was den Header betrifft in em angegeben.

Jetzt sieht es bei mir auch so komisch aus. Jetzt ist der Header insgesamt kleiner.

http://www.pyrgo.de

Das war es irgendwie nicht. Trotzdem danke für deine Hilfe.

Es könnte aber auch sein, dass ich falsch umgewandelt habe. Benutzt habe ich diese Umrechnungstabelle: Hier klicken

P.S.: Habe eben nochmal deinen Beitrag durchgelesen. Aber dennoch kann etwas nicht stimmen, weil das Impressum in die nächste Zeile gesprungen ist. Oder habe ich einen Denkfehler?

[zebrafalke]

Also vorher waren bei mir alle deine Buttons in einer zeile, nach deiner Modifikation jetzt ist das Impressum in die nächste zeile gerutscht... :gruebel:

Gruß
zebrafalke

[Chrissi91]

Ja, vorher sah es bei manchen perfekt aus, bei manchen so wie bei dir jetzt mit dem Impressum.

Durch die Modifikation sieht es jetzt bei allen "scheiße" aus.

Hat noch jemand Ideen? Ich lade jetzt erstmal die alte Formatierung hoch.

Das hatte ich eben getestet:

Code:

#header{width:47.5em; margin-left:auto; margin-right:auto;}
#header ul{margin:0px; padding-left:0px; height:35px; line-height:2.2em;}
#header li{display:inline; background-color:#222222; float:left;}
#header li a{height:2.2em; line-height:2.2em; display:block; padding-left:1.9em; padding-right:1.9em; border-left:1px solid #000000; float:left;}
#header li a:hover{background-color:#444444; color:#FFFFFF; text-decoration:none;}
#header .logo{height:130px; background-image:url(images/logo.jpg); background-repeat:no-repeat; background-color:#4492C8; border-top:3px solid black;}

Aber wie ihr gesehen habt, ohne Erfolg.