Div in het midden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- Marco -

- Marco -

15/11/2012 13:40:52
Quote Anchor link
Hallo,

Ik wil graag een div in het midden plaatsen van het scherm.
Dat is mij met de volgende code gelukt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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%;
}




?>

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?
 
PHP hulp

PHP hulp

29/03/2024 14:33:31
 
Terence Hersbach

Terence Hersbach

15/11/2012 13:49:17
Quote Anchor link
De makkelijkste manier om een div in het midden te plaatsen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


?>


Indien je de div wilt centreren in een andere div, moet je in de omliggende div position:relative; gebruiken
 
- Marco -

- Marco -

15/11/2012 13:59:54
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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*/    
}

?>


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 -

- Marco -

19/11/2012 10:35:03
Quote Anchor link
- Marco - op 15/11/2012 13:59:54:


Kan iemand me hiermee verder helpen aub? :)


Ik heb het nog steeds niet op kunnen lossen :(
 
Martiveen -

Martiveen -

19/11/2012 11:28:29
Quote Anchor link
Staat voor mij gewoon in het midden hoor. Google Chrome
Al een keer properen te refreshen? Dat de CSS bestanden misschien gecached zijn
 
- Marco -

- Marco -

19/11/2012 12:08:46
Quote Anchor link
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
 
Kris Peeters

Kris Peeters

19/11/2012 14:21:41
Quote Anchor link
Bedoel je horizontaal centreren?

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 19/11/2012 14:22:40 door Kris Peeters
 
- Marco -

- Marco -

19/11/2012 14:32:25
Quote Anchor link
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
Gewijzigd op 19/11/2012 14:32:43 door - Marco -
 
Kris Peeters

Kris Peeters

19/11/2012 14:39:14
Quote Anchor link
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/
 
- Marco -

- Marco -

19/11/2012 14:48:49
Quote Anchor link
Ok dankjewel je code werkt half half denk ik want ik gebruik je code nu op deze paginas:
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)
PHP script in nieuw venster Selecteer het PHP script
1
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%;
}
Gewijzigd op 19/11/2012 14:53:21 door - Marco -
 
Kris Peeters

Kris Peeters

19/11/2012 15:01:31
Quote Anchor link
Dit gedaan?

html, body {
width: 100%;
}
 
- Marco -

- Marco -

19/11/2012 15:06:09
Quote Anchor link
Ja maar dat werkt nog steeds niet

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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%;
}

?>




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 -
 
Eddy E

Eddy E

19/11/2012 17:27:56
Quote Anchor link
http://www.brandofart.com/images/boa.png == 2.7 MB voor een plaatje die maximaal 350px breed is.
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
 
- Marco -

- Marco -

20/11/2012 09:46:20
Quote Anchor link
@Eddy dankjewel voor je reactie. Dan laat ik het wel zo ;)

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 -
 
Robin S

Robin S

21/11/2012 19:03:21
Quote Anchor link
Excuses, verkeerde topic
Gewijzigd op 21/11/2012 19:03:52 door Robin S
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.