Hoe krijg ik dit op de juiste plek
Nu wil ik bij het menu dat de inhoud van de pagina in het hoofdvak weergegeven wordt.
vroeger had ik een site met frames, toen lukte me dat wel.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
<div id="websitevak">
<div id="balkboven">
<img src="afbeeldingen/yoga-1.jpg" alt="">
<p><a href="index.php">Jouw-Eigen-Website.nl</a></p>
</div>
<!-- einde balkboven -->
<div id="middenstuk">
<div id="hoofdvak">
<div id="menu">
<a href="#" onclick=toggle('hoofdmenu'); id="menuknop"><span id="menu-icoon"><span></span><span></span><span></span></span>Menu</a>
<ul id="hoofdmenu">
<li><a href="index.php">Home</a></li>
[b]<li class="submenu"><a href="#" onClick="return true">Hobby's</a>
<ul>
<li><a href="pagina1">Fotografie</a></li>
<li><a href="pagina2">Zeilen</a></li>
<li><a href="pagina3">Lezen</a></li>
</ul>
</li>[/b]
<div id="websitevak">
<div id="balkboven">
<img src="afbeeldingen/yoga-1.jpg" alt="">
<p><a href="index.php">Jouw-Eigen-Website.nl</a></p>
</div>
<!-- einde balkboven -->
<div id="middenstuk">
<div id="hoofdvak">
<div id="menu">
<a href="#" onclick=toggle('hoofdmenu'); id="menuknop"><span id="menu-icoon"><span></span><span></span><span></span></span>Menu</a>
<ul id="hoofdmenu">
<li><a href="index.php">Home</a></li>
[b]<li class="submenu"><a href="#" onClick="return true">Hobby's</a>
<ul>
<li><a href="pagina1">Fotografie</a></li>
<li><a href="pagina2">Zeilen</a></li>
<li><a href="pagina3">Lezen</a></li>
</ul>
</li>[/b]
Ik probeer zelf iets te maken voor de hobby, dus ben niet echt onderlegt, maar wil graag wat leren
Modedit: Blokhaken gebruiken dus!
Gewijzigd op 27/02/2025 22:24:59 door - Ariën -
Code (php)
1
<div id="hoofdvak">Bla bla bla</div>
PS: Gebruik [code] en [/code]-tags in het forum. Dan is je code beter leesbaar.
Gewijzigd op 27/02/2025 22:20:20 door - Ariën -
- Ariën - op 27/02/2025 22:14:41:
Dan moet je je div-je hoofdvak ook sluiten, en daar je inhoud neerzetten:
Code (php)
1
<div id="hoofdvak">Bla bla bla</div>
Kun je een voorbeeld geven waar ik dit moet zetten? Sorry, maar ben een leek en probeer het te leren
Weet je dit niet, lees je anders even in met een basistutorial.
Gewijzigd op 27/02/2025 22:31:21 door - Ariën -
is een template die ik heb gedownload en probeer te gebruiken
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Titel voor de tab</title>
<meta name="keywords" content="keyword 1, keyword 2">
<meta name="description" content="beschrijving">
<link rel="stylesheet" href="overig/basis.css" type="text/css" media="screen">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<script src="overig/respond.min.js" type="text/javascript"></script>
<script src="overig/menuknop.js" type="text/javascript"></script>
</head>
<body>
<div id="websitevak">
<div id="balkboven">
<img src="afbeeldingen/yoga-1.jpg" alt="">
<p><a href="index.php">Jouw-Eigen-Website.nl</a></p>
</div>
<!-- einde balkboven -->
<div id="middenstuk">
<div id="hoofdvak">
<div id="menu">
<a href="#" onclick=toggle('hoofdmenu'); id="menuknop"><span id="menu-icoon"><span></span><span></span><span></span></span>Menu</a>
<ul id="hoofdmenu">
<li><a href="index.php">Home</a></li>
<li class="submenu"><a href="#" onClick="return true">Hobby's</a>
<ul>
<li><a href="#">Fotografie</a></li>
<li><a href="#">Zeilen</a></li>
<li><a href="#">Lezen</a></li>
</ul>
</li>
<li class="submenu"><a href="#" onClick="return true">Foto's</a>
<ul>
<li><a href="#">Vakanties</a></li>
<li><a href="#">Familie</a></li>
</ul>
</li>
<li><a href="#">Wie zijn wij</a>
</li>
<li class="submenu"><a href="#" onClick="return true">Reizen</a>
<ul>
<li><a href="#">Egypte</a></li>
<li><a href="#">Zuid-Afrika</a></li>
<li><a href="#">India</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
<!-- einde menu -->
<div id="tekstvak">
<div id="inhoudtekstvak">
<h1>Homepage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur bibendum orci sit amet odio varius pulvinar.
Quisque malesuada iaculis nibh, a vulputate orci rutrum sed.
In vitae neque nibh. Maecenas semper dolor nec orci vestibulum cursus.
Phasellus vel eros urna, at laoreet lorem.
Nam diam libero, vulputate non aliquet et, tempus consectetur magna.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Morbi consequat ornare arcu at convallis. Quisque porta ultrices ligula et vulputate.
Nulla et lacus elit, id dapibus ante. Ut vulputate aliquam consequat.
In nulla quam, consectetur in consequat quis, facilisis non nisi.
</p>
<ul>
<li>lorem ipsum 1, lorem ipsum 1, lorem ipsum 1, lorem ipsum 1, lorem ipsum 1</li>
<li>lorem ipsum 2</li>
<li>lorem ipsum 3</li>
</ul>
<h2>Duis consectus</h2>
<p>Duis consectus vestibulum condimentum.
Morbi bibendum, nisl id hendrerit rutrum, orci metus semper nulla, a condimentum augue turpis quis elit.
Donec dolor velit, egestas sit amet faucibus non, placerat eget erat.
Etiam lectus neque, hendrerit in feugiat ac, malesuada eu arcu.
Ut ipsum dui, sollicitudin eget viverra a, hendrerit in sapien.
Proin hendrerit orci eget nulla tristique sit amet volutpat arcu ornare.
Ut auctor viverra turpis id tincidunt. Curabitur eu lectus non orci interdum sagittis at condimentum justo.
Donec porttitor massa tortor, et malesuada odio. Sed eget nisl sit amet mauris tempor ultrices ut eget erat.
Mauris sit amet erat quis risus vehicula fermentum. Nulla sollicitudin pulvinar venenatis.
</p>
<ol>
<li>lorem ipsum 1</li>
<li>lorem ipsum 2</li>
<li>lorem ipsum 3</li>
</ol>
<h2>Nunc sit amet</h2>
<p>Nunc sit amet purus id turpis vestibulum malesuada at sed dui.
Ut iaculis, nisl eget placerat pellentesque, eros diam viverra orci, a hendrerit sapien mi ac dui.
Fusce a nibh at urna posuere posuere. Morbi enim orci, tincidunt porttitor ultrices nec, ultrices eleifend nibh.
Aliquam erat volutpat. Donec scelerisque tincidunt velit, sit amet ultricies ante accumsan ac.
Praesent vestibulum porta enim, et rhoncus eros porta ac. Vivamus blandit hendrerit turpis, ac consequat lorem convallis ac.
Vestibulum nec mauris eget leo sollicitudin porttitor eget ornare augue.
Maecenas sed enim at urna tincidunt convallis. Donec non nunc at turpis imperdiet vestibulum.
Vestibulum ut rutrum neque. Nulla tortor orci, volutpat sit amet fermentum et, convallis interdum justo.
Integer tristique condimentum ullamcorper.
</p>
<h2>Nunc fringilla</h2>
<img alt="kleermakerszit" src="afbeeldingen/yoga-2.jpg" class="rechts" style="border: 1px solid darkgrey; padding: 4px;">
<p>Nunc fringilla elementum quam, eget sagittis orci venenatis a.
Nunc consequat odio enim, sit amet fringilla massa.
Donec mattis venenatis eleifend.
Nulla facilisis ligula eget sapien lacinia gravida.
Nam eu odio neque. Vivamus lacinia laoreet ante ut consequat.
Aliquam ac tellus magna, in dapibus magna.
Mauris eleifend, nisl at tempor dignissim, sapien purus pharetra quam,
non fringilla est dolor ac turpis.
Proin ornare sapien in augue posuere id pretium diam malesuada.
Suspendisse dui justo, lacinia convallis mattis quis, laoreet vel nibh.
Praesent eget quam lorem, ut vestibulum orci. Donec vehicula iaculis lacinia.
Proin in viverra elit.
Nulla sed libero dignissim lectus pellentesque porttitor et quis enim.
Donec congue feugiat leo et accumsan. Nunc eget ligula mi.
Donec id diam nec lorem tincidunt ultricies. Vivamus quis sapien odio.
Nunc sed justo dolor. Phasellus sit amet tortor ut augue commodo feugiat vitae id erat.
</p>
</div>
<!-- einde inhoudtekstvak -->
</div>
<!-- einde tekstvak -->
<div id="extravak">
<div id="inhoudextravak">
<h3>Duis Consectus</h3>
<p>
Nunc fringilla elementum quam, eget sagittis orci venenatis a.
</p>
<img alt="yogahouding 1" src="afbeeldingen/yogahouding-1.png">
<img alt="yogahouding 2" src="afbeeldingen/yogahouding-2.png">
<img alt="yogahouding 3" src="afbeeldingen/yogahouding-3.png">
<img alt="yogahouding 4" src="afbeeldingen/yogahouding-4.png">
</div>
<!-- einde inhoudextravak -->
</div>
<!-- einde extravak -->
<div id="socialmediavak">
<div id="inhoudsocialmediavak">
<h3>Volg ons via:</h3>
<a href="#"><img alt="facebook" src="afbeeldingen/facebook.png" class="socialmedia"></a>
<a href="#"><img alt="linkedin" src="afbeeldingen/linkedin.png" class="socialmedia"></a>
<a href="#"><img alt="twitter" src="afbeeldingen/twitter.png" class="socialmedia"></a>
<a href="#"><img alt="youtube" src="afbeeldingen/youtube.png" class="socialmedia"></a>
<a href="#"><img alt="rss" src="afbeeldingen/rss.png" class="socialmedia"></a>
</div>
<!-- einde inhoudsocialmediavak -->
</div>
<!-- einde socialmediavak -->
</div>
<!-- einde hoofdvak -->
</div>
<!-- einde middenstuk -->
<div id="balkbeneden">
<div id="inhoudbalkbeneden">
<span>© 2014 jouw website</span>
<span><a href="algemene-voorwaarden.php">algemene voorwaarden</a></span>
<span><a href="links.php">links</a></span>
</div>
</div>
<!-- einde balkbeneden -->
</div>
<!-- einde websitevak -->
</body>
</html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Titel voor de tab</title>
<meta name="keywords" content="keyword 1, keyword 2">
<meta name="description" content="beschrijving">
<link rel="stylesheet" href="overig/basis.css" type="text/css" media="screen">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<script src="overig/respond.min.js" type="text/javascript"></script>
<script src="overig/menuknop.js" type="text/javascript"></script>
</head>
<body>
<div id="websitevak">
<div id="balkboven">
<img src="afbeeldingen/yoga-1.jpg" alt="">
<p><a href="index.php">Jouw-Eigen-Website.nl</a></p>
</div>
<!-- einde balkboven -->
<div id="middenstuk">
<div id="hoofdvak">
<div id="menu">
<a href="#" onclick=toggle('hoofdmenu'); id="menuknop"><span id="menu-icoon"><span></span><span></span><span></span></span>Menu</a>
<ul id="hoofdmenu">
<li><a href="index.php">Home</a></li>
<li class="submenu"><a href="#" onClick="return true">Hobby's</a>
<ul>
<li><a href="#">Fotografie</a></li>
<li><a href="#">Zeilen</a></li>
<li><a href="#">Lezen</a></li>
</ul>
</li>
<li class="submenu"><a href="#" onClick="return true">Foto's</a>
<ul>
<li><a href="#">Vakanties</a></li>
<li><a href="#">Familie</a></li>
</ul>
</li>
<li><a href="#">Wie zijn wij</a>
</li>
<li class="submenu"><a href="#" onClick="return true">Reizen</a>
<ul>
<li><a href="#">Egypte</a></li>
<li><a href="#">Zuid-Afrika</a></li>
<li><a href="#">India</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
<!-- einde menu -->
<div id="tekstvak">
<div id="inhoudtekstvak">
<h1>Homepage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur bibendum orci sit amet odio varius pulvinar.
Quisque malesuada iaculis nibh, a vulputate orci rutrum sed.
In vitae neque nibh. Maecenas semper dolor nec orci vestibulum cursus.
Phasellus vel eros urna, at laoreet lorem.
Nam diam libero, vulputate non aliquet et, tempus consectetur magna.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Morbi consequat ornare arcu at convallis. Quisque porta ultrices ligula et vulputate.
Nulla et lacus elit, id dapibus ante. Ut vulputate aliquam consequat.
In nulla quam, consectetur in consequat quis, facilisis non nisi.
</p>
<ul>
<li>lorem ipsum 1, lorem ipsum 1, lorem ipsum 1, lorem ipsum 1, lorem ipsum 1</li>
<li>lorem ipsum 2</li>
<li>lorem ipsum 3</li>
</ul>
<h2>Duis consectus</h2>
<p>Duis consectus vestibulum condimentum.
Morbi bibendum, nisl id hendrerit rutrum, orci metus semper nulla, a condimentum augue turpis quis elit.
Donec dolor velit, egestas sit amet faucibus non, placerat eget erat.
Etiam lectus neque, hendrerit in feugiat ac, malesuada eu arcu.
Ut ipsum dui, sollicitudin eget viverra a, hendrerit in sapien.
Proin hendrerit orci eget nulla tristique sit amet volutpat arcu ornare.
Ut auctor viverra turpis id tincidunt. Curabitur eu lectus non orci interdum sagittis at condimentum justo.
Donec porttitor massa tortor, et malesuada odio. Sed eget nisl sit amet mauris tempor ultrices ut eget erat.
Mauris sit amet erat quis risus vehicula fermentum. Nulla sollicitudin pulvinar venenatis.
</p>
<ol>
<li>lorem ipsum 1</li>
<li>lorem ipsum 2</li>
<li>lorem ipsum 3</li>
</ol>
<h2>Nunc sit amet</h2>
<p>Nunc sit amet purus id turpis vestibulum malesuada at sed dui.
Ut iaculis, nisl eget placerat pellentesque, eros diam viverra orci, a hendrerit sapien mi ac dui.
Fusce a nibh at urna posuere posuere. Morbi enim orci, tincidunt porttitor ultrices nec, ultrices eleifend nibh.
Aliquam erat volutpat. Donec scelerisque tincidunt velit, sit amet ultricies ante accumsan ac.
Praesent vestibulum porta enim, et rhoncus eros porta ac. Vivamus blandit hendrerit turpis, ac consequat lorem convallis ac.
Vestibulum nec mauris eget leo sollicitudin porttitor eget ornare augue.
Maecenas sed enim at urna tincidunt convallis. Donec non nunc at turpis imperdiet vestibulum.
Vestibulum ut rutrum neque. Nulla tortor orci, volutpat sit amet fermentum et, convallis interdum justo.
Integer tristique condimentum ullamcorper.
</p>
<h2>Nunc fringilla</h2>
<img alt="kleermakerszit" src="afbeeldingen/yoga-2.jpg" class="rechts" style="border: 1px solid darkgrey; padding: 4px;">
<p>Nunc fringilla elementum quam, eget sagittis orci venenatis a.
Nunc consequat odio enim, sit amet fringilla massa.
Donec mattis venenatis eleifend.
Nulla facilisis ligula eget sapien lacinia gravida.
Nam eu odio neque. Vivamus lacinia laoreet ante ut consequat.
Aliquam ac tellus magna, in dapibus magna.
Mauris eleifend, nisl at tempor dignissim, sapien purus pharetra quam,
non fringilla est dolor ac turpis.
Proin ornare sapien in augue posuere id pretium diam malesuada.
Suspendisse dui justo, lacinia convallis mattis quis, laoreet vel nibh.
Praesent eget quam lorem, ut vestibulum orci. Donec vehicula iaculis lacinia.
Proin in viverra elit.
Nulla sed libero dignissim lectus pellentesque porttitor et quis enim.
Donec congue feugiat leo et accumsan. Nunc eget ligula mi.
Donec id diam nec lorem tincidunt ultricies. Vivamus quis sapien odio.
Nunc sed justo dolor. Phasellus sit amet tortor ut augue commodo feugiat vitae id erat.
</p>
</div>
<!-- einde inhoudtekstvak -->
</div>
<!-- einde tekstvak -->
<div id="extravak">
<div id="inhoudextravak">
<h3>Duis Consectus</h3>
<p>
Nunc fringilla elementum quam, eget sagittis orci venenatis a.
</p>
<img alt="yogahouding 1" src="afbeeldingen/yogahouding-1.png">
<img alt="yogahouding 2" src="afbeeldingen/yogahouding-2.png">
<img alt="yogahouding 3" src="afbeeldingen/yogahouding-3.png">
<img alt="yogahouding 4" src="afbeeldingen/yogahouding-4.png">
</div>
<!-- einde inhoudextravak -->
</div>
<!-- einde extravak -->
<div id="socialmediavak">
<div id="inhoudsocialmediavak">
<h3>Volg ons via:</h3>
<a href="#"><img alt="facebook" src="afbeeldingen/facebook.png" class="socialmedia"></a>
<a href="#"><img alt="linkedin" src="afbeeldingen/linkedin.png" class="socialmedia"></a>
<a href="#"><img alt="twitter" src="afbeeldingen/twitter.png" class="socialmedia"></a>
<a href="#"><img alt="youtube" src="afbeeldingen/youtube.png" class="socialmedia"></a>
<a href="#"><img alt="rss" src="afbeeldingen/rss.png" class="socialmedia"></a>
</div>
<!-- einde inhoudsocialmediavak -->
</div>
<!-- einde socialmediavak -->
</div>
<!-- einde hoofdvak -->
</div>
<!-- einde middenstuk -->
<div id="balkbeneden">
<div id="inhoudbalkbeneden">
<span>© 2014 jouw website</span>
<span><a href="algemene-voorwaarden.php">algemene voorwaarden</a></span>
<span><a href="links.php">links</a></span>
</div>
</div>
<!-- einde balkbeneden -->
</div>
<!-- einde websitevak -->
</body>
</html>
Gebruik een goede editor, en zorg dat je je tags netjes inspringt met TAB. Velen doen dat zelfs automatisch, of met een bepaalde short-key.
Nu is dat totaal niet te lezen, en moeten we ontrafelen welke div-jes bij elkaar horen. Als jij dat ook doet, dan zie je vast ook jouw probleem.
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="kop">
<h1>Welkom op mijn site</h1>
</div>
<div id="inhoud">
<div id="boven">Bla</div>
<div id="midden">Bla</div>
<div id="beneden">Bla</div>
</div>
</div>
<div id="kop">
<h1>Welkom op mijn site</h1>
</div>
<div id="inhoud">
<div id="boven">Bla</div>
<div id="midden">Bla</div>
<div id="beneden">Bla</div>
</div>
</div>
En, vind je dit voorbeeld niet beter lezen?
Je ziet precies dat alle tags die geopend zijn, ook afgesloten is.
Gewijzigd op 27/02/2025 22:50:04 door - Ariën -