Layout umsetzen mit zwei fixen Breiten

Hallo,

ich möchte folgendes Layout umsetzen und weiß noch nicht genau, wie:

Die Seite soll 960px Breit sein und zentriert.
Jetzt soll aber im Header ein Slider mit einer Breite von 1315px eingebunden werden.
Also ist er breiter als die Hauptseite. Der Kunde möchte es so, dass ein User mit größerer Auflösung mehr sieht als ein User mit kleiner...

Setze ich nun die gesamte Seite auf 1315 Breite? Aber die kompletten Inhalte sollen ja zentriert auf 960px stehen...

Wie setze ich es am besten um?

Danke

Grüße
Matu

Hallo Christian,

erster Ansatz:

Wrapper 1315px breit
Container auf 960 px setzen, zentrieren.

Jo Danke :)!

Der Header muss ja auch auf 960px zentriert werden.
Im Header kommt erst die Navi, Logo etc. darunter dann der breite Slider mit 1315px.
Muss ich den Slider einfach absolut positionieren?

Ich mach bei so Denksportaufgaben immer Skizzen :)
Dann baue ich das mal ohne CMS auf.
Und dann ins Contao.

leg doch für den breiten (breiteren) Slider einen Eigenen Layoutbereich an. dann kannst du den 13xx px breit machen und header, main, footer 960px und zentrieren. wrapper eben auch 13xx px.

Du umgibst die ganze Seite (Slider und Content) mit einem Div mit dem CSS width:100% und overflow:hidden (sonst hast Du bei einem 960 Pixel breiten Viewport horizontale Scrollbalken aufgrund des breiteren Sliders).
Den Slider positiniert Du dann mit left:50% und negativem linken Margin von 657px.
Dazu solltest Du ein Mediaquery für Auflösungen unter 960 Pixel integrieren, welches die Breite des umgebenden DIVs auf 960Pixel setzt, sofern kleinere Auflösungen die Möglichkeit haben sollen horizontal zu scrollen.

(Die anderen Vorschläge oben führen immer dazu dass Deine Seitenbreite 1352 Pixel beträgt, Du horizontale Scrollbalken hast und Du vom Slider initial immer den linken Bereich und nicht den mittleren siehst.)

Ist aber alles ziemlich unsauber.
Mach den Slider doch dynamisch .. so das er bei größeren Monitoren die geforderten Maximalbreite von 1315px hat und sich bei kleineren Auflösungen entsprechend verkleinert bis zu einer min-width von 960px. Oder gleich komplett responsive. ;)

Hab mal ne Skizze gemacht ... Anhang 11007

Sehr cool, Danke für die Anregungen.
Mach mich dann mal an die Umsetzung...

Viele Grüße
Matu