Positionnement image et texte

Version imprimable

15/01/2008, 13h02
Olivier Regnier

Positionnement image et texte

Bonjour :)

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

Voici l'image:

http://www.oreilly.fr/couvertures/2841774902.icone.gif

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 ?

:merci:

Bonjour,

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

Code:

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:

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

15/01/2008, 14h19
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.

:merci:
15/01/2008, 14h22
clb56

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

Le descriptif sous le titre ou sous l'image ?

Code:

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

Code:

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

:question:

15/01/2008, 14h26
clb56
Citation:
Envoyé par Bisûnûrs

Code:

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

Code:

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

:question:
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.
15/01/2008, 14h38
Olivier Regnier

Voici ce que cela donne comme résultat:

http://oregnier.developpez.com/tmp.gif

Cela mange ma section Contact 8O