[CSS] Website-indeling met 2 belangrijke eisen

[Anton0wns2]

Geachte forumleden!

Ik zit helemaal vast! Ik zal het nog eens goed uitleggen.
Ik heb een lay-out ontvangen waarvan de indeling er als volgt uitziet:

Ik heb deze gesliced op deze manier:

De bedoeling is dat conainer_bg de gehele pagina overvlakt bij iedere resolutie. Dus dat de achtergrond (in dit geval het witte vlak) over de gehele lengte te zien is als je uit zoemt.
Dat had ik gedaan met deze code:

	#container_bg {
		background-image: url(../images/container.png);
		height: 100%;
		width: 947px;
		overflow: hidden;
		position: fixed;
}

De tweede bedoelling was om container_disclamer aan de onderkant van de pagina te laten 'kleven'

dat heb ik gedaan met volgende tutorial:
Link

Alleen ivm height storen deze 2 codes met elkaar en werkt er geen van beide meer.
Weet iemand hoe je dit het beste kan doen? En zou die persoon mij dan daarbij willen helpen? het hoeft niet volgens de tutorial tezijn die ik heb gevonde. Als ik maar het gewenste resultaat krijg.

Greatz!

 

[Janzwart]

Als je de HTML en CSS code erbij plaatst, kunnen wij er meer mee.
Nu is het gokken.

 

[Sevo]

Je wilt dat het witte vlak dus op welke resolutie dan ook op die plaats blijft staan?

 

[Anton0wns2]

Ik denk niet dat het veel nut heeft want ik heb alleen nog maar de divs ingedeeld

maar hier is de download voor het volledige pakket
link

Dus nogmaals.
De bedoeling is dat container_bg zich over de gehele lengte van de pagina uitrekt.
Dus dat de achtergrond van boven tot onder te zien is, en dus ook als je uit zoemt met je webbrowser.

Daarnaast wil ik dat container_disclamer ten alle tijden zich onderaan de pagina begeeft. Dus ook als je uit zoemt. En als je in zoemt dat je dan gewoon naar beneden kan scrolen.

En ja de bedoeling is dat de site gewoon in het midden gecentreerd blijft maar daar heb ik geen probleem mee.

 

[Janzwart]

Bedankt voor de code, zo kon ik het een en ander uitproberen.

Ik heb in de volgende code de onderste regel aangepast, zo blijft bij het uitzomen de container_disclamer ten alle tijden onderaan de pagina .

#container_disclamer {
		background-image: url(../images/container_disclamer.png);
		height: 71px;
		width: 947px;
		float: left;
		position: absolute;
		bottom: 0;
}

ps. het gaat dus om BOTTOM: 0;

 

[Anton0wns2]

Ja deze code had ik al een keer toegepast.
Maar dit is niet het gewenste resultaat.
Zie hier wat gebeurt:

De footer mag natuurlijk niet over de tekst heen.

En als je in zoemt dat je dan gewoon naar beneden kan scrollen.

Excuus als ik dat niet heb goed heb uitgelegd.

 

[Janzwart]

Ik ben degene die excuus moet maken, ik had over dat regeltje heen gelezen.

Door onderstaande code aan te passen krijg je het zelfde resultaat als jou laatste voorbeeld, maar kun je wel door de tekst scrollen. (footer blijft dus onder in beeld staan)

html, body{
		background-color:#37BAE4;
		font-family: "Tahoma", Verdana, Arial;
		font-size: 11px;
		margin: 0px;
		padding-bottom:71px;
}
#container_disclamer {
		background-image: url(../images/container_disclamer.png);
		height: 71px;
		width: 947px;
		float: left;
		position: fixed;
		bottom: 0;
}

Ps. wat is de reden dat iemand moet kunnen inzomen?

 

[Anton0wns2]

Nou er is niet echt een reden om in te zoemen, maar er zijn mensen met een kleinere scherm resolutie, zoals ik zelf. Op die vorige printscreen is de resolutie van de browser gewoon 100% Maar omdat mijn scherm wat aan de kleine kant is past de lay-out er niet volledig op

Verder heb ik nog altijd niet het gewenste resultaat.
Nu schuift de footer over de tekst heen.
Wat uiteraard niet de bedoeling is.

De footer moet dus altijd onder de tekst staan. En als dit niet op het scherm past moet de footer gewoon op een bepaalde padding-top van de tekst blijven.. Wanneer je een resolutie heb zoals mijn (zie voorbeeld) moet je dus naar beneden scrollen om de footer te kunnen zien. En de footer is dus tevens het einde van de pagina.
En als je uit zoemt moet dus de footer ook nog onderaan de pagina staan.

(let goed op, ik ben momenteel naar de end van de pagina gescrold. )

Ik ben een beetje kieskeurig ik weet het.

Greatz!