Ik wil graag een div in het midden plaatsen van het scherm.
Dat is mij met de volgende code gelukt:
<?php
/* CSS FILE */
#fullscreen{
margin-left: 25%;
background-repeat:repeat;
background-image:url(../images/backgrounds.png);
background-repeat:repeat-y;
/*set the div in the top-left corner of the screen*/
top:0;
left:0;
/*set the width and height to 100% of the screen*/
width:75%;
height:100%;
}
?>
MAAR als ik de site dan open op mijn laptop of op een andere pc dan staat de site niet meer in het midden van het scherm hoe kan ik dit het beste oplossen? / wat moet ik aan de code veranderen?
De makkelijkste manier om een div in het midden te plaatsen:
<?php
#fullscreen{
/** geef hier de breedte op van de div **/
width: 500px;
/** geef hier de hoogte op van de div **/
height: 250px;
/** doe hier de breedte delen door 2 **/
margin-left: -250px;
/** doe hier de hoogte delen door 2 **/
margin-top:-125px;
/** de rest kun je zo laten **/
left:50%;
top:50%;
position:absolute;
Dankjewel voor je reactie Terence, ik heb dat net geprobeerd en dat werkt op mijn pc maar weer niet op andere computers die ik hier heb staan en het ff op heb getest.
Ik heb de code zo gedaan zoals je had gezegt:
en toegepast op de home page van www.Brandofart.com
<?php
background-repeat:repeat;
background-image:url(../images/backgrounds.png);
background-repeat:repeat-y;
/*set the div in the top-left corner of the screen*/
position: absolute;
top:50%;
left:50%;
/*set the width and height to 100% of the screen*/
}
?>
[size=xsmall]Toevoeging op 16/11/2012 09:40:58:[/size]
Ja al geprobeerd op de index.php stond het in 1x goed (al zonder te refreshen ) maar toen ik dan op de pagina http://www.brandofart.com/PhotoArt.php kwam stond het niet meer in het midden
Na het lezen van je eerste post leek het me te gaan om een div die midden op het scherm moet staan. Een soort popup- of lightbox-achtige div, mooi horizontaal en verticaal gecentreerd; eventueel met ongekende height.
(Het lijkt me dat Terence dat ook dacht)
Dat is wat lastiger qua css.
Wat jij dan weer wil, is de eenvoud zelve ... maar je moet het wel duidelijk vragen.
-----
<style>
#fullscreen {
/* centreert deze div (horizontaal) in zijn container */
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: 55ffff; /**/
}
html, body {
width: 100%;
}
</style>
<body>
<div id="fullscreen"> Hello world </div>
</body>
Dankejwel voor je reactie kris :D
Ik zal je code eens proberen, maar is dat eigenlijk wel slim "width: 1000px;" omdat niet alle schermen even breed zijn? :p
O ja, die 1000; strikt gezien koos ik een vrij willekeurige waarde (dat was niet echt mijn punt); ik zie dat je voor 1024 koos.
Het kan echter geen kwaad om wat marge te laten voor de scroll bar, rechts.
Als voorbeeld: deze mensen kiezen een breedte van 978 pixel, wanneer ze een scherm van 1024 verwachten http://978.gs/
-Edit de css code die ik gebruik voor die divs op de 8 paginas
<?php
/* CSS Document */
#fullscreenART{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-repeat:repeat;
background-image:url(../images/backgrounds.png);
background-repeat:repeat-y;
height: 100%;
}
