nicht angemeldet
unterschiedliches FLOATing (IE & Mozilla) / Rahmenhöhe
Hi!
Fuer Euch vermutlich nix Neues, aber ich binja immer noch
im 'Puzzle-und-Lern-draus'-Modus ;-( Aufbauend von einem
Beispiel von Ingo Turski (*kusshaendchen*) bin ich auch mit
meinem Ergebnis soweit ganz zufrieden, es bleiben nur zwei
Probleme:
http://physalia.de/tmp/test.html
Ich hab eine Seite aus mehreren Boxen, in der obersten positioniere
ich das Logo links und rechts will ich Ueberschriften daneben setzen.
Soweit so klar, ich gebe dem Bild ein FLOAT mit und der Ueberschrift
ein padding, damit sie nicht 'am Bild klebt'. Nun interpretiert der IE
das eigentlich richtig, er berechnet den Margin von der Bildkante aus.
Der Mozilla (5) aber berechnet es von der linken Boxseite aus, somit
schiebt sich der Text doch wieder direkt an den Bildrand (interessanter-
weise nicht hinter das Bild). Waehle ich das Padding so, dass ich die
Bildgröße reinrechne, knallt mir die Schrift im IE (6) zu weit nach rechts.
Zur Anschauung hab ich mal einen roten Rahmen um den oberen Kasten
malen lassen...
Zweitens: Zwischen der Menü-Box links unten und dem Inhalt rechts unten
möchte ich einen Strich. Hab ich auch über border-right gelöst,
nur wird der nicht auf der ganzen Höhe der beiden Boxen gerendert,
sondern nur fuer ein kurzes Stück. Ich hab jetzt mal die _Höhe_ der
Box festgesetzt (500px), so dass man den Strich mal sieht, aber das ist
ja keine Lösung. Der muss ja automatisch auf der Gesamthöhe
laufen - aber wie?
Anmerkungen: Ich hab die Maße schon vereinzelt auf 'em' umgestellt,
aber damit bin ich noch nicht fertig, falls also wo noch px steht,
bitte ueberlesen. Und ich weiss, dass die Schriftfarbe des Menüs
alles andere als genial ist - lassen wir es aber für den Moment
bitte mal so ;-)
Danke fuer Eure Tipps
Nicola
-
Hi,
Aufbauend von einem Beispiel von Ingo Turski (*kusshaendchen*)
:-)
Soweit so klar, ich gebe dem Bild ein FLOAT mit und der Ueberschrift
ein padding, damit sie nicht 'am Bild klebt'. Nun interpretiert der IE
das eigentlich richtig, er berechnet den Margin von der Bildkante aus.Du wirfst hier padding und margin in einen Topf. Definiere Margin (vom linken Rand aus) und nicht padding, denn Du willst Doch den Außenabstand definieren.
Zweitens: Zwischen der Menü-Box links unten und dem Inhalt rechts unten
möchte ich einen Strich. Hab ich auch über border-right gelöst,Du möchtest doch offensichtlich gar keinen border, sondern einen Abstand in der Hintergrundfarbe. Auch hierfür würde ich wieder margin definieren.
freundliche Grüße
Ingo-
Soweit so klar, ich gebe dem Bild ein FLOAT mit und der Ueberschrift
ein padding, damit sie nicht 'am Bild klebt'. Nun interpretiert der IE
das eigentlich richtig, er berechnet den Margin von der Bildkante aus.
Du wirfst hier padding und margin in einen Topf. Definiere Margin (vom linken
Rand aus) und nicht padding, denn Du willst Doch den Außenabstand definieren.Stimmt *vor den Kopf schlag*. ABER mit MARGIN statt padding allein hatte
ich dennoch keinen Unterschied. Erst als ich merkte, dass ich im Code unten
das TITEL-div versehentlich erst unter dem Logo aufgemacht hatte... Nun
steht das Logo brav IM TITEL-div und siehe da, es verhaelt sich wie gewuenscht
und erwartet.(Interessant, dass der IE vorher schon umgesetzt hatte, was ich eigentlich
vorhatte - der IE ist offensichtlich echt drauf getrimmt, zumachen, was
'Halbgescheite' sich 'denken'. Kein Wunder, dass gescheite Koepfe an dem immer
verzweifeln ;-)Zweitens: Zwischen der Menü-Box links unten und dem Inhalt rechts unten
möchte ich einen Strich. Hab ich auch über border-right gelöst,
Du möchtest doch offensichtlich gar keinen border, sondern einen Abstand
in der Hintergrundfarbe. Auch hierfür würde ich wieder margin definieren.Juppi, natuerlich, so geht es.
Ich hab den Code jetzt mal sauber(er) gezogen und stelle ihn zum Vergleich
daneben:
http://physalia.de/tmp/test.html
http://physalia.de/tmp/test_neu.htmlHab's auch schon durch den Validator geschickt und noch einiges gelernt
und/oder Tippfehler rausgehauen.Falls noch jemand Lust hat, es sich mal anzugucken und sonstige Tipps loszuwerden:
die werden => sehr gern! <= entgegengenommen ;-)Herzliche Gruesse
Nicola
-
Hi,
(Interessant, dass der IE vorher schon umgesetzt hatte, was ich eigentlich
vorhatte - der IE ist offensichtlich echt drauf getrimmt, zumachen, was
'Halbgescheite' sich 'denken'. Kein Wunder, dass gescheite Koepfe an dem immer
verzweifeln ;-)nett ausgedrückt. :-)
Ich hab den Code jetzt mal sauber(er) gezogen und stelle ihn zum Vergleich
daneben:
http://physalia.de/tmp/test_neu.htmlEin paar Anregungen vielleicht noch:
Die Seitenbreite ist mit 790px sehr ungünstig gewählt. 30px weniger und die Seite würde bequem in ein 800px breites Fenster mit Scrollbalken passen und könnte bei den meisten Einstellungen auch vernünftig ausgedruckt werden.
Im CSS ist vieles überflüssig. DIVs haben keine voreingestellten margins oder paddings, die zurückzusetzen wären; ebenso wie auch body keinen border und den hat selbst das unverlinkte Logo nicht. Gleiche margins für alle 4 Seiten würde ich zusammenfassen.
Body solltest Du eine font-size:100.1% geben, wenn Du mit em arbeitest.
Das Menü mit 2 Ebenen schreit geradezu nach einer Auszeichnung als Liste. Hiermit hättest Du die Ebenen auch eindeutig gekennzeichnet. Mit class="ebene2" kann kein Textbrowser etwas anfangen.
freundliche Grüße
Ingo-
Sooooo!
nett ausgedrückt. :-)
gell ;-)
Ein paar Anregungen vielleicht noch:
super, danke!
Die Seitenbreite ist mit 790px sehr ungünstig gewählt. 30px weniger und die Seite würde bequem in ein 800px breites Fenster mit Scrollbalken passen und könnte bei den meisten Einstellungen auch vernünftig ausgedruckt werden.
fixed.
Im CSS ist vieles überflüssig. DIVs haben keine voreingestellten margins oder paddings, die zurückzusetzen wären; ebenso wie auch body keinen border und den hat selbst das unverlinkte Logo nicht. Gleiche
Ok, muss ich noch rausnehmen.
margins für alle 4 Seiten würde ich zusammenfassen.
Hab ich nicht? Muss ich nochmal gucken...
Body solltest Du eine font-size:100.1% geben, wenn Du mit em arbeitest.
done. Aenderte in meinem Mozilla nix, aber genau dafuer isses
vermutlich gedacht? ;-) (Das Erschrecken kommt erst nachher
zuhause mit dem Konqui, fuerchte ich ;-( )Das Menü mit 2 Ebenen schreit geradezu nach einer Auszeichnung als Liste. Hiermit hättest Du die Ebenen auch eindeutig gekennzeichnet. Mit class="ebene2" kann kein Textbrowser etwas anfangen.
done. Und wieder was gelernt...
(Ist vom Design zugegebenerweise mit dem Bild unten jetzt
wieder etwas unausgewuchtet. Da bin ich noch etwas auf der
Suche nach dem Gleichgewicht. Das kommt schon noch ;-)Liebe Gruesse
Nicola
-
Hi,
Body solltest Du eine font-size:100.1% geben, wenn Du mit em arbeitest.
done. Aenderte in meinem Mozilla nix, aber genau dafuer isses
vermutlich gedacht? ;-)nein. Das verhindert fehlerhafte Skalierung in anderen Browsern wie dem IE. Dieser würde ansonsten den Schriftgrad unangemessen stark ändern, woduch diese Funktion weitgehend nutzlos wäre.
Schon viel besser mit der Liste. aber margin:0 0 0 0; sehe ich z.B. immer noch;-)
freundliche Grüße
Ingo
-
-
-
-