x Divs nebeneinander fehlerfrei ausrichten und IE-Background Problem
pebbo
- sonstiges
Hallo,
ich habe seit ewigen Zeiten ein Problem, dass ich nicht gelöst bekomme und wollte mich mal schlau machen, ob hier jemand mit den gleichen Dingen zu kämpfen hat wie ich, oder sogar Lösungen vorschlagen kann.
Es geht um 2 Dinge. Zum einen bekomme ich es nicht hin, x Divs nebeneinander zu positionieren, die zusammen 100% Breite einnehmen sollen. Im Firefox funktioniert es, ich habe allerdings beim (angenommen, ich nehme 3 Divs - Beispiellink steht weiter unten) 3. Div von links beim Resizen des Fensters (Pixel für Pixel) in der Breite entweder rechts oder links (jedoch nicht immer) einen Pixel Abstand. Im IE sorgt das wohl irgendwie dafür, dass der 3. Div von links einfach nach unten springt. Testen könnt ihr das mal hier: http://www.patrick-pecher.de/misc/selfhtml/umbruch.html - also einfach mal das Fenster im IE und Firefox in der Breite ändern (in winzigsten Schritten und genau beobachten).
Etwas, was wohl auch damit zusammenhängt, ist folgendes: Wenn ich eine Hintergrundgrafik erstelle und diese ZENTRIERT in den Hintergrund packe und dann im body Bereich der Page ein Bild zentriert auf die Page lege, funktioniert das im Firefox und die beiden Bilder sind bündig. Im IE gibt es beim Resizen des Fensters in der Breite wieder eine "Ein-Pixel-Verschiebung" und die beiden Bilder sind nicht mehr bündig. Zu testen hier: http://www.patrick-pecher.de/misc/selfhtml/bg.html - also einfach mal das Fenster im IE und Firefox in der Breite ändern (in winzigsten Schritten und genau beobachten).
Würde mich sehr freuen, wenn ich hier ein wenig Resonanz bekommen würde.
LG,
pebbo
hi,
Zum einen bekomme ich es nicht hin, x Divs nebeneinander zu positionieren, die zusammen 100% Breite einnehmen sollen. Im Firefox funktioniert es, ich habe allerdings beim (angenommen, ich nehme 3 Divs - Beispiellink steht weiter unten) 3. Div von links beim Resizen des Fensters (Pixel für Pixel) in der Breite entweder rechts oder links (jedoch nicht immer) einen Pixel Abstand. Im IE sorgt das wohl irgendwie dafür, dass der 3. Div von links einfach nach unten springt. Testen könnt ihr das mal hier: http://www.patrick-pecher.de/misc/selfhtml/umbruch.html
</faq/#Q-19>, danke.
hast du etwa wirklich erwartet, dass sich jede seitenbreite problemlos in teile von 33% bzw. 34% aufteilen lässt, ohne dass dabei rundungsfehler auftreten ...?
33% von 1000px = 330px, 34% = 340px,
330px + 340px + 330px = 1000px - fein, passt
33% von 1050px = 346,5px gerundet 347px
34% von 1050px = 357px
347px + 357px + 347px = 1051px - huch, na sowas?
gruß,
wahsaga
Das das Ganze mit Rundungsfehlern zusammenhängt habe ich mir tatsächlich schon gedacht. Mir geht es ja vielmehr darum, irgendwie eine Lösung dafür zu finden. Und sorry wegen der fehlenden Verlinkung.
Hallo pebbo!
Gut, dass es auch andere Leute gibt, die mit diesen Problemen rumkämpfen. Ich habe gerade ein ähnliches Problem mit der höhe eines oder mehrerer DIV's...
hier der Link:
http://www.schlosserei-kerner.de/
Im IE das DIV mit dem Menu zu kurz im Firefox zu lang???!!!
Vielleicht kannst du mir weiterhelfen wahsaga, da ich auch kurz vor dem Verzweifeln bin...
Gruß Mark
Dein Problem hat eigentlich nichts mit meinem zu tun, aber ich kenne es trotzdem ;) Habe es auch schon zu lösen geschafft. Ist allerdings relativ aufwändig. Und zwar musst du um die beiden Layer, die sich jeweils der Größe des anderem anpassen sollen, wenn dieser länger ist, einen weiteren Layer drum herum legen. Diesem gibt's du nun eine Hintergrundgrafik, die so breit ist, wie beide Layer in ihm zusammen. Dadurch, dass der Drumherumgelegte Layer ja automatisch so lang wird, wie der längste Layer in ihm, passt sich ja auch das Hintergrundbild der Höhe an. Es SIEHT DANN SO AUS, als ob beide Layer (Menü und Inhalt) gleich lang sein würden, aber in Wirklichkeit ist es nur das Hintergrundbild im Hintergrund des drumherumgelegten Layers.
Ein wenig doof zu erklären. Aber funktioniert ;)
Hi pebbo,
ja an so ein work-around habe ich auch schon gedacht. Mal sehen wie ich es hinbekomme, da ich auch erst, ja mehr oder weniger, Anfänger bin...
Gruß Mark
http://patrick-pecher.de/misc/selfhtml/nest.html
Da kannste dir ja mal den Quelltext ziehen. Sieht halt noch nicht pass-genau aus, aber es funktioniert schonmal grob. Das Dumme dabei ist eigentlich, dass das "Nest" auf jeden Fall Border haben MUSS, damit er sich bis unten mit der Farbe füllt. Geht also auch ohne Bild im BG, dafür mit Farbe.
Hi Pebbo,
vielen Dank, werde ich mir gleich mal ansehen...
Gruß Mark