Menu
Op het moment dat ik een knop aanklik wil ik graag dat hij alleen de content aanpast ( oftewel het middelste frame waar alle gegevens staan) Is dit mogelijk?
HTML
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
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
<html>
<head>
<title>Test-Page</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<!--Container-->
<div class="container">
<!--Logo-->
<div class="header">Logo
</div>
<!--Menu-->
<div class="menu">
<ul>
<li><a href="/" target="content">Home</a></li>
<li><a href="/">Over ons</a></li>
<li><a href="/">Archief</a></li>
<li><a href="/">Forum</a></li>
<li><a href="/">Winkel</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>
<!--Content-->
<div class="content">Content
</div>
<!--Footer-->
<div class="footer">Footer
</div>
</div>
</body>
</html>
<head>
<title>Test-Page</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<!--Container-->
<div class="container">
<!--Logo-->
<div class="header">Logo
</div>
<!--Menu-->
<div class="menu">
<ul>
<li><a href="/" target="content">Home</a></li>
<li><a href="/">Over ons</a></li>
<li><a href="/">Archief</a></li>
<li><a href="/">Forum</a></li>
<li><a href="/">Winkel</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>
<!--Content-->
<div class="content">Content
</div>
<!--Footer-->
<div class="footer">Footer
</div>
</div>
</body>
</html>
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
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
body {
background-color: #CCCCCC;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
text-align: left;
margin: 0 auto;
width: 760px;
background-image: url(plaatje.jpg);
background-repeat: repeat-x;
border: 1px solid black;
}
.header {
background-image:url("logo.jpg");
height:150px;
}
.menu {
text-align: center;
}
.menu ul{
background-color: #F60;
width: 100%;
padding: 0;
margin: 0;
white-space: no-wrap;
}
.menu ul li{
display: inline;
}
.menu ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: white;
}
.menu ul li a:hover{
color: #999999;
}
.content {
padding: 0 0 0 0px;
}
.footer {
background-color: #0000ff;
clear: left;
}
background-color: #CCCCCC;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
text-align: left;
margin: 0 auto;
width: 760px;
background-image: url(plaatje.jpg);
background-repeat: repeat-x;
border: 1px solid black;
}
.header {
background-image:url("logo.jpg");
height:150px;
}
.menu {
text-align: center;
}
.menu ul{
background-color: #F60;
width: 100%;
padding: 0;
margin: 0;
white-space: no-wrap;
}
.menu ul li{
display: inline;
}
.menu ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: white;
}
.menu ul li a:hover{
color: #999999;
}
.content {
padding: 0 0 0 0px;
}
.footer {
background-color: #0000ff;
clear: left;
}
Makkelijkste in je website op te delen in meerdere pagina's en de include functie van php gebruiken.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
include('header.php');
include('menu.php');
echo '<h1>Welkom op onze site</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac mattis diam. Nullam vel placerat nisi. Sed gravida nibh quis mauris pharetra eget tincidunt tellus sagittis. Aenean id neque nisl, eu suscipit urna.';
include('footer.php');
?>
include('header.php');
include('menu.php');
echo '<h1>Welkom op onze site</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac mattis diam. Nullam vel placerat nisi. Sed gravida nibh quis mauris pharetra eget tincidunt tellus sagittis. Aenean id neque nisl, eu suscipit urna.';
include('footer.php');
?>
Wil je dit niet dan zou je iets met Javascript/Ajax moeten gaan doen. Hier is wel wat over te vinden op Google onder 'Ajax tabs' of zo.
Ik snap hoe het werkt met de includes, maar ik zou graag zien als ik bijvoorbeeld de knop "over ons" aanklik dat hij dan in de content de pagina overons.php laad. En als ik een andere menuknop aanklik moet hij die laden in het midden dus.
Is dit ook mogelijk zo , of moet ik dan toch java of ajax gebruiken?
Dit kan je nog wat vereenvoudigen, of uitbreiden, net wat jij wilt. Dit is in ieder geval een mooie opzet.
Succes!
Nu zit ik alleen met een probleem, het lijkt er op dat dit script niet door de Div's heen kan lezen.
Ik heb het nu redelijk letterlijk van dat script gekopieerd, dit ga ik nog wel aanpassen. Maar hij blijft aangeven dat er geen pagina is opgegeven.
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);
/**
* Arrays om errors en content tijdelijk in op te slaan
*/
$aErrors = array();
$aContent = array();
/**
* Array met alle paginas die geïnclude mogen worden,
* de keys stellen de namen van paginas voor en de waarden geven met een boolean
* aan of de pagina statisch (false) dan wel dynamisch (true)
*/
$aPages = array (
'voorbeeld_statisch' => false,
'voorbeeld_dynamisch' => true,
'bestaat_niet' => false
);
/**
* Directory waarin de paginas zich bevinden
* Extensie die de te includen paginas hebben
*/
$sDir = 'inc/';
$sExt = '.inc.php';
/**
* Is er een pagina opgegeven?
*/
if(isset($_GET['page']))
{
$sPad = $sDir.$_GET['page'].$sExt;
/**
* Is dit een toegestane pagina?
*/
if(array_key_exists($_GET['page'], $aPages))
{
/**
* Bestaat de opgevraagde pagina?
*/
if(file_exists($sPad))
{
/**
* Is de pagina dynamisch of statisch?
*/
if($aPages[$_GET['page']] === true)
{
include($sPad);
}
else
{
$aContent[] = file_get_contents($sPad);
}
}
else
{
$aErrors[] = 'Sorry, deze pagina bestaat niet.';
}
}
else
{
$aErrors[] = 'Sorry, deze pagina is niet toegestaan.';
}
}
else
{
$aContent[] = 'Geen pagina opgegeven';
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test-Page</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<!--Container-->
<div class="container">
<!--Logo-->
<div class="header">Logo
</div>
<!--Menu-->
<div class="menu">
<ul>
<li><a href="/" target="content">Home</a></li>
<li><a href="?over_ons">Over Ons</a></li>
<li><a href="/">Archief</a></li>
<li><a href="/">Forum</a></li>
<li><a href="/">Winkel</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>
<!--Content-->
<div class="content">
<?php
/**
* Outputten van content die tijdens het includen gegenereerd is.
* Fouten staan in $aErrors, de rest van de content in $aContent.
*/
if(!empty($aErrors))
{
echo '<ul>';
foreach($aErrors as $sError)
{
echo '<li>'.$sError.'</li>';
}
echo '</ul>';
}
elseif(!empty($aContent))
{
foreach($aContent as $sLine)
{
echo $sLine;
}
}
?>
</div>
<!--Footer-->
<div class="footer">Footer
</div>
</div>
</body>
</html>
ini_set('display_errors', 'On');
error_reporting(E_ALL);
/**
* Arrays om errors en content tijdelijk in op te slaan
*/
$aErrors = array();
$aContent = array();
/**
* Array met alle paginas die geïnclude mogen worden,
* de keys stellen de namen van paginas voor en de waarden geven met een boolean
* aan of de pagina statisch (false) dan wel dynamisch (true)
*/
$aPages = array (
'voorbeeld_statisch' => false,
'voorbeeld_dynamisch' => true,
'bestaat_niet' => false
);
/**
* Directory waarin de paginas zich bevinden
* Extensie die de te includen paginas hebben
*/
$sDir = 'inc/';
$sExt = '.inc.php';
/**
* Is er een pagina opgegeven?
*/
if(isset($_GET['page']))
{
$sPad = $sDir.$_GET['page'].$sExt;
/**
* Is dit een toegestane pagina?
*/
if(array_key_exists($_GET['page'], $aPages))
{
/**
* Bestaat de opgevraagde pagina?
*/
if(file_exists($sPad))
{
/**
* Is de pagina dynamisch of statisch?
*/
if($aPages[$_GET['page']] === true)
{
include($sPad);
}
else
{
$aContent[] = file_get_contents($sPad);
}
}
else
{
$aErrors[] = 'Sorry, deze pagina bestaat niet.';
}
}
else
{
$aErrors[] = 'Sorry, deze pagina is niet toegestaan.';
}
}
else
{
$aContent[] = 'Geen pagina opgegeven';
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test-Page</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<!--Container-->
<div class="container">
<!--Logo-->
<div class="header">Logo
</div>
<!--Menu-->
<div class="menu">
<ul>
<li><a href="/" target="content">Home</a></li>
<li><a href="?over_ons">Over Ons</a></li>
<li><a href="/">Archief</a></li>
<li><a href="/">Forum</a></li>
<li><a href="/">Winkel</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>
<!--Content-->
<div class="content">
<?php
/**
* Outputten van content die tijdens het includen gegenereerd is.
* Fouten staan in $aErrors, de rest van de content in $aContent.
*/
if(!empty($aErrors))
{
echo '<ul>';
foreach($aErrors as $sError)
{
echo '<li>'.$sError.'</li>';
}
echo '</ul>';
}
elseif(!empty($aContent))
{
foreach($aContent as $sLine)
{
echo $sLine;
}
}
?>
</div>
<!--Footer-->
<div class="footer">Footer
</div>
</div>
</body>
</html>
Ziet iemand wat ik hier precies fout doe?
Gewijzigd op 12/02/2011 17:18:05 door Patrick Kappen