Onverwacht resultaat volgorde
Dat wil ik niet. Ik wil dat de inhoud van een html file tussen de header en de footer komt te staan. Concreet betekent dat in het blauwe rood omrande vak.
Waarom de inhoud van de html file nu een beetje onderaan erbij bungelt is me een raadsel.
Heeft iemand een suggestie voor een oplossing?
Dit is de code:
Code (php)
Wat zie ik over het hoofd dat er voor zorgt dat de volgorde van executie wijzigt?
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
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Jan H. Kila">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aleph-Design: Levensverhaal Jan H. Kila</title>
<link rel="stylesheet" href="http://localhost:3000/assets/css/style.css">
<script type="text/javascript" src="http://localhost:3000/assets/js/myScript.js"></script>
</head>
<body>
<div class="nav-bar">
<div class="logo">
<img src="http://localhost:3000/assets/images/img/aleph-logo.png" alt="">
</div>
<a class="active" href="http://localhost:3000/home">Home</a>
<div class="drop-down">
<button class="drop-button">
<a class="" href="http://localhost:3000/story">Levensverhaal<span>?</span></a>
</button>
<div class="dropdown-content">
<a href=""> 0 tot 7 jaar</a>
<a href=""> 7 tot 14 jaar</a>
<a href="">14 tot 21 jaar</a>
<a href="">21 tot 28 jaar</a>
<a href="">28 tot 35 jaar</a>
<a href="">35 tot 42 jaar</a>
<a href="">42 tot 49 jaar</a>
<a href="">49 tot 56 jaar</a>
<a href="">56 tot 63 jaar</a>
<a href="">63 tot 70 jaar</a>
<a href="">70 tot 77 jaar</a>
<a href="">77 tot 84 jaar</a>
<a href="">84 tot 91 jaar</a>
<a href="">Alle Verhalen</a>
</div>
</div><!-- class dropdown -->
<a class="" href="http://localhost:3000/memory">Memory</a>
<div class="drop-down">
<button class="drop-button">
<a class="" href="http://localhost:3000/project">Projecten<span>?</span></a>
</button>
<div class="dropdown-content">
<a href="http://localhost:3000/printer">3D-Print</a>
<a href="http://localhost:3000/app/init-mvc.php">MVC-app</a>
<a href="http://localhost:3000/app/init-klok.php">Torenklok</a>
<a href="http://localhost:3000/app/init-cnc.php">CNC</a>
</div>
</div><!-- class dropdown -->
<a class="" href="http://localhost:3000/contact">Bericht</a>
</div><!-- class nav-bar -->
<div class="content-wrapper">
<h1></h1>
<div class="mail-wrapper">
<div class="mail-content">
<div class="mail-field">
<label>Uw e-mail adres:</label>
<input type="text" id="em13l">
</div>
<div class="text-field">
<label>Uw bericht:</label>
<textarea rows="5" cols="50" id="t3kst"></textarea>
</div>
<div class="submit-button">
<input type="submit" value="Versturen" onclick="postData()">
</div>
<div class="msg-field">
<!--<div id="status"></div>-->
<div id="response"></div>
</div>
</div>
</div>
</div><!-- content-wrapper -->
<div class="footer">
(C) Footer
</div>
</body></html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Jan H. Kila">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aleph-Design: Levensverhaal Jan H. Kila</title>
<link rel="stylesheet" href="http://localhost:3000/assets/css/style.css">
<script type="text/javascript" src="http://localhost:3000/assets/js/myScript.js"></script>
</head>
<body>
<div class="nav-bar">
<div class="logo">
<img src="http://localhost:3000/assets/images/img/aleph-logo.png" alt="">
</div>
<a class="active" href="http://localhost:3000/home">Home</a>
<div class="drop-down">
<button class="drop-button">
<a class="" href="http://localhost:3000/story">Levensverhaal<span>?</span></a>
</button>
<div class="dropdown-content">
<a href=""> 0 tot 7 jaar</a>
<a href=""> 7 tot 14 jaar</a>
<a href="">14 tot 21 jaar</a>
<a href="">21 tot 28 jaar</a>
<a href="">28 tot 35 jaar</a>
<a href="">35 tot 42 jaar</a>
<a href="">42 tot 49 jaar</a>
<a href="">49 tot 56 jaar</a>
<a href="">56 tot 63 jaar</a>
<a href="">63 tot 70 jaar</a>
<a href="">70 tot 77 jaar</a>
<a href="">77 tot 84 jaar</a>
<a href="">84 tot 91 jaar</a>
<a href="">Alle Verhalen</a>
</div>
</div><!-- class dropdown -->
<a class="" href="http://localhost:3000/memory">Memory</a>
<div class="drop-down">
<button class="drop-button">
<a class="" href="http://localhost:3000/project">Projecten<span>?</span></a>
</button>
<div class="dropdown-content">
<a href="http://localhost:3000/printer">3D-Print</a>
<a href="http://localhost:3000/app/init-mvc.php">MVC-app</a>
<a href="http://localhost:3000/app/init-klok.php">Torenklok</a>
<a href="http://localhost:3000/app/init-cnc.php">CNC</a>
</div>
</div><!-- class dropdown -->
<a class="" href="http://localhost:3000/contact">Bericht</a>
</div><!-- class nav-bar -->
<div class="content-wrapper">
<h1></h1>
<div class="mail-wrapper">
<div class="mail-content">
<div class="mail-field">
<label>Uw e-mail adres:</label>
<input type="text" id="em13l">
</div>
<div class="text-field">
<label>Uw bericht:</label>
<textarea rows="5" cols="50" id="t3kst"></textarea>
</div>
<div class="submit-button">
<input type="submit" value="Versturen" onclick="postData()">
</div>
<div class="msg-field">
<!--<div id="status"></div>-->
<div id="response"></div>
</div>
</div>
</div>
</div><!-- content-wrapper -->
<div class="footer">
(C) Footer
</div>
</body></html>
Ik zie geen vreemde dingen.
Jan Kila op 22/02/2020 16:37:01:
Ik zie geen vreemde dingen.
Er is zelfs geen doctype +2 andere fouten en 2 warnings volgens w3c
Frank Nietbelangrijk op 22/02/2020 17:14:46:
en je CSS ?
HTML ziet er inderdaad redelijk goed uit. Iets in je CSS met float, waardoor de ene <div> boven de andere komt?
De HTML is een kopie van de paginabron, de DOCTYPE vergeten mee te kopiëren.
Wat zijn de twee andere fouten? Zo weet ik nog niks.
De ene div boven de andere; ik zou het niet weten maar kijk er naar.
Quote:
Error: The element a must not appear as a descendant of the button element.
From line 22, column 7; to line 22, column 53
n">? <a class="" href="http://localhost:3000/story">Levens
From line 22, column 7; to line 22, column 53
n">? <a class="" href="http://localhost:3000/story">Levens
OK, dat maakt het helder.
Maar... aangezien dit in de header zit, het eerste stukje code, lijkt me dat geen oorzaak van m'n probleem.
Of zie ik dat verkeerd?
Wat als je je pagina eens laadt zonder je stylesheet? Staat dan wel alles (visueel) in de goede volgorde? Met deze strategie elimineer je in één keer het halve zoekgebied, zodat je sneller kunt inzoomen op het daadwerkelijke probleem.
Mogelijk is een van de "containers" te groot, zodat deze andere content uit de weg drukt ofzo. Ook via de developer tools (F12 functietoets) kun je mogelijk met de zogenaamde element inspector snel op (visueel) onderzoek uitgaan wat er precies aan de hand is?
Dank voor de suggesties, maar... die had ik al bedacht en dat bracht mij bij een tot dusver onverdacht stukje HTML/CSS.
De div met de class="content-wrapper' heb ik in eerste instantie geen hoogte gegeven. Die div blijkt erg weerbarstig om zijn hoogte aan te passen aan z'n inhoud. Iets wat ik wel van hem verwacht.
Ik heb het nu opgelost door een CSS regeltje toe te voegen:
height: calc(100vh - 110px);
Iedereen dank voor het meedenken.
Gewijzigd op 24/02/2020 11:27:12 door Jan Kila
Je zou bijvoorbeeld de footer op kunnen nemen in de voet van de wrapper door deze absoluut te positioneren ten opzichte van deze wrapper. Je hoeft dan enkel te zorgen dat de wrapper wat ruimte overlaat voor de footer en dat de wrapper zelf de maximale hoogte bestrijkt. Dit hangt verder niet af van de hoeveelheid andere content in deze wrapper.
Het bovenstaande, waarbij je de hoogte uitrekent, mag dan werken, maar misschien is dat een beetje een kunstgreep.
Quote:
maar misschien is dat een beetje een kunstgreep.
Dat is toch bijna alles in het leven.
Het is opgelost en ik vind het verder wel prima zo.