Layout, Meinung und Hinweise
kEv*
- css
Hallo,
ich habe ein kleines schlichtes Design gebastelt was ich zur Gestaltung unserer Firmeninternen Applikationen verwenden will. Da dies eines meiner ersten CSS-Designs ist, und ich leider nicht die Erfahrungen mit all den positiven und negativen Interpretationen der Browser habe, frage ich einmal hier nach, was unbedingt verbessert werden muß.
Hier der Link zur Testseite
http://kevin-dilly.de/test/css/
Was ich bisher versucht habe, ist das verkleiner und vergrößern des Fensters mit dem IE 6.0 und dem Opera.
Im IE fiel mir auf das sobald der Schriftgrad > mittel ist das die horizontale Navigationsleiste auseinanderbricht, und der das letzte li umgebrochen wird.
Im Moment weiß ich noch nicht warum.
Bin über jeden Tip und Hinweis verdammt dankbar.
LG,
Vielen Dank
LG
--
kEv*
----
Im IE fiel mir auf das sobald der Schriftgrad > mittel ist das die horizontale Navigationsleiste auseinanderbricht, und der das letzte li umgebrochen wird.
Im Moment weiß ich noch nicht warum.
Weil er bei em Angaben die Breite berechnen muss und zwar anhand der Fontgröße. Für den Rahmen hast du 31,25em Breite angegeben. Daraus errechnet er z.B. eine Breite von 525 Pixeln für eine bestimmte Fontgröße. Die einzelnen A-Tags sind dabei 6,25 em breit. Daraus errechnet der Browser eine Breite von 105 Pixeln. 5*105 = 525. Die Breite der einzelnen a-Tags überschreitet also nicht den Rahmen.
Wenn du die Schrift aber jetzt ein bisschen verkleinerst, dann berechnet der Browser für den Rahmen z.B. eine Breite von 488 Pixeln, für jeden Rahmen aber eine Breite von 98 Pixeln. 5*98 = 490. Die ganzen a-Tags sind also um 2 Pixel zu breit. Ergo bricht der Bwoser den letzten a-Tag in die nächste Zeile um.
Das ganze ist zurückzuführen auf Rundungen, die gemacht werden müssen und die dann solche Probleme verursachen. Wobei das kein Fehler.
Als Lösung kannst du einfach dem letzten a-Tag eine Breite von 6,24em geben und dann sollte der Tag auch nicht mehr in die nächste Zeile rutschen. Wenn du das nicht willst, sollte wohl auch noch ein entsprechend platziertes overflow:hidden abhelfen.
Gruß Ben
P.S.: Ich hoffe mal, ich habs richtig erklärt :)