Bonjour à tous,

Bien qu'étant novice en programmation malgré mes 77 ans, je veux toujours modifier l'affichage de mes pages sans avoir vraiment la technique.

Mon problème est le suivant:

<!-- ***************************************************************** -->
<div style="display: none;" id="pop1">
<!-- ***************************************************************** -->
 
  <div class="conteneur2">
 <table width="900" border="1" align="center" bgcolor="#F0F0D9">
    <tr><td width=40%>&nbsp;</td><td width=16%>&nbsp;</td><td width=40%>&nbsp;</td></tr>
    <tr><td colspan="3"><em>&nbsp;Avant-propos sur les fleurs&nbsp;</em></em></td></tr>
    <tr><td colspan="3">&nbsp;&nbsp;</td></tr>
      <tr>
        <td>&nbsp;<img src="image fleurs 300x200/aubretia_02.jpg" alt="..."  width="300" height="200"></td>
        <td colspan="2" valign="top" >&nbsp; Je ne sais si dans mon subconscient, le fait d'avoir dû aider mon père à cultiver le potager familial (20 ares) qui était entretenu exclusivement à la main, m'a éloigné de la culture des légumes, mais c'est comme ça<br><br><br><br><br><br>
    <p align="left"><em>&nbsp;Aubretia&nbsp;</em></p>

</td>
  </tr>
  <tr>
    <td colspan="2" valign="top">&nbsp;Notre potager actuel est une buse en béton de 2.5 mètres de diamètre avec plantes condimentaires et laurier sauce.<br><br>Notre séjour belge nous à fait découvrir la profusion de plantes vivaces qu'il est possible de cultiver sous nos latitudes.       <br><br><br><br>
    <p align="right"><em>&nbsp;Alstromeria&nbsp;</em></p>  
</td>
    <td>&nbsp;<img src="image fleurs 300x200/alstromeria_11.jpg" alt="..."  width="300" height="200"></td>
  </tr>
  <tr>
    <td>&nbsp;<img src="image fleurs 300x200/alstromeria_04.jpg" alt="..." width="300" height="200"></td>
    <td colspan="2" valign="top">&nbsp;La proximité de la Hollande avec ses champs de bulbes n'a fait qu'accentuer cet engouement pour les vivaces.<br>Un jardin d'agrément, s'il demande moins de travail  qu'un potager doit être entretenu régulièrement.<br><br><br><br><br>
    <p align="left"><em>&nbsp;Aubretia&nbsp;</em></p></td>
  </tr>
  <tr>
    <td colspan="2" valign="top">&nbsp;Les vivaces doivent en général être dédoublées après 4 à 5 ans. Cela permet de rajeunir les touffes et de faire plaisir à ses voisins.<br>Le fait de résider dans un pays non francophone nous a obligé à apprendre directemente les noms latins des plantes ce qui permet de se comprendre avec les horticulteurs, que ce soit en Hollande ou Angleterre. </p><br><br><p align="right"><em>&nbsp;Alstromeria&nbsp;</em></p> </td>
    <td>&nbsp;<img src="image fleurs 300x200/crocosmia_01.jpg" alt="..." width="300" height="200"></td>
  </tr>
  <tr>
    <td>&nbsp;<img src="image fleurs 300x200/alyssum_1.jpg" alt="..." width="300" height="200"></td>
    <td colspan="2" valign="top">&nbsp;Dans les albums-photos, j'ai simplement regroupé les nombreuses photos que j'avais pu prendre. <br>
          J'envisage de les classer et d'ajouter un commentaire sur mes expériences de culture de ces nombreuses variétés, mais encore faut-il trouver le temps !!!!! </p><br><br><br><br>
    <p align="left"><em>&nbsp;Aubretia&nbsp;</em></p></td>
  </tr>
  </table>

le texte explicatif est  centré dans les 2 colonnes groupées de la ligne et positionné en haut par la formule

<td colspan="2" valign="top">

dans la même cellule, j'ai un texte concernant le type de plante de la photo aligné coté photo par la formule 

<p align="right"><em>&nbsp;Alstromeria&nbsp;</em></p>  ou    <p align="left"><em>&nbsp;Aubretia&nbsp;</em></p>

cela fonctionne bien horizontalement mais, je voudrais que le texte concernant la photo soit en bas de la cellule.

Je n'ai pas trouvé dans <p> une commande permettant ça et je ne sais même pas si cela existe pour éviter d'avoir à introduire des <br> selon le texte précédent.

Merci d'avance de vos conseils pour pallier à mon ignorance

-
Edité par helvetdulac 9 août 2017 à 10:07:05

Bonjour,

flex-box est parfaitement adapté : il s'agit, dans un conteneur parent (ici <td>), de disposer automatiquement deux éléments, un texte explicatif et le nom de la plante, le premier calé en haut et le deuxième calé en bas.

Il faut donc définir le conteneur parent comme étant une flex-box (display:flex), indiquer que l'axe principal sera l'axe vertical, c'est à dire que les éléments seront en colonne, et que le contenu de la flex-box sera "space-between", c'est à dire que les éléments seront disposés à chaque extrémité.

Ne pas oublier d'indiquer une hauteur pour l'élément parent

Si vous n'avez pas tout compris, regardez de la doc sur les flex-box, c'est une manière simple et élégante de disposer des éléments dans un conteneur, souple et légère. 

Sinon, la mise en page par <table> est obsolète, il  a des manières bien plus simples et souples  à utiliser

-
Edité par ChrisLebure 9 août 2017 à 10:31:51