Inhoud buiten wrapper

[meeko71]

Ik hoop dat iemand mij kan helpen. Ik ben een beginner met css. Nu heb ik mijn site gemaakt en het werkt allemaal goed op mijn laptop waar IE6 op staat. Nu het op mijn andere computer staat waar IE7 op staat valt ineens het onderste deel van mijn tekst buiten de wrapper. Zelf vermoed ik dat ik iets met positioneren moet doen, maar daar ben ik niet zeker van.

Hier ( ) is een van de pagina's te zien waar die inhoud erbuiten valt.

Dit is mijn style-code:

* { padding: 0; margin: 0; }

body {
font-family: Arial, Verdana, sans-serif;
font-size: 13px;
}


#wrapper {
min-height: 1000px;
margin: 0 auto;
width: 100%;
background: black;
}


#header {
width: 90%;
color: black;
padding: 10px;
height: 80px;
margin: 10px 1em 5px 1em;
border: 2px solid;
border-color: beige;
background: #a59074;
text-align: center;
}


#navigation {
width: 90%;
color: white;
padding: 10px;
margin: 10px 1em 5px 1em;
border: 2px solid;
border-color: #a59074;
background-color:black;
text-align: center;
}


#content {
width: 90%;
color: black;
background:#a59074;
margin: 10px 1em 5px 1em;
padding: 10px;
border: 2px solid;
border-color: beige;
height: 350px;
text-align: left;
}


Alvast bedankt voor de hulp.
Petra

[ElbertF]

[meeko71]

Hallo ElbertF,

Bedankt!!! Ik denk dat je daar weleens gelijk in kunt hebben. Ik heb hem inderdaad ook geprobeerd in Firefox en daar had ik hetzelfde effect. Moet ik dan iets anders bij height zetten of moet ik height gewoon weglaten?

[ElbertF]

Ligt eraan wat je wilt, je kan de height weglaten maar bij korte pagina's komt je wrapper dan niet tot onder in beeld. Je kan er weer een div inzetten die de wrapper tot een minimale hoogte dwingt. Als je wilt dat je wrapper altijd minimaal de hoogte van je venster is moet je wat meer moeite doen.

[meeko71]

Hallo ElbertF,

Je hebt me echt ongelooflijk goed geholpen, dank je wel. Ik heb het geprobeerd met de height weg te laten en nu werkt het wel. Ik zal erop letten dat die wrapper een bepaalde hoogte moet hebben. Maar bijna alle pagina's die erin moeten komen zijn langer.

Petra

[ElbertF]

[frizzy]

min-height:200px;

Hij is minimaal 200px, maar groter kan altijd. über handig

[ElbertF]

Als 't in elke browser zou werken wel ja.

[frizzy]

[ElbertF]

In IE6 niet, maar die gebruikt de gewone height weer als min-height. Met wat workarounds kan het wel, maar als je nette code wilt gebruiken moet je het met meerdere wrappers doen.

[libia]

in ie7 werkt het dacht ik ook niet anders..

[Remi]

[ElbertF]

De bekende CSS hack (element>element) kun je ook gebruiken, maar dat is dus wat ik bedoel met lelijke code.

[meeko71]

Bedankt allemaal voor jullie reacties. Ik heb hier al veel van jullie geleerd. De site staat inmiddels volledig op het net . Ik heb min-height gebruikt in mijn wrapper. Ik heb alleen een grote hoogte moeten nemen omdat ik veel bezoekers op mijn site krijg met een resolutie van 1024 en net zoveel met 1280. Ik heb dus nu bij enkele pagina's (zoals kalender, film en credit) een groot vlak zwart onderaan met een scrollbalk staan (die eigenlijk overbodig is). Ik heb wat op andere sites zitten zoeken en heb begrepen dat ik dit enkel kan oplossen door ook een footer te gebruiken. Klopt dat?

[ElbertF]

Je kan natuurlijk min-height: 100%; gebruiken (dit moet je dan ook voor het html- en body-element opgeven), dan is de hoogte van je pagina minimaal de hoogte van het venster van de gebruiker.

[meeko71]

Ik heb het net geprobeerd maar ik kreeg een wit vlak onderaan de pagina's die te klein zijn om het beeld te vullen. Of heb ik iets in mijn code verkeerd gedaan? Dit is het gedeelte van de code waar ik het mee geprobeerd heb. (Ik heb hem nu wel even terug op min-height: 1000px gezet, omdat het momenteel nogal druk is op de site).

* { padding: 0; margin: 0; }

html {
min-height: 100%;
}

body {
min-height: 100%;
font-family: Arial, Verdana, sans-serif;
font-size: 13px;
background: "000000";
}

a {
color: #f5f5dc;
text-decoration: none;
}
a:hover{
color: #ffff00;
text-decoration: none;
}


#wrapper {
min-height: 100%;
margin: 0 auto;
width: 100%;
background: black;
}