3 Backgrounds achter website, kan dat?

[Duncank]

Ik heb een webdesign gemaakt waarbij ik gebruik maak van een header en footer die beide ge-include worden dmv php.

Omdat in mijn design de achtergrond die naast de header zit doorloopt in het gedeelte daaronder (de container) heb ik mijn site alsvolgt opgebouwd:

Header, geinclude, gecentreerd en met de bijbehorende achtergrond erachter dmv. css (horizontaal-midden, verticaal-bovenaan pagina uitgelijnd)
Container, gecentreerd door auto-margins links en rechts, achtergrond dmv css (horizontaal-gecentreerd, verticaal-bovenaan, dus tegen de onderkant van de header-bg aan uitgelijnd)
Footer, geinclude, gecentreerd met bijbehorende achtergrond erachter dmv. css (horizontaal-midden, verticaal-gelijk met begin footer)

Dit werkt allemaal netjes, maar volgens mijn design zou de achtergrond die bij de footer zit, iets uit moeten steken naar boven, dus aan de onderkant van de container. Aangezien ik al een achtergrond bij de container heb ingesteld (die bovenaan) lukt het mij niet om nog een achtergrond achter diezelfde containter te plaatsen, maar dan onderaan.

Heeft iemand van jullie misschien de oplossing voor me?

[TERW_DAN]

Als ik het zo lees zou ik zeggen, maak de footer wat groter. Maar ik snap niet precies wat je nu bedoelt. Kun je niet eens een plaatje uploaden of een link geven naar een voorbeeld. Meerdere achtergronden gaat niet (je kunt natuurlijk wel een achtergrond plaatje en achtergrond kleur combineren)

[Jogai]

Ik snap hem ook nog niet helemaal. Hoe ziet de html er uit die php genereerd?
Lijkt mij overigens met css op te lossen tenzij je 1 container 2 achtergronden wil geven.

[Blaise]

Duncank, het is denk ik duidelijker als je een schetsje maakt.

[MuisM4t]

Je kunt toch werken met png's en een negatieve margin-bottom van je container?


of zie ik dit helemaal verkeerd?

[curry684]

Afgezien van dat ik niet echt snap wat je bedoelt is het volgens mij een kwestie van placeholder divs en absolute positioning wat je wil.

[soulrider]

algemeen: 3 div's zoals je al aangeeft: header; container en footer.
en in je container opnieuw 2 div's eentje die boven links float, en eentje die onderaan rechts float.
met daarin de restanten van resp. header en footer.

daarmee is het toch oplosbaar vermoed ik ?

offtopic:
ben recent ook aan het vechten geweest om div's in zulke container netjes op hun plaats te krijgen en te houden terwijl er tekst/opmaak inkwam, is een kloterij, maar door soms wat te spelen met waarden heb je zo de boosdoener gevonden. en natuurlijk cross-checken in verschillende browsers, wat in de ene werkt, werkt niet altijd in de andere

[EvilWhiteDragon]

Ik vermoed dat wat je bedoeld hier gedaan is: http://www.blackintel.org/
[/shameless plug]
In ieder geval, we hebben daar meerdere achtergronden gemaakt d.m.v. het createn van meerdere div's

code:

<div id="contents">
    <div id="contents2">
        <div id="contents3">

Niet echt netjes of zo, maar het is wel de enige manier om meerdere plaatjes te krijgen die elkaar overlappen, en ook nog op een vorspelbare manier uitkomen. Dat was bij ons nodig, omdat de achtergrond image in 3 delen opgedeelt is, en over de banner heen nog 4 plaatjes moesten komen, en achter de main text er nog een kleine "algemene" achtergrond moest komen, die ge-repeat wordt. Onze keuze om dit zo te doen is dat op deze manier we geen gigantische plaatjes nodig zijn, en we niet hoeven te letten op de grote van de pagina.

[gitaarwerk]

je zou met wat divjes inderdaad een container functie kunnen creëren en daar je achtergronden in zetten. of iets geinclude is of niet, zou niet uit moeten maken.

zoals ik het lees moet je gewoon 2 over elkaar doen,

<div laag-boven>
<div laag-beneden>
<header>
<content>
<footer>
</div>
</div>

verder kan je nog met margins wel het een en ander doen, wellicht met minus-waarde, maar dat vind ik altijd niet zo erg goed werken.

[Dekaasboer]

Het is echt heel moeilijk om te begrijpen wat je probleem is, en misschien is het wel heel simpel op te lossen. Broncode zou erg handig zijn

[Verwijderd]

offtopic:
Dekaasboer, is er iets met je webpagina/url aan de hand of anders, hoeveel bezoekers trekt die pagina?

[ Voor 5% gewijzigd door Verwijderd op 30-07-2008 10:16 ]

[Dekaasboer]

Verwijderd schreef op woensdag 30 juli 2008 @ 10:16:

offtopic:
Dekaasboer, is er iets met je webpagina/url aan de hand of anders, hoeveel bezoekers trekt die pagina?

_{Haha, Lol, Dat ding in mijn sig? Ik wist niet eens dat dat nog online stond Heb ik een keer als onnozel kind gemaakt
Ps. Ik ben de PM knop kwijt?}

[ Voor 3% gewijzigd door Dekaasboer op 30-07-2008 10:55 ]

[Jogai]

offtopic:
Dekaasboer, lees je sig nog eens goed:
[quote]
Aan mijn reacties zijn geen rechten te ontlenen. Ik kan niet aansprakelijk worden gehouden voor schade aan personen en of goederen die vloeien uit het opvolgen van mijn advies.
[/quote]
De personen en of goederen vloeien uit jouw advies?
ipv 'die vloeien' zou ik 'dat voortvloeit' gebruiken

Waar blijft te TS? Dit wordt allemaal een beetje teveel OT.

[Bosmonster]

nm

[ Voor 99% gewijzigd door Bosmonster op 30-07-2008 11:41 ]

[Duncank]

Okej, sorry dat ik zo laat reageer, ik had het druk met werk.
Ik heb even voor jullie een voorbeeldje gemaakt, zodat duidelijk wordt wat ik precies zou willen.
Hopelijk kunnen jullie hier wat meer mee:
http://ng-tv.nl/voorbeeld.jpg

[MuisM4t]

Moet de container altijd even groot zijn?

[TERW_DAN]

Er zijn vast meer manieren om dit te doen, maar ik zou daar gewoon 2 divjes voor pakken. 1 voor het bovenste stuk, 1 voor het onderste stuk. Die stretch je over de hele breedte en daar gooi je je achtergrond in.

[ Voor 20% gewijzigd door TERW_DAN op 31-07-2008 00:08 ]

[Duncank]

@ Muism4t: nee, de container vormt zich aan de hoeveelheid inhoud.
@ Terw-Dan: Maar als ik 2 divjes daarvoor pak en daar die achtergrond achter zet, dan wordt mijn container toch omlaag geplaatst? De container begint dan toch pas onder de voorgaande div? Dan zou ik net zo goed mijn header kunnen vergroten zodat dat stuk achtergrond er wel nog achter past, dan schuift de container ook gewoon omlaag.

[curry684]

position:absolute

[Dekaasboer]

curry684 schreef op donderdag 31 juli 2008 @ 00:38:
position:absolute

Dat en z-index instellen.

Check even een tutorial over divs positioneren. Zodra je absolute en z-index gebruikt kun je ze positioneren als lagen over elkaar (zelfs met transparantie)

[moozzuzz]

Een alternatief als je minder goed met absolutes etc kan werken:

HTML:

<body>
  <div id="header">headerstuff</div>
  <div id="tmiddenstedeel">
    <div id="headerbgachtercontainer">top:0px</div>
    <div id="footerbgachtercontainer">bottom: 0px</div>
    <div id="container">content</div>
  </div>
  <div id="footer">blaat</div>
</body>

De CSS is voor jou :^P.

[ Voor 13% gewijzigd door moozzuzz op 31-07-2008 11:01 . Reden: div id=site kan ook body zijn ]

[Blaise]

Met genoeg divjes kan alles. De truc is juist om er zo min mogelijk te gebruiken. Het body en html element kunnen bijvoorbeeld ook achtergrondkleuren en -plaatjes bevatten, kan weer één of twee nutteloze elementen schelen.

[Duncank]

Okej, jullie hebben me weer op een heel aantal nieuwe ideeen geholpen, ik ga er mee aan de slag en laat t wel weer horen als ik weer vastzit. In ieder geval alvast bedankt!

[Verwijderd]

Waarom gebruik je geen z-index (uitleg):

<div style="position:absolute; z-index:1;">bottom</div>
<div style="position:absolute; z-index:2;">middle</div>
<div style="position:absolute; z-index:3;">top</div>

dan maakt namelijk niet uit in welke volgorde je de div's stopt.