css layout

[DanyGee]

hallo,

ich habe ein zentriertes css layout. soweit sogut.
nun is die hp sehr groß und erstreckt sich bei 1024 über den bildschirmrand.
bei 1280 jedoch nich.

der content bereich,die eigentliche seite, is 780px breit und soll immer mittig sein egal bei welcher auflösung.
wenn die seite nicht mehr komplett in den browser passt weil die auflösung zu klein ist sollen die schnörkellein die links am rand sind weggeschnitten werden

cih häng ma zwei photos an, weil das echt schwer zu erklären ist
also:
bei 1280



bei 1024


der rote teil hat kein inhalt isn nurn bild... könnte man als hintergrund bild nehmen oder mittn overflow hidden ja beschneiden lassen.

mit tabellen kein problem.
wie krich ichs jedoch mit divs hin. so dass der content zentriert bleibt und das rote teil schön beschnibbelt wird???

danke

[Hallo1]

Ebenfalls mit Hintergrundbild? Oo

background-image:url('deinbild.jpg');
background-position:rechts top;
background-repeat:no-repeat;

Damit wird das Bild rechts oben als Hintergrundbild ausgerichtet und links müsste es weggeschnitten werden.

[DanyGee]

japp das is klar.

wie bekomm ich jedoch die box an den content ran ohne den content weiter nacht rechts zu schieben?

wie gesagt der content muss mittig bleiben!

[Hallo1]

Ich würde erstmal einen Div-Container machen, der alle 3 umschließt und den dann per margin:0px auto; positionieren. Dem gibst du (wie auf deinem Bild) die Hintergrundfarbe grau, da der Content ja normalerweiße größer ist als die Navis. Nun nochmal einen Div-Container mit float:left und deinem Backgroundimage und einen mit float:right; rein. Der Content müsste nun in der Mitte sein. Und width der Navis/Ränder/waß auch immer eben mit %-Werten.

<div style="margin:0px auto; width:80%; background-color:#666666;">

<div style="float:left; background-image:url('bla.jpg')....; background-color:#000000; width:20%;">
Links</div>

Content

<div style="float:right; width:20%">rechts</div>

</div>