Discussion :

[Olivier Regnier]

Bonjour

Actuellement, je planche sur le positionnement de texte par rapport à une image donnée.

Voici l'image:



Je désire placer à coté de cette image en haut un titre et juste en dessous son descriptif.

Auriez-vous un petit exemple à me proposer s'il vous plaît ?

[clb56]

Bonjour,

je ne vois pas trop quel problème tu veux régler, pour le html ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<h3>Titre</h3>
<p>
<img src="" alt="" width="" height="" />
</p>
<p>
... Texte...
</p>

me parait très bien. Le h3 est mis au hasard bien sur.

Ou avec déduction des <div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="conteneur_image_texte">
     <h3>Titre</h3>
     <div class="contenu_image_texte">
          <p>
               <img src="" alt="" width="" height="" />
          </p>
          <p>
               ... Texte...
          </p>
     </div><!-- fin .contenu_image_texte -->
</div><!-- fin .conteneur_image_texte -->

[Olivier Regnier]

Tout d'abord, merci de ta réponse. Il est vrai que je n'ai pas donné beaucoup d'informations. Mon problème n'est pas vraiment html mais plutôt CSS surtout dans le positionnement.

Je souhaiterai que le titre de l'image soit à coté de l'image et positionné vers le haut et juste en dessous, le descriptif.

Actuellement, le titre est au dessus de l'image et le texte en dessous.

[clb56]

Le titre à gauche ou à droite de l'image ?

Le descriptif sous le titre ou sous l'image ?

[Bisûnûrs]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="content">
   <img src="..." />
   <h3>Titre</h3>
   <p>Texte</p>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#content img
{
   float:left;
}

[clb56]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="content">
   <img src="..." />
   <h3>Titre</h3>
   <p>Texte</p>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#content img
{
   float:left;
}

Pas trop d'accord parce que là le html est trituré pour obtenir un rendu visuel, le titre doit valoir pour l'ensemble de la section image + texte.

[Olivier Regnier]

Voici ce que cela donne comme résultat:



Cela mange ma section Contact