Centeren div's css

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ronnie Vos

Ronnie Vos

09/01/2019 21:22:24
Quote Anchor link
Heb de volgende code op mijn computer word alles netjes in het midden weergegeven maar kijk ik op een andere computer met andere resolutie staat alles scheef. wie weet hoe ik dat simpel op kan lossen. (zie ook foto's)

https://i.ibb.co/4g2c3bt/goed.png
https://i.ibb.co/N6Y2SSG/verkeerd.png

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
#logo{
    position: absolute;
    top: 0px;
    left: 50px;
    width: 571px;
    height: 124px;
}

#wmp{
    position: absolute;
    top: 402px;
    left: 43px;
    width: 141px;
    height: 134px;
}

#wmpt{
    position: absolute;
    top: 540px;
    left: 34px;
    width: 227px;
    height: 23px;
}

#real{
    position: absolute;
    top: 402px;
    left: 338px;
    width: 141px;
    height: 134px;
}

#realt{
    position: absolute;
    top: 540px;
    left: 370px;
    width: 81px;
    height: 23px;
}

#winamp{
    position: absolute;
    top: 402px;
    left: 621px;
    width: 141px;
    height: 134px;
}

#winampt{
    position: absolute;
    top: 540px;
    left: 663px;
    width: 57px;
    height: 23px;
}
</style>
</head>
<body>
<div id="logo"><p><img src="img/header.png" width="436" height="101"></p>
</div>

<div id="shoutcast2" style="width:100%; height:100px;"></div>

<div id="wmp"><a href="Nederlandsepiraten.nl - Bonanzateam.nl - Bonanzaradio.nl.wax"><img src="img/wmp.png" width="135" height="130"></a></div>
<div id="wmpt">Windows media player</div>        
<div id="real"><a href="Nederlandsepiraten.nl - Bonanzateam.nl - Bonanzaradio.nl.ram"><img src="img/real.png" width="135" height="130"></a></div>
<div id="realt">Real player</div>
<div id="winamp"><a href="Nederlandsepiraten.nl - Bonanzateam.nl - Bonanzaradio.nl.pls"><img src="img/winamp.png" width="135" height="130"></a></div>
<div id="winampt">Winamp</div>
 
PHP hulp

PHP hulp

16/01/2019 03:47:59
 
- Ariën -
Beheerder

- Ariën -

09/01/2019 21:30:32
Quote Anchor link
Waarom maak je geen container waar je alles in plaatst? Of nog beter: Gebruik het Bootstrap framework. Deze maakt gebruik van een grid, waarbij je zelf niet meer hoeft te klooien met posities en dergelijke.
Gewijzigd op 09/01/2019 21:41:26 door - Ariën -
 
Jan te Pas

Jan te Pas

09/01/2019 21:43:52
Quote Anchor link
Wat Ariën voorstel is een goede oplossing. Een voorbeeld:

Deel 1, style opnemen in css,
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<style>
#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
</style>


Deel 2 in body:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<body>
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>
</body>


Toevoeging op 09/01/2019 21:44:33:

Jan te Pas op 09/01/2019 21:43:52:
Wat Ariën voorstetl is een goede oplossing. Een voorbeeld:

Deel 1, style opnemen in css,
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<style>
#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
</style>


Deel 2 in body:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<body>
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>
</body>
 



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.