Site crasht na toevoegen doctype
Maar als ik dit lijntje toevoeg:
Code (php)
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Dan krijg ik dit:
Wat is er hier boem gegaan?
(en dit is in alle browsers zo, in ieder geval in IE, Firefox, en Chrome)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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
70
71
72
73
74
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
70
71
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Naam</title>
<style type="text/css">
body {
background-color:#000066;
color:white;
font-size: 12px;
font-family: Arial,Verdana,Tahoma,Helvetica;
text-align:center;
}
#main {
width:800px;
border:2px solid #000088;
}
hr.sitebalk {
color:#000088;
}
a.menubutton {
width:180px;
display:inline;
border:1px solid #00004B;
text-decoration:none;
color:white;
background-color:#000066;
}
a.menubutton:hover {
background-color:#00004B;
}
div.menu {
background-color:#00004B;
}
h1.header1 {
display:block;
}
</style>
</head>
<body>
<div id="main">
<h1 class="header1">Naam</h1>
<h3>ondertitel</h3>
<hr class="sitebalk">
<div class="menu">
<p>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
</p>
</div>
<hr class="sitebalk">
<p style="text-align:left; margin:12px;">
CONTENT
</p>
</div>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88" style="border:none;">
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" style="border:none;">
</a>
</p>
</body>
</html>
<html>
<head>
<title>Naam</title>
<style type="text/css">
body {
background-color:#000066;
color:white;
font-size: 12px;
font-family: Arial,Verdana,Tahoma,Helvetica;
text-align:center;
}
#main {
width:800px;
border:2px solid #000088;
}
hr.sitebalk {
color:#000088;
}
a.menubutton {
width:180px;
display:inline;
border:1px solid #00004B;
text-decoration:none;
color:white;
background-color:#000066;
}
a.menubutton:hover {
background-color:#00004B;
}
div.menu {
background-color:#00004B;
}
h1.header1 {
display:block;
}
</style>
</head>
<body>
<div id="main">
<h1 class="header1">Naam</h1>
<h3>ondertitel</h3>
<hr class="sitebalk">
<div class="menu">
<p>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
</p>
</div>
<hr class="sitebalk">
<p style="text-align:left; margin:12px;">
CONTENT
</p>
</div>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88" style="border:none;">
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" style="border:none;">
</a>
</p>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
Marc rc is as op 22/09/2010 20:13:56:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
En wat zou dat moeten doen?
Dalando: Opnieuw beginnen. Terug lopen en kijken tot waar het goed gaat.
Quote:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
En wat zou dat moeten doen?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
En wat zou dat moeten doen?
Excuus, daar hoorde die doctype nog boven natuurlijk.
Doe dit en het staat weer in het midden.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#main {
width:800px;
border:2px solid #000088;
float: none;
margin: auto;
padding: auto;
}
width:800px;
border:2px solid #000088;
float: none;
margin: auto;
padding: auto;
}
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
a.menubutton {
width:180px;
display:inline;
border:1px solid #00004B;
text-decoration:none;
color:white;
background-color:#000066;
}
a.menubutton:hover {
background-color:#00004B;
}
===============================
<p>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
</p>
width:180px;
display:inline;
border:1px solid #00004B;
text-decoration:none;
color:white;
background-color:#000066;
}
a.menubutton:hover {
background-color:#00004B;
}
===============================
<p>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
<a class="menubutton" href="#">Menu</a>
</p>
Btw, mijn code is nu naar xHTML, nogsteeds het menu probleem :(
Gewijzigd op 23/09/2010 19:58:16 door Dalando De Zuil
Je zult moeten werken met padding en margin.
Je moet er wat mee spelen, maar dit is 'n oplossing.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div.menu {
text-align:center;
background-color:#00004B;
}
a.menubutton {
text-align: left;
width:180px;
display:inline;
border:1px solid #00004B;
text-decoration:none;
color:white;
background-color:#000066;
padding-right: 60px;
padding-left: 60px;
}
text-align:center;
background-color:#00004B;
}
a.menubutton {
text-align: left;
width:180px;
display:inline;
border:1px solid #00004B;
text-decoration:none;
color:white;
background-color:#000066;
padding-right: 60px;
padding-left: 60px;
}
Overigens een tip om een div die maar 1 keer voorkomt op 'n pagina geen class te geven maar een id. Dat maakt het duidelijker voor je CSS.
Dus ik zou van div.menu gewoon #menu maken.
Zo ook "h1.header1" is vreemd. Je kunt h1 gewoon aanroepen. Dus:
Code (php)
1
2
3
2
3
h1{
display:block;
}
display:block;
}
Waarom eigenlijk display:block??