Faire son site et le publier

Kompozer et CSS

Mise en forme avec CSS : Insérer des images

Préambule:
Le positionnement par défaut des images se fait dans le flux courant, c'est un peu comme-ci on introduisait un gros ou très gros caractère dans une phrase, cela va perturber l'arrangement du texte autour de l'image.

Voir les différents positionnements sur la page.

1 - Image dans le flux de la pageimage dans le flux de la page

Si on insère une image dans le flux de la page elle se positionne à gauche; le texte n'habille pas l'image sur le côté. Il commence au bas de l'image.
Si on l'insère dans un paragraphe, elle se placera là où se trouve le pointeur.

2 - Images flottantes

Pour positionner des images (ou tout autre élément) qui soient habillées par le texte, coulant  au dessus, au dessous et entre les images, comme un fleuve plus ou moins large suivant la fenêtre du navigateur, il faut les sortir du flux de la page. Nous dirons qu'elles sont flottantes. Un peu comme des péniches amarrées sur les bords d'un canal. 

Nous nous servirons de class
Contrairement à une Id qui ne peut être utilisée qu'une seule fois dans une page, Class peut être utilisé plusieurs fois.
Nous pourrons ainsi avoir sur une même page :

image flottante à gauche                                 image flottante à droite
des images ayant une classe les faisant flotter à gauche          d'autres images ayant une classe les faisant flotter à droite

On peut aussi appliquer Class à des éléments autres que les images comme par exemple des boites d'information, des paragraphes spéciaux.

Insérer normalement l'imageAttributs HTML pour la balise <img>
Donner à cette image un attribut particulier : l'attribut class
Créer une règle de style appliquée aux éléments de cette classe

Nous venons de définir une classe pour les images. Il faut maintenant attribuer des directives de style à cette Classe afin que les images de cette classe flottent à gauche. On procède de la même façon que pour un identificateur " id ".

style appliqué aux éléments de même classe

appliquer la classe voulueChaque fois que nous voudrons placer une image flottante à gauche nous lui attribuerons cette classe. Pour cela cliquer dans l'image pour la sélectionner et ensuite nous avons 2 solutions pour appliquer la classe voulue.

Procéder de la même façon pour les images flottantes à droite.

Pour résumer voir sur site Alsacreations : Positionner en flottant

Cas d'une image flottante dépassant le div

Un élément flottant "à l'intérieur" d'un div n'appartient plus au flux du div. Il vient en concurrence avec le reste du contenu du div.
Il est positionné prioritairement par rapport aux éléments qui le suivent. En fait, le div et le flottant sont 2 éléments différents. 

l'image flottante dépasse le div                     l'image ne dépasse plus du div
<img class="imageGauche" style="width: 180px; height: 81px;" alt="triangle de Pascal"
src="images/180px-Pascal_triangle_small.png">Enfant précoce, il est éduqué par son père.
Les tout premiers travaux de Pascal concernent les sciences naturelles et appliquées.
<p style="clear: both;"></p>
</div>
<div id="pied">

3 - Images centrées 

Une seule image à centrer

Attribuer à <img> la classe imgCentreBloc. Cette méthode sera utilisée quand on veut centrer une seule image sur la ligne.
La classe imgCentreBloc, avec un affichage bloc, prendra toute la largeur disponible et avec des marges gauche et droite auto centrera l'image dans le bloc. Avec Cascades créer la règle pour la classe imgCentreBloc dans l'onglet Boite / Affichage Bloc et marges droite et gauche à auto. 
Dans ce cas l'image n'est plus un élément de type en ligne.

 
image centrée en lui attribuant une classe "affichage bloc"
display: block;
margin-right: auto;
margin-left: auto;
Plusieurs images ou plusieurs éléments à centrer dans un div

Créer un div qui prendra  toute la largeur disponible.
Cette méthode sera utilisée pour placer plusieurs images dans le div, ou par exemple une image et un arrière-plan pour le div
Il ne faut pas utiliser <div> pour englober un élément seul.

2 images centrées dans un div
      <div class="imageCentre">
        <img style="width: 180px; height: 81px;" alt="triangle de Pascal" src="images/180px-Pascal_triangle_small.png">
        <img style="width: 180px; height: 81px;" alt="triangle de Pascal" src="images/180px-Pascal_triangle_small.png">  
      </div>

Pour avoir une bordure identique sur toutes les images il suffit de définir une règle de style pour l'élément img.

Haut de page
jos Argaud - Mise à jour 4/12/2008  Pour m'écrire  Document made with KompoZer  D'après le cours d'Yves Mairesse et avec son consentement