Pagina in Div wil niet gecentreerd worden
Ik heb de divs in een container div staan.
Alleen nu word alleen de bovenste div gecentreerd ipv alle div's.
Het lijkt erop dat de container div de eerste afsluitende div pakt.
Hier mijn code(ingekort)
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="container">
<div id="Untitled-1-01_">
<img id="Untitled_1_01" src="images/Untitled-1_01.gif" width="1000" height="77" alt="" />
</div>
<div id="Untitled-1-02_">
<img id="Untitled_1_02" src="images/Untitled-1_02.gif" width="2" height="923" alt="" />
</div>
</div>
<div id="Untitled-1-01_">
<img id="Untitled_1_01" src="images/Untitled-1_01.gif" width="1000" height="77" alt="" />
</div>
<div id="Untitled-1-02_">
<img id="Untitled_1_02" src="images/Untitled-1_02.gif" width="2" height="923" alt="" />
</div>
</div>
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
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
body {
text-align:center;
margin:0px;
padding:0px;
}
#container {
height:1000px;
width:1000px;
margin:0px auto;
padding:0px;
border:1px solid red;
background:#ffffff;
}
#Untitled-1-01_ {
position:absolute;
background-image: url(images/Untitled-1_01.gif);
width:1000px;
height:77px;
left:0px ;
top:0px;
}
#Untitled-1-02_ {
position:absolute;
background-image: url(images/Untitled-1_02.gif);
left:0px;
top:77px;
width:2px;
height:923px;
}
text-align:center;
margin:0px;
padding:0px;
}
#container {
height:1000px;
width:1000px;
margin:0px auto;
padding:0px;
border:1px solid red;
background:#ffffff;
}
#Untitled-1-01_ {
position:absolute;
background-image: url(images/Untitled-1_01.gif);
width:1000px;
height:77px;
left:0px ;
top:0px;
}
#Untitled-1-02_ {
position:absolute;
background-image: url(images/Untitled-1_02.gif);
left:0px;
top:77px;
width:2px;
height:923px;
}
Gewijzigd op 24/10/2010 13:14:28 door Kjeld Hogenkam
2) Waarom al die positions?
3) Een website niet breder dan 990px breed, 1000 px is te breed
Heb je een online voorbeeld want ik snap er geen ruk van.
1. Ik heb ze nu andere namen gegeven,
2. Die posities zijn zo omdat anders de plaatjes niet op de goede plek staan
Alleen nu centerd alleen het tweede plaatje zich!
Wat dacht je hiervan:
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hooga Schoonmaak</title>
<link type="text/css" rev="stylesheet" href="inc/css/default.css" />
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
</ul>
<div class="container">
<div class="header">
"Hoge kwaliteit tegen een laag tarief!"
</div>
<div class="content">
Hier komt je tekst
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hooga Schoonmaak</title>
<link type="text/css" rev="stylesheet" href="inc/css/default.css" />
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
</ul>
<div class="container">
<div class="header">
"Hoge kwaliteit tegen een laag tarief!"
</div>
<div class="content">
Hier komt je tekst
</div>
</div>
</div>
</body>
</html>
Hiermee kan je jouw website ook maken, en dan benut je iets beter de opties van css. Zo kan je gewone kleuren opgeven in je css. Schaduw is nu ook mogelijk met CSS3, en je kunt opacity gebruiken voor de balken die iets wat transparent zijn.
Ook zit het menu hier in zoals het hoort, tis iets ingewikkelder dan je denkt maar wel veel beter!