henkhoogerbrug
Gebruiker
- Lid geworden
- 25 sep 2008
- Berichten
- 107
Ik ben bezig met een website, die in het midden van het scherm wordt gecentreerd. Dit werkt goed.
Nu wil ik echter een div maken die wordt getoond zodra de website wordt geopend (met daarin een welkomstboodschap). Deze div heeft een width van 100% en een height van 100% (en voor de test is hij helemaal zwart).
Wanneer ik nu in FireFox test, dan werkt alles goed (zie gewoon een zwart scherm, wat later m.b.v. javascript verdwijnt).
Als ik hetzelfde bestand open in Internet Explorer dan is de breedte inderdaad 100%, alleen staat de linkerkant van het zwarte vlak dan in het midden van mijn scherm (de body heeft namelijk text-align:center; en ik test dan met een bestand zonder container, anders begint het zwarte vlak op hetzelfde punt als waar de linkerkant van de container is).
Hoe kan ik dit probleem oplossen? De rest van de site werkt gewoon zoals het hoort.
Hieronder de relevante css code:
ik heb ook nog geprobeerd om bij #Intro margin-left:0px; of margin-left:-50%; te doen. Dit werkt echter ook niet (omdat de container 850px breed is en de linkerkant van de container dus 425px; naar links is (vanuit het midden gezien)).
Als ik de container verwijder, dan werkt margin-left:-50%; wel (de Intro gaat namelijk buiten de container om).
Nu wil ik echter een div maken die wordt getoond zodra de website wordt geopend (met daarin een welkomstboodschap). Deze div heeft een width van 100% en een height van 100% (en voor de test is hij helemaal zwart).
Wanneer ik nu in FireFox test, dan werkt alles goed (zie gewoon een zwart scherm, wat later m.b.v. javascript verdwijnt).
Als ik hetzelfde bestand open in Internet Explorer dan is de breedte inderdaad 100%, alleen staat de linkerkant van het zwarte vlak dan in het midden van mijn scherm (de body heeft namelijk text-align:center; en ik test dan met een bestand zonder container, anders begint het zwarte vlak op hetzelfde punt als waar de linkerkant van de container is).
Hoe kan ik dit probleem oplossen? De rest van de site werkt gewoon zoals het hoort.
Hieronder de relevante css code:
Code:
body {
margin:5% 0px;
padding:0px;
height:100%;
text-align:center;
}
#Intro {
position:absolute;
margin-top:-5%;
height:100%;
width:100%;
background-color:#000000;
z-index:1;
}
#container {
height:600px;
width:850px;
margin:0px auto;
text-align:left;
font-family:Arial;
font-size:14;
line-height:15pt;
color:#006600;
background-color:#FFFFFF;
}
ik heb ook nog geprobeerd om bij #Intro margin-left:0px; of margin-left:-50%; te doen. Dit werkt echter ook niet (omdat de container 850px breed is en de linkerkant van de container dus 425px; naar links is (vanuit het midden gezien)).
Als ik de container verwijder, dan werkt margin-left:-50%; wel (de Intro gaat namelijk buiten de container om).
Laatst bewerkt: