Région répétée + Div + Colonnes

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Région répétée + Div + Colonnes

Salut Ajoloca et toute la communauté

par Neomcdn » 26 janv. 2007, 15:48

Nous avons essayé de suivre tes conseils; et visiblement on a pas fait les choses dans les règles, puisqu'on obtient 6 cellules en tout, à savoir 2 colonnes et 3 lignes. Etrange!!! (pour les colonnes c'est ok, mais pour les lignes,... on ne comprend pas bien).

Notre code se compose de ça, avant le HTML:

Code : Tout sélectionner

<?php $currentPage = $_SERVER["PHP_SELF"]; ?> <?php require_once('connections/free.php'); ?> <?php $maxRows_rs_camping = 4; $pageNum_rs_camping = 0; if (isset($_GET['pageNum_rs_camping'])) { $pageNum_rs_camping = $_GET['pageNum_rs_camping']; } $startRow_rs_camping = $pageNum_rs_camping * $maxRows_rs_camping; mysql_select_db($database_conn_develop, $conn_develop); $query_rs_camping = "SELECT * FROM tbl_camping ORDER BY rand()"; $query_limit_rs_camping = sprintf("%s LIMIT %d, %d", $query_rs_camping, $startRow_rs_camping, $maxRows_rs_camping); $rs_camping = mysql_query($query_limit_rs_camping, $conn_develop) or die(mysql_error()); $row_rs_camping = mysql_fetch_assoc($rs_camping); if (isset($_GET['totalRows_rs_camping'])) { $totalRows_rs_camping = $_GET['totalRows_rs_camping']; } else { $all_rs_camping = mysql_query($query_rs_camping); $totalRows_rs_camping = mysql_num_rows($all_rs_camping); } $totalPages_rs_camping = ceil($totalRows_rs_camping/$maxRows_rs_camping)-1; $queryString_rs_camping = ""; if (!empty($_SERVER['QUERY_STRING'])) { $params = explode("&", $_SERVER['QUERY_STRING']); $newParams = array(); foreach ($params as $param) { if (stristr($param, "pageNum_rs_camping") == false && stristr($param, "totalRows_rs_camping") == false) { array_push($newParams, $param); } } if (count($newParams) != 0) { $queryString_rs_camping = "&" . htmlentities(implode("&", $newParams)); } } $queryString_rs_camping = sprintf("&totalRows_rs_camping=%d%s", $totalRows_rs_camping, $queryString_rs_camping); ?>
et de ça dans la balise <body>:

Code : Tout sélectionner

// on crée la table avant le début de la boucle <table> <?php while ($row_rs_camping = mysql_fetch_assoc($rs_camping)) { ?> <tr> <!-- Création d'une ligne --> <td> <!-- Création d'une cellule, celle de gauche --> <!-- Contenu de la cellule gauche --> <img class="photo" src="<?php echo $row_rs_camping['urlphoto4_camping']; ?>" alt="<?php echo $row_rs_camping['altphoto1_camping']; ?>" /> <span class="texte"><h1><?php echo $row_rs_camping['nom_camping']; ?></h1> <p><?php echo $row_rs_camping['cp_camping']; ?> <?php echo $row_rs_camping['ville_camping']; ?></p> <p><?php echo $row_rs_camping['dateouverture_camping']; ?></p> <p><?php echo '<img src="Images/etoile'.$row_rs_camping['nbetoiles_camping'].'.gif" alt="Camping '.$row_rs_camping['nbetoiles_camping'].' étoiles"></img>'; ?></p></span> <a href="http://develop.web.free.fr/template_generic2.php?num_camping=<?php echo $row_rs_camping['num_camping']; ?>">Fiche complète</a> </td> <td> <!-- Création d'une cellule, celle de droite--> <!-- Contenu de la cellule gauche --> <img class="photo" src="<?php echo $row_rs_camping['urlphoto4_camping']; ?>" alt="<?php echo $row_rs_camping['altphoto1_camping']; ?>" /> <span class="texte"><h1><?php echo $row_rs_camping['nom_camping']; ?></h1> <p><?php echo $row_rs_camping['cp_camping']; ?> <?php echo $row_rs_camping['ville_camping']; ?></p> <p><?php echo $row_rs_camping['dateouverture_camping']; ?></p> <p><?php echo '<img src="Images/etoile'.$row_rs_camping['nbetoiles_camping'].'.gif" alt="Camping '.$row_rs_camping['nbetoiles_camping'].' étoiles"></img>'; ?></p></span> <a href="http://develop.web.free.fr/template_generic2.php?num_camping=<?php echo $row_rs_camping['num_camping']; ?>">Fiche complète</a> </td> </tr> <?php } // Fin de la boucle ?> <!-- Fermeture de la table --> </table>
Merci pour ton aide Ajoloca: c'est super agréable d'avoir un soutien comme le tien.

par Ajoloca » 26 janv. 2007, 14:07

Bonjour,

Avec la structure que tu as actuellement, tu tombes dans ce que qui est reproché à l'élément (balise) table, avec raison.

Tu t'en sers pour faire de la présentation et non pas pour structurer tes données.

Actuellement tu crées une table par élément, tu dois avoir une seule table pour tous les éléments et un élément par cellule (<td>).

La présentation tu dois la faire avec du CSS (de préférence un fichier séparé) mais pour commencer tu peux le faire dans le même.

Pour commencer (on ne s'occupe pas de la présentation):
Un élément "table" qui contiendra donc tes 8 lignes (<tr>).
Chaque ligne contiendra 2 cellules (<td>)
Là tu as ta structure.

Ensuite on remarque, dans chaque cellule, une image à gauche et du texte à droite, ça c'est de la présentation, c'est CSS qui doit s'en charger.

Pour la boucle,
Actuellement tu as
do {
   // Tes instructions
} while (condition)
Le problème c'est si tu n'as pas de données, car tu exécutes au mois une fois la boucle.
La structure qui te conviens c'est un While
while (condition) {
   // Tes instructions
}
Pour résumer, ta structure
// on crée la table avant le début de la boucle
<table>
<?php while ($row_rs_camping = mysql_fetch_assoc($rs_camping)) { ?>
   <tr> <!-- Création d'une ligne -->
      <td> <!-- Création d'une cellule, celle de gauche  -->
         <!-- Contenu de la cellule gauche -->
         <img class="un_nom_de_class_CSS" .... /> 
         <span class="un_nom_de_class_CSS_différent">Ici je mets mon texte</span>
         <a ......>mon lien </a>
      </td>
      <td> <!-- Création d'une cellule, celle de droite-->
         <!-- Contenu de la cellule gauche -->
         <img class="un_nom_de_class_CSS" .... /> 
         <span class="un_nom_de_class_CSS_différent">Ici je mets mon texte</span>
         <a ......>mon lien </a>
      </td>
   </tr>
<?php } // Fin de la boucle ?>
<!-- Fermeture de la table -->
</table>
Construis déjà la structure, on s'occupe après de la présentation.

EDIT :

J'ai posté sans avoir vu ton dernier message.

Salut!

par Neomcdn » 26 janv. 2007, 13:42

Ok! C'est réussi. Ce n'est peut-être pas conventionnel, mais ça fonctionne et c'est valide par W3C!

C'est de nommer le tableau avec l'attribut class et utiliser un float:left.

Voir le code:

Code : Tout sélectionner

<?php do { ?> <table class="tableau" height="110px" width="461px" border="0" cellspacing="0" cellpadding="0" background="vignette_annuaire.gif"> <tr> <td class="photo" rowspan="4" height="97px" width="140px" ><img src="<?php echo $row_rs_camping['urlphoto4_camping']; ?>" alt="<?php echo $row_rs_camping['altphoto1_camping']; ?>"/></td> <td class="nom" colspan="2" width="315px" height="30px"><?php echo $row_rs_camping['nom_camping']; ?></td> </tr> <tr> <td width="315px" height="24px" colspan="2"><span class="Style1"><?php echo $row_rs_camping['cp_camping']; ?> <?php echo $row_rs_camping['ville_camping']; ?></span></td> </tr> <tr> <td colspan="2" width="315px" height="18px" valign="top"><span class="Style1"><?php echo $row_rs_camping['dateouverture_camping']; ?></span></td> </tr> <tr> <td width="150px" height="25px" valign="top"><span class="Style1"><?php echo '<img src="Images/etoile'.$row_rs_camping['nbetoiles_camping'].'.gif" alt="Camping '.$row_rs_camping['nbetoiles_camping'].' étoiles"></img>'; ?></span></td> <td width="165px" height="25px" valign="top"><a href="http://develop.web.free.fr/template_generic2.php?num_camping=<?php echo $row_rs_camping['num_camping']; ?>"><span class="Style1"> Fiche complète</span></a></td> </tr> </table> <?php } while ($row_rs_camping = mysql_fetch_assoc($rs_camping)); ?>

Pour le do, par contre, pas d'idée...
Et on a toujours un problème pour la méthode aléatoire qui charge de nouveaux enregistrements à chaque actualisation de la page: mais ceci est autre histoire...

Help! I need somebody! Help!

par Neomcdn » 26 janv. 2007, 12:37

Bonjour à tous!

je reviens vers vous après avoir fait une présentation sans div , mais avec un tableau: 2 colonnes et 4 lignes.

La boucle fonctionne et recopie bien les tableaux sur 8 lignes par pages, même si j'ai utilisé do et while (je n'ai pas compris pour utiliser le while simple). Mais pour ce qui est de la recopie sur des colonnes; je n'ai trouvé aucun tuto clair pour m"expliquer le fonctionnement.

Mon code est le suivant:

Code : Tout sélectionner

<div id="contenu"> <?php do { ?> <table height="110px" width="461px" border="0" cellspacing="0" cellpadding="0" background="vignette_annuaire.gif"> <tr> <td class="photo" rowspan="4" height="97px" width="140px" ><img src="<?php echo $row_rs_camping['urlphoto4_camping']; ?>" alt="<?php echo $row_rs_camping['altphoto1_camping']; ?>"/></td> <td class="nom" colspan="2" width="315px" height="30px"><?php echo $row_rs_camping['nom_camping']; ?></td> </tr> <tr> <td width="315px" height="24px" colspan="2"><span class="Style1"><?php echo $row_rs_camping['cp_camping']; ?> <?php echo $row_rs_camping['ville_camping']; ?></span></td> </tr> <tr> <td colspan="2" width="315px" height="18px" valign="top"><span class="Style1"><?php echo $row_rs_camping['dateouverture_camping']; ?></span></td> </tr> <tr> <td width="150px" height="25px" valign="top"><span class="Style1"><?php echo '<img src="Images/etoile'.$row_rs_camping['nbetoiles_camping'].'.gif" alt="Camping '.$row_rs_camping['nbetoiles_camping'].' étoiles"></img>'; ?></span></td> <td width="165px" height="25px" valign="top"><a href="http://develop.web.free.fr/template_generic2.php?num_camping=<?php echo $row_rs_camping['num_camping']; ?>"><span class="Style1"> Fiche complète</span></a></td> </tr> </table> <?php } while ($row_rs_camping = mysql_fetch_assoc($rs_camping)); ?> </div>
Un peu d'aide ne serait pas de refus!

La nouvelle page est disponible ici:

http://develop.web.free.fr/template_generic4.php

Merci pour votre soutien!

Je dis ça, je dis rien

par Neomcdn » 25 janv. 2007, 18:31

Le cynisme ne me gêne pas.

je ne me priverai pas si un jour je suis calé en PHP.

Bien vu pour le validator: 29 erreurs!!! ça frise le record!

On cherche deux bons programmeurs payés pas chers du tout, ça vous intéresse??? Lol!

Bon, on va s'attacher à travailler sur les tables avec vos conseils: nous reviendrons vers vous quand ce sera en meilleure voie!

@+ et merci beaucoup

PS: continuez à être cyniques, c'était drôle
PS2: "Rire de soi, c'est rire de tout" Mathieu Chedid

par Ryle » 25 janv. 2007, 18:31

Tout à fait ! :)
M'enfin on voit bien que le tient il est pas arrivé deuxième :x

;) :langue:

par Ajoloca » 25 janv. 2007, 18:27

Re,
@Ryle,

Au contraire, ça ne fais que confirmer. Donc tant mieux que les deux postes se suivent sans importance de l'ordre dans lequel ils se trouvent..

par Ryle » 25 janv. 2007, 18:23

C'était pas du tout envers toi le cynisme, c'est juste que j'aime bien en remettre une couche de temps en temps :) (un peu comme pour ceux qui pensent qu'ajax est une nouvelle solution miracle à tous leurs problèmes et veulent en mettre partout ;))

Pour ton tableau, les colonnes se construisent automatiquement en fonction du nombre de cellule (<td>) que tu vas utiliser par ligne (à toi de t'assurer que tu as le même nombre de colonne sur chaque ligne ;)) :

Code : Tout sélectionner

<table> <tr> <td>Colonne 1</td> <td>Colonne 2</td> </tr> ... </table>
Si tu mets la main sur l'un des topic de galerie d'image ou de tableau à N colonnes, tu trouveras une solution pour gérer automatiquement la création de nouvelles lignes tous les N (pour toi 2) enregistrements :)

A noter un truc pas terrible dans dreamweaver, l'usage d'un do/while au lieu d'un while simple. Si jamais il n'y a pas d'enregistrement trouvé, tu va quand même avoir un div non renseigné au lieu d'une page vide..


(pfff... grillé par Ajoloca... tant pis, c'est tapé :))

par Ajoloca » 25 janv. 2007, 18:15

Re,

Tu verras pour les attributs de <table>, mais le reste c'est vraiment pas sorcier.

Code : Tout sélectionner

<table> <?php do { ?> <tr id="cadrechoix"> <td id="photocadrechoix"> <img src="<?php echo $row_rs_camping['urlphoto4_camping']; ?>" alt="<?php echo $row_rs_camping['altphoto1_camping']; ?>"/> </td> <td id="textecadrechoix"> <h1><?php echo $row_rs_camping['nom_camping']; ?></h1> <p><?php echo $row_rs_camping['cp_camping']; ?> <?php echo $row_rs_camping['ville_camping']; ?></p> <p><?php echo $row_rs_camping['dateouverture_camping']; ?></p> <p><?php echo '<img src="Images/etoile'.$row_rs_camping['nbetoiles_camping'].'.gif" alt="Camping '.$row_rs_camping['nbetoiles_camping'].' étoiles"></img>'; ?></p> <a href="http://develop.web.free.fr/template_generic2.php?num_camping=<?php echo $row_rs_camping['num_camping']; ?>">Fiche complète</a> </td> </tr> <?php } while ($row_rs_camping = mysql_fetch_assoc($rs_camping)); ?> </table>
EDIT :
Je n'avais pas regardé le code, mais tu dois avoir des soucis si tu tentes de la faire valider par le "W3C Validator".
Tu mets un même id (plusieurs fois) dans une boucle. Par définition un id est unique dans le document.

par Neomcdn » 25 janv. 2007, 18:09

Salut!

Code : Tout sélectionner

<?php do { ?> <div id="cadrechoix"> <div id="photocadrechoix"> <img src="<?php echo $row_rs_camping['urlphoto4_camping']; ?>" alt="<?php echo $row_rs_camping['altphoto1_camping']; ?>"/> </div> <div id="textecadrechoix"> <h1><?php echo $row_rs_camping['nom_camping']; ?></h1> <p><?php echo $row_rs_camping['cp_camping']; ?> <?php echo $row_rs_camping['ville_camping']; ?></p> <p><?php echo $row_rs_camping['dateouverture_camping']; ?></p> <p><?php echo '<img src="Images/etoile'.$row_rs_camping['nbetoiles_camping'].'.gif" alt="Camping '.$row_rs_camping['nbetoiles_camping'].' étoiles"></img>'; ?></p> <a href="http://develop.web.free.fr/template_generic2.php?num_camping=<?php echo $row_rs_camping['num_camping']; ?>">Fiche complète</a> </div> </div> <?php } while ($row_rs_camping = mysql_fetch_assoc($rs_camping)); ?>
Région répétée = c'est du dreamweaver pour dire que php recopie les enregistrements jusqu'à ce qu'il n'en trouve pas. une boucle non?

Comment on recopie une table sur deux colonnes, car pour la ligne c'est ok??

merci par avance!

par Ajoloca » 25 janv. 2007, 18:00

Re,

Je ne sais pas ce que tu appelles "région répétée" mais la structure d'une table est simple
<table attributs> => Marque le début de la table
<tr attr> ==> Marque le début d'une ligne
<td attr> ==> Marque le début d'une colonne dans la ligne qui précède
</td> ==> Marque la fin de la colonne précédemment ouverte
<td attr> ==> ouvre une nouvelle colonne dans cette même ligne
</td>
</tr> ==> ferme la ligne
<tr attr> ==> Marque le début d'une nouvelle ligne dans cette table
.....
</table> ==> marque la fin de la table

hé hé hé!

par Neomcdn » 25 janv. 2007, 17:49

Hey!!

Je te trouve un peu cynique Ryle: lol! nous on fait comme on peut. Si on trouve à faire mieux, on le fait. C'est pas facile quand on est nioub et que l'on entend deux sons de cloches qui s'opposent: ou alors, c'est notre imagination; tu diras peut-être interprétation!!!

Enfin bref, si tu as une meilleure solution et que l'on trouve comment faire avec <table> + région répétée + sur deux colonnes, nous on fait et avec des belles balises <H1> maigres, des super <strong> et tout et tout...

par Ryle » 25 janv. 2007, 17:17

Si on se base sur ce principe, on va supprimer toutes les balises le type "block" et les remplacer par des div. Ça serait pas mal, non ??? :roll:
Ouuuééééé !! je vote pour !! place aux div et non aux autres balises !! :)

Plus de <p>, un div !! Plus de <h1>, un div grand et gras !! Plus de <hr>, un div plat avec des bordures !! Plus de <span> que des div inline !! Plus d'italique, que des div inline obliques !! Plus de liens, que des <div onClick=""> !!

On va faire la révolution !! ;)

@Neomcdn : Les tags de type "block" par opposition aux tags de type "inline" sont ceux qui provoquent une rupture (et forme un bloc, marqué par un retour à la ligne forcé avant l'élément suivant) par opposition à ceux qui se glissent dans le texte.
Ainsi, on retrouvera comme éléments de type block les paragraphes <p></p>, les titres <h1></h1>, les div, les formulaires, les tableaux, ...
Et de type inline, les gras <b></b>, les spans, etc.
Cette propriété pouvant être modifiée grace à l'attribut display des feuilles de style (ce qui permet par exemple de mettre une liste de puces horizontale au lieu de verticale)

EUH!!

par Neomcdn » 25 janv. 2007, 10:19

Salut Ajoloca!

Nous avons choisi les div parceque cela fonctionne et que je n'ai pas trouvé sur ce forum de topic qui parlait de photos + deux colonnes (après c'est peut-être que j'utilise mal le moteur de recherche).

Les divs sont quand même moins lourdes à gérer que les tables non? (en tout cas, c'est ce qui ressort sur les forums, où des comparatifs de poids des fichiers sont réalisés: voir le site de nos amis d'alsacréations).
Si on se base sur ce principe, on va supprimer toutes les balises le type "block" et les remplacer par des div. Ça serait pas mal, non ???
Faudrait-il que je sache ce que sont les balises de type "block" pour que je te réponde...

Attention Nioub féroce!!!

par Ajoloca » 24 janv. 2007, 22:55

Bonjour,
Comme l'explique Ryle la balise <table> à toute sa place dans un document (X)HTML à condition de l'utiliser pour ce quelle à été crée, la structuration de données en tableau et non pas pour la mise en page.

D'un autre coté, il ne faut pas tomber dans l'obsession inverse.
Le div c'est comme l'impôt. Trop d'impôt tue l'impôt.

Personnellement je pense que l'utilisation des div dans le but de remplacer une table c'est aussi grossier que d'utiliser une table pour faire la mise en forme.

Si on se base sur ce principe, on va supprimer toutes les balises le type "block" et les remplacer par des div. Ça serait pas mal, non ??? :roll: