Comment utiliser le CSS pour mettre en forme les résultats de PHP echo?
Je suis entrain de créer un formulaire de recherche pour un emballage de base de données et j'ai utilisé du CSS pour mettre en forme le formulaire HTML qui appelle à la page PHP. Je veux être en mesure de style de tous les résultats de la page PHP en utilisant le même genre de que les styles CSS du formulaire de recherche, comme le PHP continue de résonner les résultats comme des éléments séparés, j'ai envie de tous les avoir à être affiché dans distinct, des petites boîtes. Est-ce aussi simple que je pense que c'est par exemple le entourant le PHP avec des balises? Comme je suis en train actuellement, mais il ne semble pas fonctionner.
<body>
<?php
$con = mysql_connect ("localhost", "root", "");
mysql_select_db ("delyn_db", $con);
if (!$con)
{
die ("Could not connect: " . mysql_error());
}
$descrip = mysql_real_escape_string($_POST['descrip']);
$depth = mysql_real_escape_string($_POST['depth']);
$varWidth = mysql_real_escape_string($_POST['traywidth']);
$varHeight= mysql_real_escape_string($_POST['trayheight']);
$varRange = mysql_real_escape_string($_POST['trayrange']);
$varType = mysql_real_escape_string($_POST['traytype']);
$varShape = mysql_real_escape_string($_POST['trayshape']);
$varImage = mysql_real_escape_string($_POST['imagename']);
if (isset($varHeight) && !empty($varHeight)) {
$low = ($varHeight."00");
$high = ($varHeight."99");
} else {
$low = ("000");
$high = ("999");
}
if (isset($varWidth) && !empty($varWidth)) {
$min = ($varWidth."00");
$max = ($varWidth."99");
} else {
$min = ("000");
$max = ("999");
}
$sql = "SELECT * FROM delyn WHERE
description LIKE '%".$descrip."%'
AND trayrange LIKE '%".$varRange."%'
AND traytype LIKE '%".$varType."%'
AND trayshape LIKE '%".$varShape."%'
AND traywidth BETWEEN '".$min."' AND '".$max."'
AND trayheight BETWEEN '".$low."' AND '".$high."' ";
?>
while ($row = mysql_fetch_array($r_query))
{
echo '<p class="results">';
echo '<br /><img src=" '. $row['imagename'] . '" width="120" length="50">';
echo '<br /><strong> Tool Code: </strong> '. $row['toolcode'];
echo '<br /><strong> Description: </strong> '. $row['description'];
echo '<br /><strong> Tray range: </strong> '. $row['trayrange'];
echo '<br /><strong> Tray type: </strong> '. $row['traytype'];
echo '<br /><strong> Tray size: </strong> '. $row['traysize'];
echo '<br /><strong> Tray shape: </strong> '. $row['trayshape'] . '<br />' . '<br />' . '</p>';;
}
if (mysql_num_rows($r_query) <= 0){
echo 'No results match your search, please try again';
}
?>
</body>
CSS (Pour le formulaire HTML, je veux les mêmes attributs pour la Forme balise div de travail pour les résultats):
@charset "UTF-8";
/* CSS Document */
body {
}
.results {
width: 190px;
padding: 10px;
background: #E8CF24;
overflow:auto;
display:block;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
Maintenant ÉDITÉ.
- Vous ne devriez pas utiliser mysql_* fonctions pour interagir avec les bases de données mysql, ils sont déconseillés, sauf le nom, ne sont pas vraiment plus maintenu et sont destinées à mysql version 4. Vous devez passer à mysqli ou PDO à la place.
- Je vais bare à l'esprit à l'avenir, merci 🙂
Vous devez vous connecter pour publier un commentaire.
Au lieu d'utiliser les sauts de l'utilisation des étiquettes de paragraphe.
Par exemple. Ensuite, vous pouvez affecter des classes de l'étiquette de paragraphe.
Donc, si vous voulez attribuer une classe pour chaque partie juste:
Ou dans un formulaire:
Si vous avez .entrée en CSS, vous pouvez juste avoir d'entrée plutôt que .d'entrée de cette façon, vous n'avez pas à affecter une classe à vos entrées, il sera automatiquement.
<p class="results"> <?php //whole code// ?> </p>
Puis utiliser les CSS individuellement style tout? Ensuite, utilisez les attributs<p class ="results"> <?php echo '<br /> <img src=" '. $row['imagename'] . '" width="120" length="50">'; ?> </p>
j'ai créé une nouvelle page css pour tester, et rien ne semble être en train de changer ou de travail.<p class="results"></p>
élément qui ne fonctionne pas. Est-il loin de les amener tous à travailler? si cela fonctionne, alors ils devraient tous être affichés dans une jolie petite boîte à bulles.