paginaopmaak wijzigt na toevoegen <!DOCTYPE html>
nu heb ik het een en ander naa mijn eigen smaak gemaakt, alleen krijg ik het menu niet goed.
heb het menu gemaakt met css3menu.
Als ik <!DOCTYPE html> bovenaan de pagina toe voeg werkt het menu wel, maar ziet de rest van het gastenboek er verbogen uit.
om indruk te geven heb ik de pagina's dubbel op de server gezet zodat je kan zien wat ik bedoel.
het juiste gastenboek ziet er zo uit: http://www.kringgroeplimburg.com/Gast/guestbook.php en met doctype erbij zodat het menu goed werkt ziet ie er zo uit http://www.kringgroeplimburg.com/Gast/gast_menu.php
iemand ideeën hoe ik dit kan oplossen?
Gewijzigd op 12/11/2012 15:01:14 door Pascal Wetzels
Wellicht zal daar het probleem liggen, probeer eens een ander HTML doctype.
verder zie ik niet echt verschil behalve dat ik vreemde tekens krijg bij de pagina zonder doctype.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<!DOCTYPE hmtl>
<html>
<head>
... hier komen dingen als: css-files laden; de <title>, de <meta>-elementen, ...
</head>
<body>
... hier de elementen die zichtbaar zijn ...
</body>
</html>
<html>
<head>
... hier komen dingen als: css-files laden; de <title>, de <meta>-elementen, ...
</head>
<body>
... hier de elementen die zichtbaar zijn ...
</body>
</html>
Bij jou zie ik dat er dingen staan tussen <!DOCTYPE hmtl> en <html>. Alles wat daar staat, moet je verplaatsen. De <meta>-elementen moeten in de <head>, de rest in de <body>
Als je je niet houdt aan deze structuur, kan je van een browser niet verwachten dat het daar iets zinnigs mee doet.
ik heb het gastenboek gedownload van DigiOz, het kan dus al wat verouderd zijn, heb alleen de kleuren iets aangepast, en de achtergrond en menu toegevoegd.
Het menu schuift niet uit bij de tab trainingen en leden.bij de pagina zonder doctype.
als ik dus doctype toevoeg zodat het menu wel goed werkt, dan ziet het gastenboek gedeelte er weer anders uit dan de bedoeling is.
Toevoeging op 12/11/2012 15:23:55:
@ Kris Peeters.
De pagina guestbook.php is de originele (zo gedownload van DigiOz)
omdat ik het menu niet goed kreeg ben ik dingen gaan toevoegen, en misschien niet op de juiste plaats om dat er veel met PHP includes gewerkt wordt, zal anders de code hier even posten.
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?php
include("../includes/menu.php");
include("header.php");
?>
<script language="JavaScript" type="text/javascript">
function emoticon(text) {
var txtarea = document.post.yourmessage;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}
function bbcode(text) {
var txtarea = document.post.yourmessage;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}
</script>
<table bgcolor=#EFEFEF bordercolor=#C0C0C0 border=1 width=500 cellspacing=0 cellpadding=10>
<tr><td background="images/KGLtoolbar.jpg" height="20"></td></tr><tr><td>
<!-- Smiley List Starts Here -->
<center>
<table width="100" border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td><a href="javascript:emoticon(':D')"><img src="images/icon_biggrin.gif" border="0" alt="Very Happy" title="Very Happy"></a></td>
<td><a href="javascript:emoticon(':)')"><img src="images/icon_smile.gif" border="0" alt="Smile" title="Smile"></a></td>
<td><a href="javascript:emoticon(':(')"><img src="images/icon_sad.gif" border="0" alt="Sad" title="Sad"></a></td>
<td><a href="javascript:emoticon(':o')"><img src="images/icon_surprised.gif" border="0" alt="Surprised" title="Surprised"></a></td>
<td><a href="javascript:emoticon(':shock:')"><img src="images/icon_eek.gif" border="0" alt="Shocked" title="Shocked"></a></td>
<td><a href="javascript:emoticon(':?')"><img src="images/icon_confused.gif" border="0" alt="Confused" title="Confused"></a></td>
<td><a href="javascript:emoticon(':cool:')"><img src="images/icon_cool.gif" border="0" alt="Cool" title="Cool"></a></td>
<td><a href="javascript:emoticon(':lol:')"><img src="images/icon_lol.gif" border="0" alt="Laughing" title="Laughing"></a></td>
<td><a href="javascript:emoticon(':x')"><img src="images/icon_mad.gif" border="0" alt="Mad" title="Mad"></a></td>
<td><a href="javascript:emoticon(':P')"><img src="images/icon_razz.gif" border="0" alt="Razz" title="Razz"></a></td>
</tr>
<tr align="center" valign="middle">
<td><a href="javascript:emoticon(':oops:')"><img src="images/icon_redface.gif" border="0" alt="Embarassed" title="Embarassed"></a></td>
<td><a href="javascript:emoticon(':cry:')"><img src="images/icon_cry.gif" border="0" alt="Crying" title="Crying"></a></td>
<td><a href="javascript:emoticon(':evil:')"><img src="images/icon_evil.gif" border="0" alt="Evil or Very Mad" title="Evil or Very Mad"></a></td>
<td><a href="javascript:emoticon(':twisted:')"><img src="images/icon_twisted.gif" border="0" alt="Twisted Evil" title="Twisted Evil"></a></td>
<td><a href="javascript:emoticon(':roll:')"><img src="images/icon_rolleyes.gif" border="0" alt="Rolling Eyes" title="Rolling Eyes"></a></td>
<td><a href="javascript:emoticon(':wink:')"><img src="images/icon_wink.gif" border="0" alt="Wink" title="Wink"></a></td>
<td><a href="javascript:emoticon(':!:')"><img src="images/icon_exclaim.gif" border="0" alt="Exclamation" title="Exclamation"></a></td>
<td><a href="javascript:emoticon(':?:')"><img src="images/icon_question.gif" border="0" alt="Question" title="Question"></a></td>
<td><a href="javascript:emoticon(':idea:')"><img src="images/icon_idea.gif" border="0" alt="Idea" title="Idea"></a></td>
<td><a href="javascript:emoticon(':arrow:')"><img src="images/icon_arrow.gif" border="0" alt="Arrow" title="Arrow"></a></td>
</tr>
</table>
</center><center>
<table width="341" border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td width="50"><input type="button" class="button" value=" Vet " style="font-weight:bolder; width: 50px" onClick="javascript:bbcode('[b] [/b]')"></td>
<td width="100"><input name="" type="button" class="button" style="font-weight:bold; width: 100px" onClick="javascript:bbcode('[u] [/u]')" value=" Onderstreept "></td>
<td width="50"><input type="button" class="button" value=" Schuin " style="font-weight:bold; font-style:italic; width: 55px" onClick="javascript:bbcode('[i] [/i]')"></td>
<td width="101"><input name="" type="button" class="button" style="font-weight:bold; width: 100px" onClick="javascript:bbcode('[center] [/center]')" value=" Gecentreerd "></td>
</tr>
</table>
</center>
<!-- Smiley List Stops Here -->
<br>
<form name="post" action="add.php" method="post">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<p><b><font size="2"><?php echo $yournametxt; ?></font></b></p>
</td>
<td><input type="text" name="yourname" size="20"></td>
</tr>
<tr>
<td>
<p><b><font size="2"><?php echo $youremailtxt; ?></font></b></p>
</td>
<td><input type="text" name="youremail" size="20" value=""></td>
</tr>
<?php
if($image_verify == 1)
{
echo '<tr><td><p><b><font size="2">Verify:</font></b></p></td><td><input type="text" name="txtNumber" size="20" value=""><img src="random.php"></td></tr>';
}
?>
<tr>
<td>
<p><b><font size="2"><?php echo $yourMessagetxt; ?></font></b></p>
</td>
<td>
<div align="right">
<textarea name="yourmessage" cols="45" rows="10"></textarea></div>
</td>
</tr>
<tr>
<td></td>
<td>
<div align="right">
<input type="submit" name="ok" value="<?php echo $submitbutton; ?>">
</td>
</tr>
</table>
</form>
</td></tr></table><!-- End of toolbar table -->
<?php
include("../includes/footer.php");
include("footer.php");
?>
include("../includes/menu.php");
include("header.php");
?>
<script language="JavaScript" type="text/javascript">
function emoticon(text) {
var txtarea = document.post.yourmessage;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}
function bbcode(text) {
var txtarea = document.post.yourmessage;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}
</script>
<table bgcolor=#EFEFEF bordercolor=#C0C0C0 border=1 width=500 cellspacing=0 cellpadding=10>
<tr><td background="images/KGLtoolbar.jpg" height="20"></td></tr><tr><td>
<!-- Smiley List Starts Here -->
<center>
<table width="100" border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td><a href="javascript:emoticon(':D')"><img src="images/icon_biggrin.gif" border="0" alt="Very Happy" title="Very Happy"></a></td>
<td><a href="javascript:emoticon(':)')"><img src="images/icon_smile.gif" border="0" alt="Smile" title="Smile"></a></td>
<td><a href="javascript:emoticon(':(')"><img src="images/icon_sad.gif" border="0" alt="Sad" title="Sad"></a></td>
<td><a href="javascript:emoticon(':o')"><img src="images/icon_surprised.gif" border="0" alt="Surprised" title="Surprised"></a></td>
<td><a href="javascript:emoticon(':shock:')"><img src="images/icon_eek.gif" border="0" alt="Shocked" title="Shocked"></a></td>
<td><a href="javascript:emoticon(':?')"><img src="images/icon_confused.gif" border="0" alt="Confused" title="Confused"></a></td>
<td><a href="javascript:emoticon(':cool:')"><img src="images/icon_cool.gif" border="0" alt="Cool" title="Cool"></a></td>
<td><a href="javascript:emoticon(':lol:')"><img src="images/icon_lol.gif" border="0" alt="Laughing" title="Laughing"></a></td>
<td><a href="javascript:emoticon(':x')"><img src="images/icon_mad.gif" border="0" alt="Mad" title="Mad"></a></td>
<td><a href="javascript:emoticon(':P')"><img src="images/icon_razz.gif" border="0" alt="Razz" title="Razz"></a></td>
</tr>
<tr align="center" valign="middle">
<td><a href="javascript:emoticon(':oops:')"><img src="images/icon_redface.gif" border="0" alt="Embarassed" title="Embarassed"></a></td>
<td><a href="javascript:emoticon(':cry:')"><img src="images/icon_cry.gif" border="0" alt="Crying" title="Crying"></a></td>
<td><a href="javascript:emoticon(':evil:')"><img src="images/icon_evil.gif" border="0" alt="Evil or Very Mad" title="Evil or Very Mad"></a></td>
<td><a href="javascript:emoticon(':twisted:')"><img src="images/icon_twisted.gif" border="0" alt="Twisted Evil" title="Twisted Evil"></a></td>
<td><a href="javascript:emoticon(':roll:')"><img src="images/icon_rolleyes.gif" border="0" alt="Rolling Eyes" title="Rolling Eyes"></a></td>
<td><a href="javascript:emoticon(':wink:')"><img src="images/icon_wink.gif" border="0" alt="Wink" title="Wink"></a></td>
<td><a href="javascript:emoticon(':!:')"><img src="images/icon_exclaim.gif" border="0" alt="Exclamation" title="Exclamation"></a></td>
<td><a href="javascript:emoticon(':?:')"><img src="images/icon_question.gif" border="0" alt="Question" title="Question"></a></td>
<td><a href="javascript:emoticon(':idea:')"><img src="images/icon_idea.gif" border="0" alt="Idea" title="Idea"></a></td>
<td><a href="javascript:emoticon(':arrow:')"><img src="images/icon_arrow.gif" border="0" alt="Arrow" title="Arrow"></a></td>
</tr>
</table>
</center><center>
<table width="341" border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td width="50"><input type="button" class="button" value=" Vet " style="font-weight:bolder; width: 50px" onClick="javascript:bbcode('[b] [/b]')"></td>
<td width="100"><input name="" type="button" class="button" style="font-weight:bold; width: 100px" onClick="javascript:bbcode('[u] [/u]')" value=" Onderstreept "></td>
<td width="50"><input type="button" class="button" value=" Schuin " style="font-weight:bold; font-style:italic; width: 55px" onClick="javascript:bbcode('[i] [/i]')"></td>
<td width="101"><input name="" type="button" class="button" style="font-weight:bold; width: 100px" onClick="javascript:bbcode('[center] [/center]')" value=" Gecentreerd "></td>
</tr>
</table>
</center>
<!-- Smiley List Stops Here -->
<br>
<form name="post" action="add.php" method="post">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<p><b><font size="2"><?php echo $yournametxt; ?></font></b></p>
</td>
<td><input type="text" name="yourname" size="20"></td>
</tr>
<tr>
<td>
<p><b><font size="2"><?php echo $youremailtxt; ?></font></b></p>
</td>
<td><input type="text" name="youremail" size="20" value=""></td>
</tr>
<?php
if($image_verify == 1)
{
echo '<tr><td><p><b><font size="2">Verify:</font></b></p></td><td><input type="text" name="txtNumber" size="20" value=""><img src="random.php"></td></tr>';
}
?>
<tr>
<td>
<p><b><font size="2"><?php echo $yourMessagetxt; ?></font></b></p>
</td>
<td>
<div align="right">
<textarea name="yourmessage" cols="45" rows="10"></textarea></div>
</td>
</tr>
<tr>
<td></td>
<td>
<div align="right">
<input type="submit" name="ok" value="<?php echo $submitbutton; ?>">
</td>
</tr>
</table>
</form>
</td></tr></table><!-- End of toolbar table -->
<?php
include("../includes/footer.php");
include("footer.php");
?>
ook de meta tags heb ik in de header gezet.
Toevoeging op 12/11/2012 15:53:56:
dit staat in de header
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
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
<?php
session_start();
?>
<!-- NOTE: PLEASE DO NOT REMOVE THE BELLOW 3 LINES FROM YOUR HEADER FILE -->
<?php
include("gbclass.php");
include("language/$default_language");
?>
<!-- NOTE: PLEASE DO NOT REMOVE THE ABOVE 3 LINES FROM YOUR HEADER FILE -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="nl">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<meta name="author" content="[email protected]">
<meta name="generator" content="Pascal Wetzels">
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<meta name="description" content="Kringgroep Limburg is van oorsprong een dobermann vereniging, maar alle rassen zijn welkom. Neem een kijkje op onze site voor meer informatie.">
<meta name="keywords" content="Kringgroep, Limburg, hond, sport, dobermann, speuren, pakwerk, vereniging, dvin, kennel, pups, africhting, examen, training, raad van beheer, show, fokker">
<title>Kringgroep Limburg gastenboek</title>
<link rel="stylesheet" href="../index_files/css3menu2/style.css" type="text/css">
<link rel="STYLESHEET" type="text/css" href="style.css">
</head>
<?php include("../includes/menu.php")?>
<body bgcolor="#FFFFFF" text="#000000" link="#8080ff" vlink="#0000ff" alink="#ffff00"><center>
<h1><?php echo $headingtitletxt ?></h1>
<br><br>
<center>
[ <a href="guestbook.php"><b><?php echo $addentrytxt ?></b></a> ]
[ <a href="list.php?page=1&order=asc"><b><?php echo $viewguestbooktxt ?></b></a> ]<br>
[ <a href="list.php?page=1&order=asc"><?php echo $newpostfirsttxt ?></a> ]
[ <a href="list.php?page=1&order=desc"><?php echo $newpostlasttxt ?></a> ]</center>
<br>
<form action="search.php" method=post>
<table border=0 cellpadding=2>
<tr>
<td><font size="1">Type je <b>Zoekwoord</b>:</font></td>
<td align=left><input type="text" name="search_term" size=20 maxlength=50><input type=submit value="Zoek Nu!"></td>
</tr>
</table>
</form>
<br>
session_start();
?>
<!-- NOTE: PLEASE DO NOT REMOVE THE BELLOW 3 LINES FROM YOUR HEADER FILE -->
<?php
include("gbclass.php");
include("language/$default_language");
?>
<!-- NOTE: PLEASE DO NOT REMOVE THE ABOVE 3 LINES FROM YOUR HEADER FILE -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="nl">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<meta name="author" content="[email protected]">
<meta name="generator" content="Pascal Wetzels">
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<meta name="description" content="Kringgroep Limburg is van oorsprong een dobermann vereniging, maar alle rassen zijn welkom. Neem een kijkje op onze site voor meer informatie.">
<meta name="keywords" content="Kringgroep, Limburg, hond, sport, dobermann, speuren, pakwerk, vereniging, dvin, kennel, pups, africhting, examen, training, raad van beheer, show, fokker">
<title>Kringgroep Limburg gastenboek</title>
<link rel="stylesheet" href="../index_files/css3menu2/style.css" type="text/css">
<link rel="STYLESHEET" type="text/css" href="style.css">
</head>
<?php include("../includes/menu.php")?>
<body bgcolor="#FFFFFF" text="#000000" link="#8080ff" vlink="#0000ff" alink="#ffff00"><center>
<h1><?php echo $headingtitletxt ?></h1>
<br><br>
<center>
[ <a href="guestbook.php"><b><?php echo $addentrytxt ?></b></a> ]
[ <a href="list.php?page=1&order=asc"><b><?php echo $viewguestbooktxt ?></b></a> ]<br>
[ <a href="list.php?page=1&order=asc"><?php echo $newpostfirsttxt ?></a> ]
[ <a href="list.php?page=1&order=desc"><?php echo $newpostlasttxt ?></a> ]</center>
<br>
<form action="search.php" method=post>
<table border=0 cellpadding=2>
<tr>
<td><font size="1">Type je <b>Zoekwoord</b>:</font></td>
<td align=left><input type="text" name="search_term" size=20 maxlength=50><input type=submit value="Zoek Nu!"></td>
</tr>
</table>
</form>
<br>
Gewijzigd op 12/11/2012 16:16:58 door Pascal Wetzels
Als je geen doctype hebt schiet deze in Quircks mode, wat betekend dat hij de pagina laat zien alsof we in 2002 leven.
Dit wil je natuurlijk niet! Daarom heb je een doctype nodig. Dat doctype is <!doctype html>. In tegenstelling tot wat hierboven gezegd werd zit er geen versie in dit doctype. De oudere doctypes waren enorm lang, maar de browsers gebruikte alles niet, al die lange teksten waren voor de validator. Browsers lazen alleen dit stukje, vandaar dat we die tegenwoordig gebruiken.
Ik zie in je code enorm veel oude methoden, ik raad je aan HTMl en CSS opnieuw te leren met de huidige technieken. Even wat problemen met deze code:
- meta content-language bestaat al lang niet meer
- schrijf in HTML alle tags met kleine letters, values bij voorkeur ook
- je include het menu tussen </head> en <body>, dit mag niet
- gebruik geen inline CSS (bgcolor="...", text="...", style="...", ect.)
- zodra je meer dan 1 <br> achter elkaar plaatst doe je wat verkeerd en moet je het met CSS oplossen (margin of padding)
- center tag komt uit de prehistorie, gebruik CSS hiervoor
- zet een menu in een lijst
- de <b> tag is hiervoor niet bedoelt, gebruik ook hier CSS voor
- gebruik geen tabellen voor het lay-out
- font tag is even ouderwets als de center tag, gebruik CSS hievoor
Als ik het goed begrijp kan ik beter op zoek gaan naar een nieuw (moderner geschreven) gastenboek.
ik heb dit zo op internet gevonden bij DigiOz en geinstalleerd. ik heb alleen de achtergrond en de menu.php file er zelf bij gemaakt. de rest was zo kant en klaar.
of moet er eens een lang weekend voor gaan zitten om het naar de nieuwe stijl aan te passen.
ps ik gebruik inderdaad internet explorer, maar test het ook in firefox en safari
Gewijzigd op 12/11/2012 16:29:09 door Pascal Wetzels
Pascal Wetzels op 12/11/2012 16:28:03:
Als ik het goed begrijp kan ik beter op zoek gaan naar een nieuw (moderner geschreven) gastenboek.
Lijkt me een juiste conclusie.
Trouwens ... altijd wanneer je scripts van anderen gebruikt. Als die niet goed werken, zoek dan een script dat wel werkt.
Het is zonde om tijd te verspillen aan slechte scripts van anderen.
De pagina waar je zo'n code downloadt, kijk daar naar de commentaren van de gebruikers. Let altijd op de datum (als er geen jaartal staat, ga er dan van uit dat het heel oud is). Zie of de auteur bugs oplost, ... let op dat soort dingen.
Gewijzigd op 12/11/2012 16:45:18 door Kris Peeters