Aligner texte et image

Version imprimable

Salut,

Comment faire pour aligner le texte à coté de l'image car pour l'instant, l'image se positionne en dessous.

Voici le code HTML testé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
  <head>
  <title>texte et image</title>
  </head>
  <body>
 
<p>Voici une image dans le texte : <figure><img src="test.gif" alt="texte alt" style="vertical-align: middle"/></figure> avec la balise image.</p>
 
<p>Voici une image dans le texte : <figure style="float:left"><img src="test.gif" alt="texte alt" style="vertical-align: middle"/></figure> avec la balise image.</p>
  </body>
</html>

:merci:

07/03/2012, 10h19
djibril

L'affichage est correct sous IE8, mais pas sous FF 10.0.2, ni sous chrome.

Une idée ?

:merci:
07/03/2012, 14h33
NoSmoking

Bonjour,

Citation:

L'affichage est correct sous IE8, mais pas sous FF 10.0.2, ni sous chrome.

je dirais que c'est l'inverse :D

La balise FIGURE, issue du HTML5, n'est pas reconnue par certains navigateurs et notamment IE8, de ce fait ils traitent celle ci comme une balise personnalisée, un simple SPAN par exemple.

Lorsqu'elle est reconnue elle est traitée comme une balise de type block et comme les DIV passe à la ligne, c'est une balise de contenu.

Elle sert surtout à regrouper des images/videos d'un même thèmes à laquelle ont peut mettre une légende via la balise FIGURECAPTION.

Dans le cas que tu nous montres elle n'apporte rien au document et tu pourrais tout simplement écrire

Code:

<p>Voici une image dans le texte : <img src="test.gif" alt="texte alt" style="vertical-align: middle"/> avec la balise image.</p>

et le tour est joué.
07/03/2012, 14h53
djibril

Je savais que ça fonctionnait sans balise <figure>, mais comme je souhaite respecter la sémantique ;).
Donc pour toi, du moment où l'on ne souhaite pas utiliser de légende à une image, il est inutile d'utiliser la balise <figure> et la sémantique est respectée, sûr ?
07/03/2012, 15h45
NoSmoking

Citation:

Donc pour toi, du moment où l'on ne souhaite pas utiliser de légende à une image,...

non la légende n'étant pas obligatoire, je dirais que cette balise est plus un conteneur et n'est pas forcément dans le flux du document, au même titre que l'on regroupe une série de photos dans une DIV.

Concernant la sémantique de la balise IMG je ne vois pas de soucis, ton cas est même repris très largement dans la spécification http://developers.whatwg.org/embedde...he-img-element.
07/03/2012, 16h52
djibril

:merci: :ccool: