Div in het midden
Ik wil graag een div in het midden plaatsen van het scherm.
Dat is mij met de volgende code gelukt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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%;
}
?>
/* 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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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;
background-repeat:repeat;
background-image:url(../images/backgrounds.png);
background-repeat:repeat-y;
}
?>
#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;
background-repeat:repeat;
background-image:url(../images/backgrounds.png);
background-repeat:repeat-y;
}
?>
Indien je de div wilt centreren in een andere div, moet je in de omliggende div position:relative; gebruiken
Ik heb de code zo gedaan zoals je had gezegt:
en toegepast op de home page van www.Brandofart.com
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
#fullscreen{
width: 1024px;
height: 100%;
margin-left: -512px;
margin-top: -50%;
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*/
}
?>
#fullscreen{
width: 1024px;
height: 100%;
margin-left: -512px;
margin-top: -50%;
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*/
}
?>
Toevoeging op 16/11/2012 09:40:58:
Kan iemand me hiermee verder helpen aub? :)
Gewijzigd op 15/11/2012 15:01:21 door - Marco -
- Marco - op 15/11/2012 13:59:54:
Kan iemand me hiermee verder helpen aub? :)
Kan iemand me hiermee verder helpen aub? :)
Ik heb het nog steeds niet op kunnen lossen :(
Al een keer properen te refreshen? Dat de CSS bestanden misschien gecached zijn
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.
-----
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
#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>
Gewijzigd op 19/11/2012 14:22:40 door Kris Peeters
Ik zal je code eens proberen, maar is dat eigenlijk wel slim "width: 1000px;" omdat niet alle schermen even breed zijn? :p
Gewijzigd op 19/11/2012 14:32:43 door - Marco -
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/
http://www.brandofart.com/digitalart.php
http://www.brandofart.com/paintings.php
http://www.brandofart.com/PhotoArt.php
en nog 5 andere maar als je van http://www.brandofart.com/digitalart.php naar http://www.brandofart.com/paintings.php gaat of andersom zie je de pagina toch 10 px verspringen hoe kan ik dat oplossen?
-Edit de css code die ik gebruik voor die divs op de 8 paginas
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?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%;
}
/* 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%;
}
Gewijzigd op 19/11/2012 14:53:21 door - Marco -
html, body {
width: 100%;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
html{
width: 100%;
}
body{
font-family:aachenefmedium;
font-size: 13px;
background-color: #f7f5f6;
margin:0;
padding:0;
width: 100%;
}
#fullscreenART{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-repeat:repeat;
background-image:url(../images/backgrounds.png);
background-repeat:repeat-y;
height: 100%;
}
?>
html{
width: 100%;
}
body{
font-family:aachenefmedium;
font-size: 13px;
background-color: #f7f5f6;
margin:0;
padding:0;
width: 100%;
}
#fullscreenART{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-repeat:repeat;
background-image:url(../images/backgrounds.png);
background-repeat:repeat-y;
height: 100%;
}
?>
het verspringt trouwens op elke pagina weer 10 px naar links dan bij een andere pagina weer 10 px naar rechts.
Heeeel erg iritant is hier een oplossing voor?
( kijk zelf maar is hoe het verspringt
http://www.brandofart.com/contact.php -----> http://www.brandofart.com/account.php
http://www.brandofart.com/digitalart.php -----> http://www.brandofart.com/index.php
http://www.brandofart.com/contact.php -----> http://www.brandofart.com/register.php )
Gewijzigd op 19/11/2012 16:18:20 door - Marco -
Doe je goed ...... ahumba.
De genoemde linkjes (alle 6) staan bij mij allemaal exact hetzelfde hoor.
Alleen bij de laatste krijg ik rechts een scrollbalk en DUS verspringt je inhoud iets. Maar dat ervaar ik niet echt als een probleem: hij staat immers in het midden.
Gewijzigd op 19/11/2012 17:28:56 door Eddy E
en van dat plaatje haha ja klopt ik kreeg dat plaatje zo groot aangeleverd en had daar niet eens aan gedacht ( aan de ruimte die het innam ) dus ik heb het meteen verkleind dankjewel voor die tip :)
Gewijzigd op 20/11/2012 09:46:44 door - Marco -
Gewijzigd op 21/11/2012 19:03:52 door Robin S