Premier titre

Second titre (--- km, date)

--

Exemple d'en-tête 1

Exemple d'en-tête 2

Exemple d'en-tête 3

Exemple d'en-tête 3 modifié pour en faire un titre de jour (style "jour"), constitué d'une balise <h3> avec la classe "jour", soit <h3 class="jour">

Exemple d'en-tête 4

Exemple d'en-tête 4 modifié pour en faire un titre de jour (style "jour"), constitué d'une balise <h4> avec la classe "jour", soit <h4 class="jour">

Exemple d'en-tête 5

Exemple d'en tête 6

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié. Pour éviter que le paragraphe suivant le démarre sous le bloc de droite, on le termine, juste avant la balise </p>, par un <br> innocent stylé: <br style="clear: both;">

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié. À droite de ce paragraphe, on trouve un insert suivant la nouvelle classe équivalente à la précédente mais dimensionnée en relatif (donc d'allure analogue à l'écran et à l'impression).

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié.

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié.

1° cellule de type <td>	2° cellule de type <td>
cellule (ici unique) d'un tableau de type "Jean Truffy", de largeur fixée à 95% pour contourner le bug IE6, centré par une balise dépréciée <center> et sans balise de paragraphe.
cellule d'un tableau de type "Jean Truffy", sans aucune balise de paragraphe	cellule d'un tableau de type "Jean Truffy", sans aucune balise de paragraphe
cellule d'un tableau de type "Jean Truffy", contenant une balise <p>	cellule d'un tableau de type "Jean Truffy", contenant une balise <p class=" droit ">
cellule d'un tableau de type "Jean Truffy", contenant une balise <p class=" centre ">	cellule d'un tableau de type "Jean Truffy", contenant une balise <p class=" adroite ">

(S'en remettre à l'avis de Monsieur le Maire)

• Exemple de liste à puces suivant style de listes à puces standard "li"
• Seconde puce

Exemple de paragraphe commençant par une balise <p class=" droit ">. Ce paragraphe commence à gauche par 30px de blanc. Il se termine à droite par 30px de blanc. Le texte est justifié.

Exemple de paragraphe de classe <p class=" centre ">

Exemple de paragraphe <p class=" adroite ">

Pour choisir un style normal sous Dreamweaver, il faut d'abord que la feuille de style soit à sa place. Ensuite, on choisit soit les formats "Paragraphe", "En-tête 1", "En-tête 2", etc... À chaque retour chariot, le style précédent est automatiquement reproduit pour le nouveau paragraphe.

On peut aussi faire flotter des photos à droite ou à gauche. Si on n'a pas de légende à mettre, il suffit de donner aux photos la classe "floatright" pour la flotter à droite et "floatleft" pour la flotter à gauche et laisser les balises de photos dans le paragraphe comme indiqué dans les deux derniers paragraphes de cette page. Par contre, si on a une légende à mettre, il faut que la largeur de la photo en px corresponde au dimensionnement en px inscrit dans la classe et créer, avant la balise du paragraphe en question, une classe "div" spéciale contenant la photo, un retour chariot et la légende. A ce jour, on a de disponible "floatleft_225" et "floatright_225" pour photos de 225px", floatleft_300" et "floatright_300" pour photos de 300px, "floatleft_350" et "floatright_350" pour photos de 350px, "floatleft_400" et "floatright_400" pour photos de 400px, "floatleft_450" et "floatright_450" pour photos de 450px. Ici (photo à droite), voici la syntaxe conseillée pour une largeur fixe de 400px:

<div class="floatright_400">
<img class="floatright" src="photos_2006/les_vignes.jpg" alt="" height="300" width="400"><br>
Avec la balise <div class="floatright_400">Exemple de photo de 400px de large flottée à droite</div>
</div>

Pour choisir une classe de paragraphes, se mettre en style "Paragraphe", et actionner la commande de menu: Texte:Style personnalisé (p) . On voit alors apparaitre: " Aucun ", " adroite ", " centre ", " compte_rendu ", " droit ". Les autres sont marqués "non disponible". Si on se met dans autre chose qu'une balise "Paragraphe", toutes les classes apparaissent comme "non disponibles", ce qui est, pour le moment, exact.

Une balise <p> normale s'obtient en choisissant "Aucun",

Une balise "droit" s'obtient en choisissant "droit",

etc.

On peut aussi mettre en gras en utilisant le style " gras ". Pour ce faire, surligner le mot en question et actionner la commande de menu: Texte:Style personnalisé (p) . On voit alors apparaitre " gras ". De même, les styles personnalisés suivants (toujours pour mot ou groupe de mots) suivants sont disponibles: " moinsun ", " souligne ", " italique ", " plus un ", " plusdeux ", " plustrois ".

Ceci permet normalement d'éviter totalement l'usage des balises dépréciées <b>, <u>, etc et de les remplacer par des styles (des balises du type <span class="gras">) figurant dans la feuille de styles générale du site Abeille.

<img class="floatleft" src="url de l'image-" alt="désignation de l'image" height="hauteur en px" width="largeur en px"> Image insérée à gauche du paragraphe. La classe "floatleft" appliquée, qui ne marche que pour la classe "compte_rendu", flotte l'image vers la gauche et insère 10px de marge à droite et en dessous de l'image mais pas aillleurs.

Pour forcer un paragraphe, situé juste après une image flottée sur la gauche, à attendre pour débuter, la fin de l'image située autrement à sa gauche (ici un paragraphe <p>), insérer le style clear: left; ("left" car l'image est flottée à gauche ) dans la balise <p> du paragraphe ou dans une balise <br> située juste avant la balise </p> de fermeture du paragraphe précédent. Ici, ce paragraphe est stylé: <p style="clear: left;">, on aurait pu terminer le précédent par <br style="clear: left;"></p> (ou, pour ne pas se casser la tête en choisissant entre gauche et droite, <p style="clear: both;"> ou à la fin du précédent  <br style="clear: both;"></p>).

<img class="floatright" src="url de l'image-" alt="désignation de l'image" height="hauteur en px" width="largeur en px"> Image insérée à droite du paragraphe. La classe "floatright" appliquée, qui ne marche que pour la classe "compte_rendu", flotte l'image vers la droite et insère 10px de marge à gauche et en dessous de l'image mais pas aillleurs.

Quand on veut, de manière analogue à ce qui précède, attendre la fin d'une image flottée à droite pour débuter le paragraphe suivant, on style le paragraphe suivant par le style="clear: right;", soit pour cette balise <p>: <p style="clear: right;"> ou pour la fermeture du paragraphe précédent <br style="clear: right;"></p> (ou, pour ne pas se casser la tête: <p style="clear: both;"> ou à la fin du précédent <br style="clear: both;"></p>).

On peut dimensionner une image en largeur en relatif (en %) : 61,8% (1/phi), 61%, 48%, 35%, 25%, 10% ou toute autre valeur, en dimensionnant l'image un peu trop large en pixels (par exemple, ici, 400 px) et en laissant le poste client calculer la largeur et la hauteur en px compte tenu de la dimension disponible dans la situation (écran ou impression papier) constatée. Avantage, marche en vue écran et à l'impression. Inconvénient: ça mange du temps, et de l'espace disque. Si on n'a pas de légende à mettre, il suffit de donner aux photos la classe "floatright" pour la flotter à droite et "floatleft" pour la flotter à gauche et dimensionner les balises de photos à style="width: 61.8%;" ou toute autre valeur souhaitée. Par contre, si on a une légende à mettre, il faut que la largeur de la photo en % corresponde au dimensionnement en % inscrit dans la classe et créer, avant la balise du paragraphe en question, une classe "div" spéciale contenant la photo, un retour chariot et la légende. A ce jour, on a de disponible dans la feuille de style "floatleft_61p" et "floatright_61p" pour photos de 61%", floatleft_48p" et "floatright_48p" pour photos de 48%, "floatleft_35p" et "floatright_35p" pour photos de 35%, "floatleft_25p" et "floatright_25p" pour photos de 25%, "floatleft_10p" et "floatright_10p" pour photos de 10%. Ici (photo à droite), voici la syntaxe conseillée pour une largeur fixe de 35% avec légende:

    <div class="floatright_35p">
      <img class="floatright" src="photos_2006/les_vignes.jpg" alt="Photo" style="width: 100%;"><br>
      Avec la balise &lt;div class="floatright_35p"&gt;Exemple de photo de 35% de large flottée à droite&lt;/div&gt;
    </div>

Et les compte rendus sous forme de blog (trop de photos pour les textes => on va centrer un max de photos: par 3 [100%], par 2 [61.8%], par 1 [30.9%]) ?

Deux styles tous usages dénommés "blog1photo" (80%) et "blog2photos" (61.8%) se trouvent à la fois dans la feuille de styles du site et dans les styles de page (sachant que le style local gagne sur le style de page, qui gagne sur le style du site). Il sont prédimensionnés dans la feuille de style du site. Pour donner le look "blog" à un CR surchargé de photos, on les organise par 1, 2 ou 3 avec par exemple 33%, 66%, 100%. On règle cela dans la feulle de styles du site et on dimensionnera même les quelques photos flottées. On peut souder toutes ces largeurs entre elles à la largeur de blog1photo par un javascrpt agissant sur le style de la page. Modèle ? voir 2017_myanmar.html.

Si on veut centrer une image dimensionnée en relatif (en %), le mieux est d'utiliser le conteneur <div class="floartcenter"> (ou <p class="floatcenter">), qui mettra une marge en dessous (1%) de l'image, centrera dans le conteneur parent et interdira les textes à gauche et à droite de l'image et les sauts de page dans l'image. Ici (dessous), voici la syntaxe conseillée avec une balise div (la balise conseillée). Notons que l'usage de <center> n'est pas utile pour floatcenter:
      <div class="floatcenter">
        <img class="floatcenter blog1photo" alt="Prague la nuit" src=
        "photos_2009/ppg_prague_castle_night.jpg"><br>
         Commentaire de la photo
      </div>

Ici on a dimensionné la photo à class blog1photo par la feuille de styles du site. On aurait pu, par les styles de cette page, la dimensionner à 61,8% (le rapport d'or, irrationnel, phi, tel que 1/phi = 1+phi) ou n'importe quel autre rapport. On aurait aussi pu utiliser (mais c'est sans intérêt manifeste) boiboite.

Notons l'absence de désignation de hauteur pour l'image, ce que les robots (Netscape 7.2, Kompozer, Dreamweaver, etc.) détestent tous faire. Et pourtant, il n'y a pas d'autre solution. Cette technique entraîne une forte consommation de ressources (volume, bande passante, calcul). Il en résulte une relative lenteur d'affichage. Demain, avec des machines plus véloces, un débit plus grand sur internet et de l'espace disque plus important chez l'hébergeur, on pourra sans remords, à l'image des grands hébergeurs d'albums de photos, généraliser cette technique pour flotter des photos à droite ou à gauche. Celles-ci auront alors une taille apparente identique à l'écran et à l'impression.

Boiboite à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant deux boites ("boitegauche") et ("boitedroite"), chacune dimensionnée à 49.9%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boitegauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boitedroite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 2&deg; photo
        </div>
        <br style="clear: both;">
         Commentaire des deux photos
      </div>

Boiboite à la mode d'Olivier et de Jean, comportant deux photos. Boite sans aucune marge ni padding, dimensionnée manuellement à 61,8% (phi) ou toute autre valeur déterminée par le script de cette page déterminant la largeur du style "blog2photos" (2 fois la largeur du style "blog1photo"), et centrée, contenant deux boites ("boitegauche") et ("boitedroite"), chacune dimensionnée manuellement à ce qu'il faut pour que leurs hauteurs soient égales (utiliser le calculateur Excel M_ligne_de_photos.xlsx), contenant chacune une photo dimensionnée à 100%. Blog2photos a aussi une largeur par défaut déterminée dans la feuille de styles du site et utilisée si on détruit le script de haut de cette page.

La syntaxe conseillée est:

    <center>
      <div class="boiboite blog2photos">
        <div class="boitegauche" style=" width: 56.9%;">
          <img class="floatleft" style=" width: 100%;" alt="Rassemblement" src="photos_2016/nz_16-01-12_09-19-00.jpg"><br>
          Rassemblement
        </div>

        <div class="boitedroite" style="width: 42.9%;">
          <img class="floatright" style="width: 100%;" alt="Christchurch: commerces temporaires" src="photos_2016/nz_16-01-12_10-09-31.jpg"><br>
          Commerces temporaires
        </div><br style="clear: both;">
      </div>
    </center>

Rassemblement

Commerces temporaires

Empilement de deux boiboites ou plus. Ici, il faut réduire la marge inférieure du bloc supérieur (donc de tous sauf de l'élément inférieur).

À la main, on ferait comme suit:

boiboite + style="margin: 0;"

boitegauche + style="margin: 0 0 0.3% 0;"

boitedroite + style="margin: 0 0 0.3% 0;"

floatleft + style="margin: 0;"

floatright + style="margin: 0;"

floatcenter + style="margin: 0;"

En automatique, on crée des styles dérivés nouveaux dénommés: "boiboitehaut", boitegauchehaut", "boitedroitehaut", "floatlefthaut", "floatrighthaut", "floatcenterhaut". La syntaxe conseillée devient alors:

    <div class="boiboitehaut">
      <div class="boiboitehaut blog2photos">
        <div class="boitegauchehaut">
          <img class="floatlefthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
        </div>

        <div class="boitedroitehaut">
          <img class="floatrighthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
        </div><br style="clear: both;">
      </div>

      <div class="boiboitehaut blog2photos">
        <div class="boitegauchehaut">
          <img class="floatlefthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
        </div>

        <div class="boitedroitehaut">
          <img class="floatrighthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
        </div><br style="clear: both;">
      </div>

      <div class="boiboite blog2photos">
        <div class="boitegauche">
          <img class="floatleft" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire éventuel avant-dernière photo
        </div>

        <div class="boitedroite">
          <img class="floatright" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire éventuel dernière photo
        </div><br style="clear: both;">
        Commentaire éventuel du bloc entier de photos
      </div>
    </center>

Commentaire éventuel avant-dernière photo

Commentaire éventuel dernière photo

Commentaire éventuel du bloc entier de photos

Boiboite à 3 places à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant trois boites ("boite33gauche"), ("boite33milieu") et ("boite33droite"), chacune dimensionnée à 33.2%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boite33gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boite33gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 2&deg; photo
        </div>

        <div class="boite33droite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 3&deg; photo
        </div>
        <br style="clear: both;">
        Commentaire des trois photos
      </div>

Empilement de deux boiboites "3 places" ou plus.

En automatique, on crée des styles dérivés nouveaux dénommés: "boiboitehaut", boite33gauchehaut", "boite33droitehaut", "floatlefthaut", "floatrighthaut", "floatcenterhaut". La syntaxe conseillée devient alors:

  <div class="boiboitehaut">
    <div class="boite33gauchehaut">
      <img class="floatlefthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
    </div>

    <div class="boite33gauchehaut">
      <img class="floatlefthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
    </div>

    <div class="boite33droitehaut">
      <img class="floatrighthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
    </div>
    <br style="clear: both;">
  </div>

  <div class="boiboitehaut">
    <div class="boite33gauchehaut">
      <img class="floatlefthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
    </div>

    <div class="boite33gauchehaut">
      <img class="floatlefthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
    </div>

    <div class="boite33droitehaut">
      <img class="floatrighthaut" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
    </div>
    <br style="clear: both;">
  </div>

  <div class="boiboite">
    <div class="boite33gauche">
      <img class="floatleft" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
      Commentaire éventuel 1° photo
    </div>

    <div class="boite33gauche">
      <img class="floatleft" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
      Commentaire éventuel 2° photo
    </div>

    <div class="boite33droite">
      <img class="floatright" alt="Prague la nuit" src="photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;">
      <br>
      Commentaire éventuel 3° photo
    </div>
    <br style="clear: both;">
    Commentaire des trois photos
  </div>

Boiboirte miste utilisant un flexbox à a place d'une photo

Commentaire éventuel 1° photo

Commentaire éventuel 2° photo

Commentaire éventuel Flex conteneur

Commentaire des trois photos

The flex-direction Property

The "flex-direction: column;" stacks the flex items vertically (from top to bottom):

Boiboite à 4 places à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant quatre boites ("boite25gauche"), ("boite25gauche"), ("boite25gauche") et ("boite25droite"), chacune dimensionnée à 24,8%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boite25gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boite25gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 2&deg; photo
        </div>

        <div class="boite25gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 3&deg; photo
        </div>

        <div class="boite25droite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 4&deg; photo
        </div>
        <br style="clear: both;">
        Commentaire des quatre photos
      </div>

Boiboite à 5 places à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant cinq boites ("boite20gauche"), ("boite20gauche"), ("boite20gauche"), ("boite20gauche") et ("boite20droite"), chacune dimensionnée à 19,8%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 2&deg; photo
        </div>

        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 3&deg; photo
        </div>

        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 4&deg; photo
        </div>

        <div class="boite20droite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 5&deg; photo
        </div>
        <br style="clear: both;">
         Commentaire des cinq photos
      </div>

Boiboite à 6 places à la mode d'Annick ("boiboite") pour le Galibier, photos portrait: boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant six boites ("boite17gauche"), ("boite17gauche"), ("boite17gauche"), ("boite17gauche"), ("boite17gauche") et ("boite17droite"), chacune dimensionnée à 16,47%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

Boiboite à 10 places à la mode d'Annick ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant dix boites ("boite10gauche"), ("boite10gauche"), ("boite10gauche"), ("boite10gauche"), ("boite10gauche"), ("boite10gauche"), ("boite10gauche"), ("boite10gauche"), ("boite10gauche") et ("boite10droite"), chacune dimensionnée à 9,8%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

Boiboite à la mode de Jean ("boiboite", aussi): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant deux boites ("boitegauche") et ("boitedroite"), contenant chacune une photo dimensionnée à autre chose que 100%. on pourrait mettre 80%, ici, comme Jean, on met 400px. Il demeure indispensable que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

     <div class="boiboite">
       <div class="boitegauche">
          <img class="floatcenter" alt="Prague la nuit" src= "photos_2009/parpra_prague_castle_night.jpg" style="width: 400px;"><br>
          Commentaire éventuel de la première photo
        </div>

        <div class="boitedroite">
          <img class="floatcenter" alt="Prague la nuit" src= "photos_2009/parpra_prague_castle_night.jpg" style="width: 400px;"><br>
          Commentaire éventuel de la seconde photo
        </div>
        <br style="clear: both">
        Commentaire éventuel commun aux deux photos
      </div>

Paragraphe suivant

Ici, on a encadré un paragraphe en sandwich entre deux photos (à priori de hauteur identique). La syntaxe est:

      <div class="floatleft_35p">
        <img alt="La Berarde" class="floatleft" src=
        "photos_2008/dfu_cr_dsc01597.jpg" style="width: 100%;"><br style="clear: left;">
         Le pointage de la B&eacute;rarde est magique
      </div>
      <div class="floatright_35p">
        <img class="floatright" alt="La Berarde" src=
        "photos_2008/dfu_cr_dsc01598.jpg" style="width: 100%;"><br style="clear: right;">
         La B&eacute;rarde, c'est tout sauf plat. Le Veneon est en bas
      </div>
<p class="droit">Ici, on a encadr&eacute; un paragraphe en sandwich entre deux photos (&agrave; priori de hauteur identique, ici dimensionnées en %). La syntaxe est:
Pour prévoir les situations (fenêtre très large) où le texte serait moins haut que les photos, on doit terminer le paragraphe par <br style="clear: both;"></p> .

Comme précédemment, on fait ici flotter une image à gauche de la partie texte (<p class="droit">), mais cette image est dimensionnée précisément à 48% de la largeur du conteneur parent, avec une marge à droite de 2%, ce qui met la bordure gauche du texte à exactement 50% (au milieu). Pour ce faire, on insère dans le texte la balise "floatleft_48p", qui contient de la place en bas pour un commentaire, optionnel. La syntaxe recommandée est:
<div class="floatleft_48p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br style="clear: left;">
Le groupe est pr&ecirc;t: cap sur Prague
</div>
<p class="droit">Comme pr&eacute;c&eacute;demment...

48% . Avec la même photo flottée à gauche, on veut ici, comme dans certains CR de Gérard, que le paragraphe suivant attende la fin de la photo. Pour tout compliquer, le paragraphe suivant contient aussi une photo flottée (alors, on ne sait pas ou insérer l'attribut "style="clear: both;"). On l'insère dans une balise <br> insérée à la manière de Dreamweaver juste avant la balise </p> de fermeture du paragraphe qui borde la photo. La syntaxe recommandée est:
<div class="floatleft_48p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br">
Le groupe est pr&ecirc;t: cap sur Prague
</div>
(sans oublier de terminer notre paragraphe par "<br style="clear: both;"></p>)

35%, cette fois . Avec la même photo flottée à gauche, on veut ici, comme dans certains CR de Gérard, que le paragraphe suivant attende la fin de la photo. Pour tout compliquer, le paragraphe suivant contient aussi une photo flottée (alors, on ne sait pas ou insérer l'attribut "style="clear: both;"). On l'insère dans une balise <br> insérée à la manière de Dreamweaver juste avant la balise </p> de fermeture du paragraphe qui borde la photo. La syntaxe recommandée est:
<div class="floatleft_35p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br>
Le groupe est pr&ecirc;t: cap sur Prague
</div>
(sans oublier de terminer notre paragraphe par "<br style="clear: both;"></p>)

25%, cette fois . Avec la même photo flottée à gauche, on veut ici, comme dans certains CR de Gérard, que le paragraphe suivant attende la fin de la photo. Pour tout compliquer, le paragraphe suivant contient aussi une photo flottée (alors, on ne sait pas ou insérer l'attribut "style="clear: both;"). On l'insère dans une balise <br> insérée à la manière de Dreamweaver juste avant la balise </p> de fermeture du paragraphe qui borde la photo. La syntaxe recommandée est:
<div class="floatleft_25p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br style="clear: left;">
Le groupe est pr&ecirc;t: cap sur Prague
</div>
(sans oublier de terminer notre paragraphe par "<br style="clear: both;"></p>)

Cette fois-ci, on fait ici flotter une image à droite de la partie texte (<p>) et  cette image est aussi dimensionnée précisément à 48% de la largeur du conteneur parent, avec une marge à gauche de 2%, ce qui met la bordure droite du texte à exactement 50% (au milieu). Pour ce faire, on insère dans le texte la balise "floatright_48p", qui contient de la place en bas pour un commentaire, optionnel. La syntaxe recommandée est:
<div class="floatright_48p">
<img class="floatright" alt="sieste abeille a lachy" src="photos_2009/ppg_01_lachy.jpg" style="width: 100%;"><br style="clear: right;">
&Agrave; Lachy, il y a comme du rel&acirc;chement dans le groupe
</div>

<p>Cette fois-ci, ...

--