Hoe pagina responsive maken in PHP?
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.
Met gebruik van de juiste stijlen kan je prima de site zo responsive maken zoals je maar wilt.
Overigens snap ik niet hoe je PHP hiervoor wilt inzetten. Hiermee kan je geen browserformaten detecteren.
Gewijzigd op 14/08/2018 20:53:41 door - Ariën -
Maar het is veel netter om dit client-side te doen dmv CSS (en je HTML dus generiek op te zetten).
Gewijzigd op 14/08/2018 21:27:12 door Rob Doemaarwat
Quote:
Voorheen toen de website in HTML was werd automatisch de CSS aangepast, maar dat gaat nu niet meer.
PHP spuugt HTML uit, dus ja, dat gaat wel degelijk.
echo '<div id="webblock_sales" style="top: '. $top. 'px; left: '. $left. 'px;>';
Een grid-framework is echt wat je nodig hebt. Die schaalt precies tussen een aantal voorgedefinieerde breakpoints aan de hand van de resolutie van je browser. Het is zonde om dit zelf te berekenen en uit te stippelen. Tenzij je graag het wiel dan opnieuw ontwikkelt, maar dan niet geheel rond omdat het niet netjes is vanwege inline-css en plaatsbepalingen van je elementen,
Klopt dat, Peter?
@media only screen and (min-width: 320px) and (max-width:530px), only screen and (min-device-width: 320px) and (max-device-width:530px){
En dat is ook mijn probleem de positie van het Div Element kan ik daar prima regelen dmv een andere cascade style sheet. Maar nu ik de posities overruled heb dmv van de twee variabelen, zie boven. Gaat dat niet meer. Ik kan mij niet voorstellen dat ik de enige ben met dit probleem.
Toevoeging op 14/08/2018 22:58:10:
Arien, kijk even naar www.feelinghomecuracao.com. Als je zoekt op huizen in een bepaalde prijsklasse zie je de blokjes met informatie. Zoals het nu is, is alles met de hand ingevoerd, dus de positie van elk blokje is in CSS geregeld. Nu wil ik met Mysql gaan werken en moet alles uit de database komen en moeten die blokjes op een andere manier op het scherm komen. Ik zie nog even niet hoe. De andere suggesties moet ik nog opzoeken en uitproberen
Of deze uit een database komt, of uit een tekstbestand, of hardcoded in je PHP-bestand staat. In je HTML-document is het toch hetzelfde.
Opsich kan je ook prima met media-queries in CSS werken, zoals je al zegt. Het kan ook prima, maar het kost wel wat tijd om alles netjes te positioneren en uit te testen. Met een grid-framework kan je dit in de HTML al netjes regelen aan de hand van classes. Het is efficiënter, eenvoudiger en makkelijker onderhoudbaar.
Ik zou wel je HTML-structuur even controleren, want ik zie halverwege opeens een doctype voorbij komen. Die hoort daar uiteraard niet. Ook zou in in-line styles toch liever vermijden. Met de trapsgewijze (cascading stylesheets) structuur met betrekking tot het inladen van de CSS door je browser, kan dit soms voor rare effecten zorgen of voor lastig te debuggen problemen.
Gewijzigd op 14/08/2018 23:18:07 door - Ariën -
Ik weet ook niet hoe ik ipv met de While functie (while ($row = $result->fetch(PDO::FETCH_ASSOC)) { ) op een andere manier die blokken kan positioneren, als dat met behulp van CSS kan dan graag natuurlijk.
Het is duidelijk dat ik geen Php specialist ben, ben eigenlijk net een paar weken bezig, Loop steeds weer tegen een probleem aan, maar weet het altijd (met behulp van) weer op te lossen. Dit is echter zo een lastige dat k twijfel of ik wel op de goede weg ben met Php. Terwijl er zoveel voordelen zitten aan de database voor mijn website. Ik ga kijken of ik kan vinden wat je bedoelt met grid-framwork. Nederland zal nu wel slapen, hier nog niet, morgen hoop ik verder.
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
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
<!-- Webblock -->
<div id="webblock_row1_col1_sales">
<div id="webblockphoto" style="top: 13px; margin: 0 -115px;">
<a href="rentals/6/luxe_villa_bottelier_curacao_te_huur/luxe_villa_bottelier_curacao_te_huur.php" >
<img alt="" src="rentals/6/luxe_villa_bottelier_curacao_te_huur/slideshow/luxe_villa_bottelier_curacao_te_huur (1).jpg
" width="230" height="173" /></a>
<div id="webblocknieuw" style="top: 145px; margin: 0 -50px;"><p class="nieuw">Nieuw!</p></div>
<div id="text">
<p class="forsale">Te Huur: Naf 5000 p/m</p>
<p class="headerindex22">Villa op Bottelier</p>
<p class="locatieindex22">Bottelier</p>
<p class="descriptionindex22">Luxe Villa met Prive Zwembad in Bottelier te Huur. Bottelier is zeer centraal gelegen tussen Jan...</p>
<div id="all_icon">
<div id="pool"><img alt="" src="fotos_basic/pool.jpg" title="Zwembad"/></div>
<div id="oppervlakte"><p class="icon">Woonopp: --- m2</p></div>
<div id="bed"><img alt="" src="fotos_basic/bed.jpg" title="Slaapkamers" style="float:left;"/><p class="icon"> 6</p></div>
<div id="bad"><img alt="" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon"> 4</p></div>
</div></div>
</div>
</div>
<!-- Einde Webblock-->
<div id="webblock_row1_col2_sales">
<!-- Webblock Advertentie-->
<div id="webblockphoto" style="top: 13px; margin: 0 -115px;"><img alt="" src="fotos_basic/feeling_home_curacao_gratis_adverteren2.jpg" width="230" height="173" />
<div id="text">
<p class="forsale">Feeling Home Curaçao</p>
<p class="headerindex22">Gratis Adverteren</p>
<p class="locatieindex22"> </p>
<p class="descriptionindex22">U wilt uw woning op Curaçao verhuren? Bij ons kunt u gratis adverteren. Neem contact met ons op!</p>
<p class="moreinfo">
<a class="speciaal" href="http://www.feelinghomecuracao.com/feeling_home_curacao_contact.php">Meer informatie</a></p>
</div>
</div>
<!-- Einde Webblock Advertentie-->
</div>
[size=xsmall][i]Toevoeging op 14/08/2018 23:40:05:[/i][/size]
Ps, hier de code zoals ik het doe met php en mysql. Is nog in een testfase en staat niet online.
<?php
$top = 200;
$left = 0;
$dagen_verschil_nieuw = 5;
$selectie_string = "SELECT f.id, f.invoerdatum, f.soort, f.koop, f.prijs, f.object, l.wijken, f.webblocks_index, f.tekst, f.opp_object, f.opp_kavel, f.slaapkamers, f.badkamers, f.object_nummer, f.zwembad FROM tabel_feeling f, tabel_locatie l
WHERE f.webblocks_index = 1 AND (f.locatie = l.nummer)";
$db = new PDO('mysql:host=localhost;dbname=feeling_home', 'root', '');
$query = $selectie_string;
$result = $db->query($query);
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
switch ($row["koop"]) { case "1": $koop2 = "Koop"; break; case "2": $koop2 = "Huur"; break;}
switch ($row["zwembad"]) { case "1": $zwem2 = "zwem.jpg"; break; case "2": $zwem2 = "leeg.jpg"; break; case "2": $zwem2 = "zwem.jpg"; break; case "0": $zwem2 = "leeg.jpg"; break;}
switch ($row["koop"]) { case "1": $kk2 = " kk"; break; case "2": $kk2 = " p/m"; break;}
if ($row["slaapkamers"] == 0) {$slaap2 = "";} else {$slaap2 = $row["slaapkamers"] ;}
if ($row["badkamers"] == 0) {$bad2 = "";} else {$bad2 = $row["badkamers"] ;}
if ($row["soort"] == 3) {$opp2 = $row["opp_kavel"]; $woon2 = "Perceel-";} else {$opp2 = $row["opp_object"]; $woon2 = "Woon-"; }
$a = $row["id"];
//echo $row["invoerdatum"]. '<br/>';
$nu = strtotime("now");
$invoer = strtotime($row["invoerdatum"]);
echo round(($nu - $invoer)/86400, 0) . '<br/>';
$r= round(($nu - $invoer)/86400, 0);
if ( $r > $dagen_verschil_nieuw){$nieuw2 = ""; $webblock2 = "";} else {$nieuw2 = "Nieuw!"; $webblock2 = "webblocknieuw";}
echo '<div id="webblock_row1_col1_sales" style="top: '. $top. 'px; left: '. $left. 'px;>';
echo '<div id="webblock_row1_col1_sales"> ';
echo '<div id="webblockphoto" style="top: 13px; margin: 0 -115px;">';
echo '<a href="object_feeling_7.php?object_id='.$a.'" > ';
echo '<img alt="" src="fotos/' .$row["object_nummer"]. '/1.jpg';
echo '" width="230" height="173" /></a> ';
echo '<div id="'. $webblock2 . '" style="top: 145px; margin: 0 -50px;"><p class="nieuw">'. $nieuw2 . '</p></div>';
echo '<div id="text"> ';
echo '<p class="forsale">Te '. $koop2 . ': Naf ' . number_format($row["prijs"],0,",",".") .''. $kk2. '</p>';
echo '<p class="headerindex22">'. $row["object"]. '</p> ';
echo '<p class="locatieindex22">'. $row["wijken"]. '</p>';
echo '<p class="descriptionindex22">'. $row["tekst"]. '</p>';
echo '<div id="all_icon">';
echo '<div id="pool"><img alt="" src="fotos_basic/'. $zwem2 . '" title="Zwembad"/></div>';
echo '<div id="oppervlakte"><p class="icon">'. $woon2 . 'opp: '. $opp2 . ' m2</p></div>';
echo '<div id="bed"><img alt="" src="fotos_basic/bed.jpg" title="Slaapkamers" style="float:left;"/><p class="icon"> ' . $slaap2 . '</p></div>';
echo '<div id="bad"><img alt="" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon"> ' . $bad2 . '</p></div>';
echo '</div></div> ';
echo '</div> ';
echo '</div>';
$left= $left + 270;
if ($left > 710) {$left = $left - 810; $top = $top + 390;} else {}
}
?>
<div id="webblock_row1_col1_sales">
<div id="webblockphoto" style="top: 13px; margin: 0 -115px;">
<a href="rentals/6/luxe_villa_bottelier_curacao_te_huur/luxe_villa_bottelier_curacao_te_huur.php" >
<img alt="" src="rentals/6/luxe_villa_bottelier_curacao_te_huur/slideshow/luxe_villa_bottelier_curacao_te_huur (1).jpg
" width="230" height="173" /></a>
<div id="webblocknieuw" style="top: 145px; margin: 0 -50px;"><p class="nieuw">Nieuw!</p></div>
<div id="text">
<p class="forsale">Te Huur: Naf 5000 p/m</p>
<p class="headerindex22">Villa op Bottelier</p>
<p class="locatieindex22">Bottelier</p>
<p class="descriptionindex22">Luxe Villa met Prive Zwembad in Bottelier te Huur. Bottelier is zeer centraal gelegen tussen Jan...</p>
<div id="all_icon">
<div id="pool"><img alt="" src="fotos_basic/pool.jpg" title="Zwembad"/></div>
<div id="oppervlakte"><p class="icon">Woonopp: --- m2</p></div>
<div id="bed"><img alt="" src="fotos_basic/bed.jpg" title="Slaapkamers" style="float:left;"/><p class="icon"> 6</p></div>
<div id="bad"><img alt="" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon"> 4</p></div>
</div></div>
</div>
</div>
<!-- Einde Webblock-->
<div id="webblock_row1_col2_sales">
<!-- Webblock Advertentie-->
<div id="webblockphoto" style="top: 13px; margin: 0 -115px;"><img alt="" src="fotos_basic/feeling_home_curacao_gratis_adverteren2.jpg" width="230" height="173" />
<div id="text">
<p class="forsale">Feeling Home Curaçao</p>
<p class="headerindex22">Gratis Adverteren</p>
<p class="locatieindex22"> </p>
<p class="descriptionindex22">U wilt uw woning op Curaçao verhuren? Bij ons kunt u gratis adverteren. Neem contact met ons op!</p>
<p class="moreinfo">
<a class="speciaal" href="http://www.feelinghomecuracao.com/feeling_home_curacao_contact.php">Meer informatie</a></p>
</div>
</div>
<!-- Einde Webblock Advertentie-->
</div>
[size=xsmall][i]Toevoeging op 14/08/2018 23:40:05:[/i][/size]
Ps, hier de code zoals ik het doe met php en mysql. Is nog in een testfase en staat niet online.
<?php
$top = 200;
$left = 0;
$dagen_verschil_nieuw = 5;
$selectie_string = "SELECT f.id, f.invoerdatum, f.soort, f.koop, f.prijs, f.object, l.wijken, f.webblocks_index, f.tekst, f.opp_object, f.opp_kavel, f.slaapkamers, f.badkamers, f.object_nummer, f.zwembad FROM tabel_feeling f, tabel_locatie l
WHERE f.webblocks_index = 1 AND (f.locatie = l.nummer)";
$db = new PDO('mysql:host=localhost;dbname=feeling_home', 'root', '');
$query = $selectie_string;
$result = $db->query($query);
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
switch ($row["koop"]) { case "1": $koop2 = "Koop"; break; case "2": $koop2 = "Huur"; break;}
switch ($row["zwembad"]) { case "1": $zwem2 = "zwem.jpg"; break; case "2": $zwem2 = "leeg.jpg"; break; case "2": $zwem2 = "zwem.jpg"; break; case "0": $zwem2 = "leeg.jpg"; break;}
switch ($row["koop"]) { case "1": $kk2 = " kk"; break; case "2": $kk2 = " p/m"; break;}
if ($row["slaapkamers"] == 0) {$slaap2 = "";} else {$slaap2 = $row["slaapkamers"] ;}
if ($row["badkamers"] == 0) {$bad2 = "";} else {$bad2 = $row["badkamers"] ;}
if ($row["soort"] == 3) {$opp2 = $row["opp_kavel"]; $woon2 = "Perceel-";} else {$opp2 = $row["opp_object"]; $woon2 = "Woon-"; }
$a = $row["id"];
//echo $row["invoerdatum"]. '<br/>';
$nu = strtotime("now");
$invoer = strtotime($row["invoerdatum"]);
echo round(($nu - $invoer)/86400, 0) . '<br/>';
$r= round(($nu - $invoer)/86400, 0);
if ( $r > $dagen_verschil_nieuw){$nieuw2 = ""; $webblock2 = "";} else {$nieuw2 = "Nieuw!"; $webblock2 = "webblocknieuw";}
echo '<div id="webblock_row1_col1_sales" style="top: '. $top. 'px; left: '. $left. 'px;>';
echo '<div id="webblock_row1_col1_sales"> ';
echo '<div id="webblockphoto" style="top: 13px; margin: 0 -115px;">';
echo '<a href="object_feeling_7.php?object_id='.$a.'" > ';
echo '<img alt="" src="fotos/' .$row["object_nummer"]. '/1.jpg';
echo '" width="230" height="173" /></a> ';
echo '<div id="'. $webblock2 . '" style="top: 145px; margin: 0 -50px;"><p class="nieuw">'. $nieuw2 . '</p></div>';
echo '<div id="text"> ';
echo '<p class="forsale">Te '. $koop2 . ': Naf ' . number_format($row["prijs"],0,",",".") .''. $kk2. '</p>';
echo '<p class="headerindex22">'. $row["object"]. '</p> ';
echo '<p class="locatieindex22">'. $row["wijken"]. '</p>';
echo '<p class="descriptionindex22">'. $row["tekst"]. '</p>';
echo '<div id="all_icon">';
echo '<div id="pool"><img alt="" src="fotos_basic/'. $zwem2 . '" title="Zwembad"/></div>';
echo '<div id="oppervlakte"><p class="icon">'. $woon2 . 'opp: '. $opp2 . ' m2</p></div>';
echo '<div id="bed"><img alt="" src="fotos_basic/bed.jpg" title="Slaapkamers" style="float:left;"/><p class="icon"> ' . $slaap2 . '</p></div>';
echo '<div id="bad"><img alt="" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon"> ' . $bad2 . '</p></div>';
echo '</div></div> ';
echo '</div> ';
echo '</div>';
$left= $left + 270;
if ($left > 710) {$left = $left - 810; $top = $top + 390;} else {}
}
?>
Edit:
Ik heb code-tags geplaatst. Gelieve dit in het vervolg zelf toe te voegen aan je bericht.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Gewijzigd op 14/08/2018 23:58:52 door - Ariën -
<!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:
Code (php)
1
<div id="bad"><img alt="<?=$bad2;?>" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon"> <?=$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.
Gewijzigd op 15/08/2018 00:06:13 door - Ariën -
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?
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.
Gewijzigd op 15/08/2018 09:09:03 door - Ariën -