[rutschpartie]

Korrektur des Titels: es geht um die horizontale Ausrichtung des Backgrounds. *Verzeihung -> leider kein Edit für Titel*

Hallo zusammen,

ich habe bei einem zentrierten CSS-Layout ein Problem, dass ich zunächst kurz beschreiben will (meine Suche in den bisherigen Threads war leider erfolglos):
Das Layout ist auf eine Breite von 1024px konzipiert, soll aber auch bei 800px Breite (mit horizontalem Scrollbalken) darstellbar sein.
Den gesamten Content der Seite konnte ich für alle Auflösungen sauber positionieren - nur die Hintergrundgrafik im "Body" macht Zicken. Das Problem äußert sich nur im Firefox in der Form, dass wenn ich das Layout in der Breite zusammenschiebe, mein Hintergrundmotiv bei einer Unterschreitung von exakt 1024px Breite nach links rausgeschoben wird. Im Internet Explorer hingegen bleibt das Hintergrundbild fest an der linken Browserkante "kleben" - und so soll es sein.

Der Code im body sieht wie folgt aus:

body {
margin: 0px;
padding: 0px;
background-color: #ffffff;
/*background-attachment: fixed;*/
background-image: url(../images/Hintergrund.jpg);
background-position: center top;
background-repeat: no-repeat;
}

Der DIV-container, in dem das gesamte Layout drin sitzt, sieht so aus:

div#container {
width: 1000px;
margin: 0px auto;
}

"background-attachment" habe ich versucht (und auskommentiert wie man sieht), da es keine Änderung im Firefox brachte.
Lediglich wenn ich "background-position" weglassen, erziele ich mit "background-attachment" einen festen Hintergrund - der ist dann aber linksbündig und nicht zentriert, wie er sein soll.

Hat schonmal jemand dieses Problem gehabt? Über Antworten würde ich mich sehr freuen.

[mazzo]

Zitat von rutschpartie

Das Layout ist auf eine Breite von 1024px konzipiert, soll aber auch bei 800px Breite (mit horizontalem Scrollbalken) darstellbar sein.

Ein Layout nur für vorgegebene Auflösungen ist leider häufig und auch nicht optimal. Dies mit kleinerer Auflösung mittels Querscrollbalken anzusehen, ist aber keine Entwickler-Leistung, das machen die Browser von selbst

Zitat von rutschpartie

Den gesamten Content der Seite konnte ich für alle Auflösungen sauber positionieren -

Ich denke, das Layout ist auf 1024px festgelegt, wieso auf einmal "alle Auflösungen"?

Zitat von rutschpartie

nur die Hintergrundgrafik im "Body" macht Zicken.

Der Body passt sich an die Viewportgröße an. wenn diser kleiner wird, ist "center" woanders als bei breiterem Body. Warum der IE wieder anders denkt, weiss ich nicht.
Gib das Bild doch als Hintergrund des "container" an. Oder mach das Bild 1024pixel breit mit "leerem" Rand an den Seiten, wenn Du eh schon ein fixes Layout hast. Dann kannst Du es auch mit left top positionieren.

PS: So geht das kürzer im CSS:

background: #FFF url(../img/bild.jpg) center top no-repeat;

[rutschpartie]

Zitat von mazzo

Ein Layout nur für vorgegebene Auflösungen ist leider häufig und auch nicht optimal. Dies mit kleinerer Auflösung mittels Querscrollbalken anzusehen, ist aber keine Entwickler-Leistung, das machen die Browser von selbst

Ich wollte damit auch nur klar machen, dass dieses Problem nur dann auftaucht, wenn ein horizontaler Scrollbalken vorhanden ist (also bei weniger als 1024px Browserbreite).

Ich denke, das Layout ist auf 1024px festgelegt, wieso auf einmal "alle Auflösungen"?

Da habe ich mich schlecht ausgedrückt. Das Layout ist für eine minimale Auflösung von 1024px in der Breite optimiert - funktioniert aber, ohne das sich an der Zentrierung der Elemente etwas verschiebt - auch für höhere Auflösungen.

Der Body passt sich an die Viewportgröße an. wenn diser kleiner wird, ist "center" woanders als bei breiterem Body. Warum der IE wieder anders denkt, weiss ich nicht.
Gib das Bild doch als Hintergrund des "container" an. Oder mach das Bild 1024pixel breit mit "leerem" Rand an den Seiten, wenn Du eh schon ein fixes Layout hast. Dann kannst Du es auch mit left top positionieren.

zu 1. das Hintergrundbild in den container zu setzen, habe ich versucht. Leider wird das Hintergrundbild dann - aus mir unerklärlichen Gründen - im Firefox gar nicht mehr angzeigt (im IE nachwievor).

zu 2. das Bild ist fast 1024px breit! (1013px um genau zu sein)
Das Layout ist ja auch nicht komplett "fix". Es sitzt zentriert für alle Auflösungen. Erst bei Unterschreitung der 1024px in der Breite bleibt alles linksbündig fest stehen. (Außer eben das Hintergrundmotiv im Firefox, dass sich nach links "rausschiebt".)

PS: So geht das kürzer im CSS:

background: #FFF url(../img/bild.jpg) center top no-repeat;

Kurzschreibweise ist mir geläufig - danke trotzdem. Der Übersichtlichkeit halber fand ich es gut, dass hier aufzusplitten.

[Boris]

Zeig uns doch einfach mal das Beispiel online

[rutschpartie]

Zitat von Boris

Zeig uns doch einfach mal das Beispiel online

Der Code existiert momentan nur lokal. Außerdem geht es um eine Website, die ich nicht vor Veröffentlichung zeigen darf - da sind mir leider die Hände gebunden. Habe aber mal zwei Screens angefertigt, die mein Problem (hoffentlich) verdeutlichen.

[heiko_rs]

FX verschiebt tatsächlich. Das wirst Du nur lösen können, indem Du dem Container das Bild gibst. Wenn er es dann nicht anzeigt, ist es z.B. möglich, daß er gar nicht "vorhanden" ist, weil alles innerhalb floatet und er die Floats nicht einschließt.

[mazzo]

Zitat von heiko_rs

Wenn er es dann nicht anzeigt, ist es z.B. möglich, daß er gar nicht "vorhanden" ist, weil alles innerhalb floatet und er die Floats nicht einschließt.

Also clearen! Siehe auch die FAQ dazu.

Du erkennst das "verschwinden" schnell, wenn Du dem Container ne Hintergrundfarbe oder nen Border gibst, dann sind dessen Ausdehungen klar.

[heiko_rs]

Zitat von mazzo

Also clearen!

Genau, soweit wollte ich noch gar nicht gehen Aber es sieht tatsächlich so aus, als könnte die Float-Variante zutreffen, da der FX das Bild nicht anzeigt, der IE dagegen schon (der IE schließt Floats ja ein, wenn deren umgebendes Element "Layout" hat - hier: width: 1000px; -, der FX dagegen nicht).

[rutschpartie]

Danke schonmal vorab für die bisherigen Antworten.

Zitat von heiko_rs

FX verschiebt tatsächlich. Das wirst Du nur lösen können, indem Du dem Container das Bild gibst. Wenn er es dann nicht anzeigt, ist es z.B. möglich, daß er gar nicht "vorhanden" ist, weil alles innerhalb floatet und er die Floats nicht einschließt.

Gut, ich habe das Hintergrundbild aus dem Body rausgenommen und stattdessen in eine eigene DIV gepackt, mit der ich den Container umschlossen habe. Im IE funktioniert das wunderbar - im Firefox nicht (und im Opera 8.52 übrigens auch nicht), da der Hintergrund nicht angezeigt wird.

Zitat von mazzo

Also clearen! Siehe auch die FAQ dazu.

Ich habe mir jetzt die FAQ zum Clearing zu Gemüte geführt. Nun habe ich in etwa sowas gebaut:

<div id="hintergrundbild">

   <div id="container">

      ... Content ...

   </div>

   <div style="clear:both;"></div>

</div>

Ergebnis: die Hintergrundgrafik wird nun in allen von mir getesteten Browsern (IE, Firefox, Opera) gezeigt. Das Problem des Zusammenschiebens besteht allerdings nachwievor. Wie kann ich dem jetzt Herr werden?

[mazzo]

das "verschieben" des Hintergrundbildes geschieht auch noch, wenn es Hintergrund von #container ist?