boxmodel probleempje

[Mitsie007]

Hallo,

ik ben mij aan het verdiepen in een box-model. Ik wil het simpel houden. Een groot gecentreerd vlak in het midden. De zijkanten verdwijnen als je het scherm schaalt.

Dit is mijn code:

#wrapper{
	border:1px solid red;
	position:absolute;
	width: 700px;
	margin-left: -350px;
	margin-right:auto;
	left:50%;
	z-index:1;
}

Nu het probleeem wat ik heb is als volgt: Als ik het scherm schaal, dan verdwijnt de div op een gegeven moment aan de linkerkant uit het scherm. Als test heb ik "een koe zegt bla" getypt en dan zie je bijvoorbeeld alleen nog "zegt bla". Heel vervelen, want ik wil dat de div - op het moment dat het de linkerkant bereikt - stopt met verdwijnen

Snapt iemand mijn verhaal? Ik vind het moeilijk uit te leggen.


Groetjes,
Mitsie

 

[Naarling]

Je vertelt het element nu dat het en breedte van 700 pixels aan moet nemen. Als het raam minder breed is dan 700 pixels dan zal er uiteraard inhoud wegvallen. Alsje dat niet wilt kun je de breedte ook als een percentage opgeven. Met width:80%; neemt #wrapper altijd 80% van de breedte van het raam in, hoe smal je het ook maakt. Om het dan in het midden te krijgen kun je de marges weglaten en left:10%; opgeven.

 

[Mitsie007]

Dan krijg je het flexibel layout toch? Klopt dat? Dat rekt het mee met het scherm? Is dat ook wat ze bijvoorbeeld bij http://www.mozilla.com/en-US/firefox/about/ doen? ben hen valt er ook inhoud weg, maar dan enkel aan de rechterkant. Dat wil ik eigenlijk ook wel.

Hoe zet ik dat goed in code, zoals u dat uitlegt?

 

[Naarling]

Waarik net over schreef is inderdaad een flexible layout, die van Mozilla is dat niet, de breedte van de elementen op de pagina verandert immers niet als de breedte van het raam verandert. Dat hij maar aan één kant verdwijnt kun je met jouw #wrapper bereiken door position:relative; te gebruiken. De CSS wordt dan dus.

#wrapper{
	border:1px solid red;
	position:relative;
	width: 700px;
margin:0 auto;   /*geeft een onder- en bovenmarge van 0 en automatische zijmarges, dit zet het element in het midden*/
	z-index:1;
}

Waarom gebruikte je position:absolute;?

 

[Mitsie007]

Geweldig! Dank je, dat werkt.

Position absolute gebruik ik, omdat ik niet veel weet van css. Het is bij mij nog een beetje natte vinger werk. Ik krijg altijd wel veel voor elkaar, maar dingen zoals dit begrijp ik nog niet helemaal.

 

[Naarling]

Ik kan de twee sites in m'n signature erg aanraden, ze bevatten veel informatie over het gebruik van CSS en HTML, misschien even doorlezen

 

[Mitsie007]

Dan ga ik daar eens even naar kijken. Dankjewel.