Responsive in echo
Ik heb deze code in mijn php bestand staan:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
echo '<table cellspacing="0" background-color: "#fafafa" display:block; style="float:left; margin-right:4px;" width="33%";>
<tr bgcolor="#FFEBCC"><th>'.htmlspecialchars($row['naam']).'</th></tr>
<tr bgcolor="#FFF3E0"><th><br><A HREF="'.htmlspecialchars($row['link']).'"><img src="' .htmlspecialchars($row['img']). '"border=1; width=90%;></A></tr>
<tr background-color: "#fafafa" ><td colspan="3"></td></tr>
</table> ';
?>
echo '<table cellspacing="0" background-color: "#fafafa" display:block; style="float:left; margin-right:4px;" width="33%";>
<tr bgcolor="#FFEBCC"><th>'.htmlspecialchars($row['naam']).'</th></tr>
<tr bgcolor="#FFF3E0"><th><br><A HREF="'.htmlspecialchars($row['link']).'"><img src="' .htmlspecialchars($row['img']). '"border=1; width=90%;></A></tr>
<tr background-color: "#fafafa" ><td colspan="3"></td></tr>
</table> ';
?>
Maar nu is de width 33% in de echo maar op de telefoon moet de width 40% zijn. Hoe kan ik dit aanpassen? Ik krijg het maar niet voor elkaar en een CSS lijkt niet te werken in een echo.
Groetjes,
Dennis
- Gebruik een apart stijlblad met media queries
- Hexadecimale kleurcodes niet tussen quotes
Dit hele probleem hoort niet in PHP thuis, dit is een CSS aangelegenheid. Geef en de table (of een wrapper hieromheen) een class die responsive is (verschillende dingen doet afhankelijk van bepaalde schermgroottes).
Lappen (ongeldige, by the way) HTML echo'en is niet waar PHP voor bedoeld is.
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/stylepagina.css">
<link rel="stylesheet" href="/css/slideshow.css">
<link rel="stylesheet" href="/css/button.css">
<link rel="shortcut icon" type="image/png" href="../img/design/logo3.png"/>
<title>Digibord-tools</title>
</head>
<body>
<div id="maincontainer">
<div id="smallcolumn">
<center><a href="/index.php"><IMG SRC="../img/design/logo3.png" WIDTH="50%" ALT="Logo Meester Dennis" ></IMG> </a></center>
</div>
<div id="menucolumn">
<?php
include './style/menu.php'
?>
</div>
<div id="fullcolumn1">
<div id="blog">
<?
if (isset($_POST['zoeksoort'])) {
$zoeksoort1 = $_POST['zoeksoort'];
}else{
$zoeksoort1 = "0";
}
if (isset($_POST['zoekgroep'])) {
$zoekgroep1 = $_POST['zoekgroep'];
}else{
$zoekgroep1 = "0";
}
?>
<b>Zoek in de database:</b>
<form method="post">
<select name='zoeksoort' onchange='this.form.submit()'>
<option value="0" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "0")) ? 'selected' : '' ?>>Leeg</option>
<option value="1" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "1")) ? 'selected' : '' ?>>Applicaties</option>
<option value="2" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "2")) ? 'selected' : '' ?>>Tools</option>
<option value="3" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "3")) ? 'selected' : '' ?>>Time-timer</option>
</select>
<br>
<select name='zoekgroep' onchange='this.form.submit()'>
<option value="0" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "0")) ? 'selected' : '' ?>>Leeg</option>
<option value="12" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "12")) ? 'selected' : '' ?>>Groep 1 en 2</option>
<option value="34" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "34")) ? 'selected' : '' ?>>Groep 3 en 4</option>
<option value="56" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "56")) ? 'selected' : '' ?>>Groep 5 en 6</option>
<option value="78" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "78")) ? 'selected' : '' ?>>Groep 7 en 8</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>
</div>
<div id="blog1">
<IMG SRC="/img/design/buttondigi.png" ALIGN="right" ALT="Foto" WIDTH="15%" ></IMG>
<b>Digibord-tools</b> <br>
Gebruik de zoekfunctie om de juiste app of tool te vinden. De door mij ontwikkelde applicaties die ook op het digibord en de desktop gebruikt kunnen worden, zijn te vinden via het zoekmenu. <br>
</div>
</div>
<div id="fullcolumn1">
<?
//-- natuurlijk moet er eerst een connectie met de database worden gemaakt:
if (!@mysql_select_db("my_dennisvanduin", @mysql_connect("localhost", "dennisvanduin", "")))
{
echo "Er kan geen database connectie gemaakt worden.";
exit();
}
//-- $_POST['zoekterm'] is de naam van het zoekveld in het formulier wat we
//-- hebben gemaakt in het vorige 'hoofdstuk'. Dit is dus de SQL code:
if ($zoekgroep1 == "0" && $zoeksoort1 == "0")
{
$sql = "SELECT img, link, naam FROM `programmas`"; /* AND `vak` = '$vak1'"; */
}
else if ($zoekgroep1 != "0" && $zoeksoort1 == "0")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `groep` = '$zoekgroep1'"; /* AND `vak` = '$vak1'"; */
}
else if ($zoekgroep1 == "0" && $zoeksoort1 == "1")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1'"; /* AND `vak` = '$vak1'"; */
}
else if ($zoekgroep1 != "0" && $zoeksoort1 == "1")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1' AND `groep` = '$zoekgroep1'";
}
else if ($zoeksoort1 == "2")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1' ";
}
else if ($zoeksoort1 == "3")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1' ";
}
//-- voer de SQL code uit en zet dit in een variabele zodat we zometeen kunnen
//-- kijken of er een resultaat is
$res = mysql_query($sql);
//-- bekijk nu of er een resultaat is, of het zoekwoord dus gevonden is of niet
if (mysql_num_rows($res) >= 1)
{
//-- er is een resultaat gevonden, toon de resultaten via een while () loop
while ($row = mysql_fetch_array($res))
{
?>
<style>
.blank_row
{
height: 10px !important; /* Overwrite any previous rules */
background-color: #FFFFFF;
}
</style>
<?php
echo '<table cellspacing="0" background-color: "#fafafa" display:block; style="float:left; margin-right:4px;" width="33%";>
<tr bgcolor="#FFEBCC"><th>'.htmlspecialchars($row['naam']).'</th></tr>
<tr bgcolor="#FFF3E0"><th><br><A HREF="'.htmlspecialchars($row['link']).'"><img src="' .htmlspecialchars($row['img']). '"border=1; width=90%;></A></tr>
<tr background-color: "#fafafa" ><td colspan="3"></td></tr>
</table> ';
?>
<!-- And so on-->
<?php
}
?>
<?php
}
//-- als er geen resultaat is gevonden, dus als het zoekwoord niet gevonden is:
else
{
echo '<p>Er zijn geen applicaties of tools gevonden.';
}
?>
</div>
<?php
include './style/footer.php'
?>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/stylepagina.css">
<link rel="stylesheet" href="/css/slideshow.css">
<link rel="stylesheet" href="/css/button.css">
<link rel="shortcut icon" type="image/png" href="../img/design/logo3.png"/>
<title>Digibord-tools</title>
</head>
<body>
<div id="maincontainer">
<div id="smallcolumn">
<center><a href="/index.php"><IMG SRC="../img/design/logo3.png" WIDTH="50%" ALT="Logo Meester Dennis" ></IMG> </a></center>
</div>
<div id="menucolumn">
<?php
include './style/menu.php'
?>
</div>
<div id="fullcolumn1">
<div id="blog">
<?
if (isset($_POST['zoeksoort'])) {
$zoeksoort1 = $_POST['zoeksoort'];
}else{
$zoeksoort1 = "0";
}
if (isset($_POST['zoekgroep'])) {
$zoekgroep1 = $_POST['zoekgroep'];
}else{
$zoekgroep1 = "0";
}
?>
<b>Zoek in de database:</b>
<form method="post">
<select name='zoeksoort' onchange='this.form.submit()'>
<option value="0" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "0")) ? 'selected' : '' ?>>Leeg</option>
<option value="1" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "1")) ? 'selected' : '' ?>>Applicaties</option>
<option value="2" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "2")) ? 'selected' : '' ?>>Tools</option>
<option value="3" <?php echo ((isset($_POST['zoeksoort'])) && ($_POST['zoeksoort'] == "3")) ? 'selected' : '' ?>>Time-timer</option>
</select>
<br>
<select name='zoekgroep' onchange='this.form.submit()'>
<option value="0" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "0")) ? 'selected' : '' ?>>Leeg</option>
<option value="12" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "12")) ? 'selected' : '' ?>>Groep 1 en 2</option>
<option value="34" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "34")) ? 'selected' : '' ?>>Groep 3 en 4</option>
<option value="56" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "56")) ? 'selected' : '' ?>>Groep 5 en 6</option>
<option value="78" <?php echo ((isset($_POST['zoekgroep'])) and ($_POST['zoekgroep'] == "78")) ? 'selected' : '' ?>>Groep 7 en 8</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>
</div>
<div id="blog1">
<IMG SRC="/img/design/buttondigi.png" ALIGN="right" ALT="Foto" WIDTH="15%" ></IMG>
<b>Digibord-tools</b> <br>
Gebruik de zoekfunctie om de juiste app of tool te vinden. De door mij ontwikkelde applicaties die ook op het digibord en de desktop gebruikt kunnen worden, zijn te vinden via het zoekmenu. <br>
</div>
</div>
<div id="fullcolumn1">
<?
//-- natuurlijk moet er eerst een connectie met de database worden gemaakt:
if (!@mysql_select_db("my_dennisvanduin", @mysql_connect("localhost", "dennisvanduin", "")))
{
echo "Er kan geen database connectie gemaakt worden.";
exit();
}
//-- $_POST['zoekterm'] is de naam van het zoekveld in het formulier wat we
//-- hebben gemaakt in het vorige 'hoofdstuk'. Dit is dus de SQL code:
if ($zoekgroep1 == "0" && $zoeksoort1 == "0")
{
$sql = "SELECT img, link, naam FROM `programmas`"; /* AND `vak` = '$vak1'"; */
}
else if ($zoekgroep1 != "0" && $zoeksoort1 == "0")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `groep` = '$zoekgroep1'"; /* AND `vak` = '$vak1'"; */
}
else if ($zoekgroep1 == "0" && $zoeksoort1 == "1")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1'"; /* AND `vak` = '$vak1'"; */
}
else if ($zoekgroep1 != "0" && $zoeksoort1 == "1")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1' AND `groep` = '$zoekgroep1'";
}
else if ($zoeksoort1 == "2")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1' ";
}
else if ($zoeksoort1 == "3")
{
$sql = "SELECT img, link, naam FROM `programmas` WHERE `soort` = '$zoeksoort1' ";
}
//-- voer de SQL code uit en zet dit in een variabele zodat we zometeen kunnen
//-- kijken of er een resultaat is
$res = mysql_query($sql);
//-- bekijk nu of er een resultaat is, of het zoekwoord dus gevonden is of niet
if (mysql_num_rows($res) >= 1)
{
//-- er is een resultaat gevonden, toon de resultaten via een while () loop
while ($row = mysql_fetch_array($res))
{
?>
<style>
.blank_row
{
height: 10px !important; /* Overwrite any previous rules */
background-color: #FFFFFF;
}
</style>
<?php
echo '<table cellspacing="0" background-color: "#fafafa" display:block; style="float:left; margin-right:4px;" width="33%";>
<tr bgcolor="#FFEBCC"><th>'.htmlspecialchars($row['naam']).'</th></tr>
<tr bgcolor="#FFF3E0"><th><br><A HREF="'.htmlspecialchars($row['link']).'"><img src="' .htmlspecialchars($row['img']). '"border=1; width=90%;></A></tr>
<tr background-color: "#fafafa" ><td colspan="3"></td></tr>
</table> ';
?>
<!-- And so on-->
<?php
}
?>
<?php
}
//-- als er geen resultaat is gevonden, dus als het zoekwoord niet gevonden is:
else
{
echo '<p>Er zijn geen applicaties of tools gevonden.';
}
?>
</div>
<?php
include './style/footer.php'
?>
</div>
</body>
</html>
Misschien dat het nu iets duidelijker wordt? Want de column eromheen is wel responsive maar de vakjes die ingeladen worden, dus de ene keer 5 de andere keer 8 net welke zoek functie je gebruikt moeten daarbinnen responsive passen.
Verdeel en heers.
Is dit trouwens nieuwe code? Met mysql_-functies? Ayyy.
Niet
Code (php)
1
2
3
2
3
<?php
echo '<table cellspacing="0" background-color: "#fafafa" display:block; style="float:left; margin-right:4px;" width="33%";>
?>
echo '<table cellspacing="0" background-color: "#fafafa" display:block; style="float:left; margin-right:4px;" width="33%";>
?>
Wel
Code (php)
1
2
3
2
3
<?php
echo '<table cellspacing="0" style="background-color:#fafafa; display:block; float:left; margin-right:4px; width=33%;">
?>
echo '<table cellspacing="0" style="background-color:#fafafa; display:block; float:left; margin-right:4px; width=33%;">
?>