Fluid header met hoogteverschil met 960 grid content

[cmegens]

Ik zit met een puzzel waar ik op dit moment zelf niet uit komt. Helaas kan ik er ook niks over vinden op het internet. Dat kan betekenen dat ik de vraag verkeerd stel of dat het probleem niet bekend is... Wie kan me dus op weg helpen?

Wat ik wil voor een project is een website die gewoon op een 16 koloms 960px grid past. Makkelijk, appeltje eitje. Die heb ik al veel gemaakt dus dat komt nu ook goed.

Echter, wat ik voorheen al een paar keer gedaan heb is dan toch bijvoorbeeld de header de volle breedte geven van het browserscherm, ongeacht hoe groot deze is. (zie bijvoorbeeld www.eigenwijs-oss.nl) Op dit voorbeeld loopt deze rode balk door tot in de oneindigheid, terwijl de echte content niet breder wordt dan 960px.

Prima, so far so good. Dat wil ik nu namelijk weer. Alleen niet met een rechte balk, maar met een balk die links anders is dan rechts. Er zit een kromming in. Zie onderstaand plaatje als voorbeeld.



Maar ik krijg het dus niet voor elkaar om dus rechts een andere achtergrond te krijgen als links.

Wat ik tot dusver heb is de achtergrond van het navigatie gedeelte met de kromming erin op een breedte van 960px. Dan kan ik dus de overkoepelende div een achtergrond geven die over de volle breedte loopt van het browserscherm. Die achtergrond is dan dus een repeat van een plaatje die op dezelfde hoogte blijft lopen. Zo dus:



Hoe pak ik dit nu aan? construeer ik het nu zo verkeerd?
Of moet ik 2 aparte divs gaan maken van 50% breedte en deze gaan herpositioneren? Hoop eigenlijk op een mooiere oplossing dan dat...

Wie kan me dus helpen?

[Bosmonster]

Een hele breede strook maken en die in het midden zetten op de achtergrond.

Je kunt het ook wel oplossen door links en rechts divs te plaatsen, maar aangezien je achtergrond lijn toch maar heel simpel is zou ik gewoon een brede achtergrond maken.

[Verwijderd]

De lage strook als horzintal repeating achtergrond, en de hoge strook met het golfje als plaatje er bovenop?

sorry, niet goed gelezen, je wilt links ook de streep laten doorlopen... even denken hoor...

Je kan een achtergrond plaatje maken dat bijv. 20 pixels breed is, dan de eerste 10px hoog, dan 10px laag en dat stretchen over de hele breedte. dan een los achtergrondplaatje voor de 960px.

[ Voor 62% gewijzigd door Verwijderd op 07-05-2010 15:02 ]

[Bosmonster]

Verwijderd schreef op vrijdag 07 mei 2010 @ 14:59:
Je kan een achtergrond plaatje maken dat bijv. 20 pixels breed is, dan de eerste 10px hoog, dan 10px laag en dat stretchen over de hele breedte. dan een los achtergrondplaatje voor de 960px.

Ja dat kan ook, maar daar moet je wel iets moeilijker voor doen dan gewoon een achtergrond afbeelding.

Aangezien het horizontale strepen zijn kun je die achtergrond 2500 pixels breed maken en dan istie nog 3K ofzo

[Verwijderd]

Bosmonster schreef op vrijdag 07 mei 2010 @ 15:35:
[...]


Ja dat kan ook, maar daar moet je wel iets moeilijker voor doen dan gewoon een achtergrond afbeelding.

Aangezien het horizontale strepen zijn kun je die achtergrond 2500 pixels breed maken en dan istie nog 3K ofzo

Sja, met PNG's RLE compressie maakt het geen biet uit hoe breed je het maakt (tot 64k pixels dacht ik), met SVG is het nog makkelijker, maar daar gaan browsers wat moeilijker mee om denk ik.

Maar ja, gewoon met div's werken is natuurlijk ook een makkelijke en werkende oplossing.