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

24 janv. 2007, 12:47

Bonjour à tous!!

Je réalise un annuaire et pour la présentation des annonceurs, j'utilise une div (on m'a déconseillé les tables). Les annonceurs sont actuellement présentés (une photo + nom + ville), à l'aide de la région répétée sur une colonne, et malheureusement la moitié des annonceurs se retrouvent en-dessous du pied de page (nous l'avons fixé pour éviter un maximum les ascenceurs).

Comment présenter cela sur deux colonnes? Je vous présente le code!

Code : Tout sélectionner

<div id="contenu">
<?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">
    <p><?php echo $row_rs_camping['nom_camping']; ?></p>
    <p><?php echo $row_rs_camping['cp_camping']; ?> <?php echo $row_rs_camping['ville_camping']; ?></p>
    <p>Nombre d'emplacements: <?php echo $row_rs_camping['nbemplacement_camping']; ?></p>
    <p><?php echo $row_rs_camping['nbetoiles_camping']; ?></p
      </div>
    </div>
<?php } while ($row_rs_camping = mysql_fetch_assoc($rs_camping)); ?>
</div>

Le problème est visible ici:
http://develop.web.free.fr/template_generic3.php

Merci d'avance!!

24 janv. 2007, 12:59

En faisant un tableau

Si tu n'as que deux colonnes, tu peux aussi jouer avec les float en alignant un div sur deux à gauche et l'autre à droite... au delà ca perd un peu de son intérêt.

L'usage du tableau a été critiqué parcequ'il était devenu abusif et servait à la mise en page de bandeau, de menu, etc. et avait perdu son sens premier : présenter un tableau de données.
Il ne faut donc pas généraliser cette tendance et bannir le tableau sous prétexte que quelques abru... crét... enfin quelques extrémistes accros au w3c ne sont pas capables de faire la différence et pensent porter partout la bonne parole

24 janv. 2007, 13:06

Mince le beau validator W3C ne va pas être content!

Tant pis, va pour le chouette tableau! On essaye ça!
Par contre, il va nous manquer des connaissances: pour faire le tableau à deux colonnes; ça devrait aller, mais pour dire à la région répétée de remplir les deux colonnes du tableau, on fait comment?

Merci de ton aide Ryle!

24 janv. 2007, 13:20

Tu me le confirmeras, mais je ne crois pas que le validator opposera quelque reticence devant un tableau. Ce n'est pas une balise obsolète, justement parce qu'elle a encore et toujours un usage bien spécifique

C'est l'interprétation du genre "le tableau c'est tabou" de certains qui donne ce sentiment, le validator lui est normalement conforme aux normes w3c

Quant à l'affichage, tu dois avoir plusieurs topics qui parlent de galeries d'images, permettant d'afficher des tableaux de 2, 3, 4.. photos par ligne. Suffit de les adapter à tes annonces

24 janv. 2007, 13:27

Merci pour tous ces conseils avisés

! Et dire que j'étais en phase de devenir extrêmiste!!!

Je me rends de ce pas sur les topics.

Je reposte quand j'ai du nouveau!

Merci

24 janv. 2007, 22:04

Il est en fait possible et simple d'utiliser la div, pour afficher une région répétée sur deux colonnes. Il faut dire à l'aide de la feuille CSS, de répéter la div jusqu'à ce qu'elle rencontre la fin de la div globale dans laquelle elle est insérée. Dans notre cas, deux largeurs de div logent dans la div globale, on a donc deux colonnes.

Si certains sont intéressés, envoyez un mp et je vous ferai suivre l'exemple (page php + feuille CSS).

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 ???

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!!!

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 ???

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)

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...

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

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!

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.

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é

)

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..

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

Qui est en ligne