PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Onverwacht resultaat volgorde

Door Jan Kila op 22-02-2020 15:31
3.050 views
Dit is het resultaat van de huidige code: https://ibb.co/C6S0JH4
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:

<?php
/Class homeController extends mainController 
{
	public function index() 
	{
		require __SITE_PATH.'/views/header.php';

		require __SITE_PATH.'/views/home_index.php';

		require __SITE_PATH.'/views/footer.php';
	}
}	// Class indexControl
?>

Wat zie ik over het hoofd dat er voor zorgt dat de volgorde van executie wijzigt?
R
Rob Doemaarwat
22-02-2020 16:07
De volgorde zal wel goed zijn. Ik vermoed dat je HTML een beetje gammel is, waardoor de browser zelf een paar sluit-tags (bijvoorbeeld </div>) invoegt om de boel weer kloppend te maken. Kijk eens naar de broncode (Firefox laat zelfs al met rode tags zien waar het volgens hem mis gaat). Of plaats de resulterende HTML hier of zet een demo online.
J
Jan Kila
22-02-2020 16:37
Dit is de HTML zoals aangemaakt met voornoemde code.

<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="">&nbsp;0 tot &nbsp;7 jaar</a>
      <a href="">&nbsp;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 R
22-02-2020 18:53
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
R
Rob Doemaarwat
22-02-2020 19:47
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?
J
Jan Kila
22-02-2020 22:46
Geen float's in CSS, ik gebruik flexbox.
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.
J
Jan Kila
23-02-2020 13:45
@ SanThe
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

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?

Thomas van den Heuvel
23-02-2020 14:32
Als je de HTML-broncode van de geladen pagina bekijkt (Ctrl-U in je browser), en daar staat alles in de goede volgorde, dan zit er ofwel een fout in je HTML-syntax, of jouw CSS gaat schuiven met elementen.

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?
R
Rob Doemaarwat
23-02-2020 17:23
Plak je CSS er eens bij (of nog beter: zet een versie online - kunnen we live meekijken).

Reageren

Inloggen om te reageren