Centeren div's css
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
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
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>
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>
Gewijzigd op 09/01/2019 21:41:26 door - Ariën -
Deel 1, style opnemen in css,
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<style>
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
</style>
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
</style>
Deel 2 in body:
Code (php)
1
2
3
4
5
2
3
4
5
<body>
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
</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,
Deel 2 in body:
Deel 1, style opnemen in css,
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<style>
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
</style>
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
</style>
Deel 2 in body:
Code (php)
1
2
3
4
5
2
3
4
5
<body>
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
</body>
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
</body>