DIV Breite automatisch

[Gunnar Bittersmann]

@@bermar:

nuqneH

Bild 1 muss aber rechtsbündig positioniert werden, da sonst der abstand mit den bildern nicht passt.

Nein. Du musst deine Bilder richtig planen.

Eins ist das Hintergrundbild, das den gesamte Breite des Viewports ausfüllt. Das Bild selber muss nur so breit sein von einem Schriftzug zum anderen (40 Pixel, wenn ich richtig gemessen habe), es wird horizontal wiederholt.

Die Bilder mit dem Schatteneffekt liegen darüber. Sie enthalten nichts von dem Hintergrundbild, sondern sind teiltransparent, so dass der Schriftzug durch den Schatten hindurchscheint. Dadurch kannst du den Container beliebig auf dem Schriftzug-Hintergrung positionieren.

Teiltransparenz bekommt man mit PNG-8 hin [GRAFIKFORMAT], dann funzt es auch im IE 6. Oder aber mit PNG-24 (und evtl. für IE 6 per '* html'-Hack ein GIF).

Dein Container hat eine feste Breite von 980 Pixel? Davon würde ich abraten, da Nutzer mit schmalerem Viewport horizontal scrollen müssen.

Wenn dein Container aber doch eine feste Breite hat, brauchst du für linken und rechten Rand keine getrennten Bilder, sondern nur eins, das über die ganze Breite des Containers geht. Es wird vertikal wiederholt, dessen Höhe sollte so bemessen sein, dass dies nicht allzuoft geschieht. [PERFORMANCE-BP1]

Oder du machst den Schatteneffekt gleich mit CSS, moderne Browser können das schon: '-moz-box-shadow', '-webkit-box-shadow'.

Qapla'