Op mijn pagina haal ik gegevens uit Mysql en geef deze weer binnen een Div element op de pagina. Tijdens het ophalen van de data komen er drie blokjes op een rij. Daarna komen de volgende Div blokje eronder. Ik heb dat gedaan met de volgende If else. $left = 100; $left= $left + 270; if ($left > 810) {$left = $left - 810; $top = $top + 390;} else {}
Dit werkt perfect.

Maar nu wil ik de pagina responsive maken en moeten alle blokjes onder elkaar komen te staan. Ik moet dus de If Else aanpassen, op zich makkelijk, maar nu de vraag: Hoe verander ik nu de variabelen als de pagina op bv een smartphone wordt getoond? Voorheen toen de website in HTML was werd automatisch de CSS aangepast, maar dat gaat nu niet meer. Ik hoop dat het een beetje duidelijk is, heeft iemand een oplossing?

De variabelen die ik net benoem zouden bijvoorbeeld in de plaats komen van 270 en 810.
Als je kijkt naar je HTML-code in je browser, dan zie je halverwege onder meer een
<!DOCTYPE html> staan.

Deze mag je maak een enkele keer gebruiken in je HTML-document, en uitsluitend bovenaan. Ook je <body> zie ik hier en daar voorbij komen, en dat klopt ook niet.
Ben je al bekend met de structuur van een HTML-document?

Verder is het ook onnodig om op regel 92 t/m 111 elke regel op een echo te zetten. Je kan deze HTML prima buiten je PHP-blok plaatsen, en dan enkel de variabelen echo'en:

<div id="bad"><img alt="<?=$bad2;?>" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon">&nbsp;<?=$bad2;?></p></div>


Maar, ik snap nog steeds niet hoe en waarom je PHP wilt toepassen om je blokken op de juiste plek te zetten. Dit kan prima met CSS, of met een genoemd grid-framework. PHP weet niks van browsers af, ook niet welke resoluties deze op het huidige moment zijn.
Ik zie wat je bedoelt met regel 92 t/m 111, dat ga ik veranderen, wordt het ook overzichtelijker door.

Het <body> issue komt door de included header en contactgegevens. In die bestanden staat ook de body, nooit over nagedacht dat dat waarschijnlijk niet nodig of zelfs niet gewenst is.

Hetzelfde geldt voor het DocType. Staat er om die reden drie keer in. Ik ga dat er wel uithalen, want dat is niet nodig, besef ik nu.

En als laatste, als je een oplossing weet om met CSS de blokken op de juiste plek te zetten, dan heel graag. Want nu weet ik even niet meer hoe ik verder moet. Ik moet volgens mij toch een loop gebruiken om alles uit de database te halen. Met CSS komen volgens mij dan alle blokken op de zelfde positie te staan, toch?

Met de opbouw van je site zou ik echt een CSS grid-framework aanraden, zoals Bootstrap. Verdiep je eens daarin.

Zie ook:
https://www.w3schools.com/bootstrap/default.asp

Ik zou dan meteen Bootstrap 4 gebruiken.

En als je bestanden includeert, zorg er altijd voor dat de HTML-structuur correct blijft. Je voegt immers iets toe aan je code uit een ander bestand. Het is niet hetzelfde als (i)frames waar je een pagina embed.

Reageren