5568 sujets

Sémantique web et HTML

Positionnement image dans un article : div, float et clear

Bonsoir,

J'ai passé mon après-midi sur un problème qui me semble sans solution idéale.
J'ai un article que je veux agrémenter de photos/images et que je veux pouvoir positionner au centre, à gauche et à droite.

Donc mon article est dans un "DIV article". Mes images sont dans des DIV_G, DIV_C, DIV_D selon la position voulue. Mais concentrons nous sur les côtés G et D.

Le problème est que je n'ai pas trouvé le moyen pour que les DIV_G s'empilent sagement à G (inversement pour les D) tout en laissant tranquille mon texte qui court tranquillement entre ces DIV.

Si je déclare mes DIV_G images en : <div class='image' style='float:left;'> :
- le texte court bien
- mais si une image est placé trop tôt dans mon article à se placera à droite de la première. C'est moche.
Sans commentaire : http://img138.imageshack.us/img138/4563/preview3w.png

Si je déclare mes DIV_G images en : <div class='image' style='float:left;clear:left;'> :
- les images s'empilent bien
- mais si une image est placé trop tôt dans mon article, le texte qui suit la DIV_G sera séparé du texte d'avant par autant de place qu'il faut pour permettre à la DIV_G de se placer sous l'autre.

Sur l'image : http://img64.imageshack.us/img64/6333/preview2w.png vous voyez à gauche que j'ai une balise [img et du texte autour. Voyez le rendu !

J'espère avoir été clair Smiley smile

Merci d'avance si une solution miracle existe Smiley cligne
Tu n'as pas besoin d'insérer tes images dans un div : tu peux appliquer le positionnement flottant directement à tes images, comme suit :
<div id="article">
  <p><img src="illustration-1.jpg" alt="Alternative textuelle" class="image-gauche" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat massa, suscipit vitae varius eu, dictum eget mi. Pellentesque volutpat suscipit dictum. Sed id lectus massa. Nam ac risus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis mollis massa et metus luctus ac ornare lorem rutrum. Ut eu varius massa. Donec diam lacus, hendrerit laoreet elementum a, facilisis vitae urna. Suspendisse eu leo eu orci feugiat tempor. Phasellus eu felis leo. Suspendisse ut velit ultricies magna eleifend vestibulum at eu tortor. Mauris nec aliquet tellus. Donec adipiscing mi quis urna rhoncus dignissim. Integer sollicitudin pretium velit nec blandit. Donec risus magna, suscipit non placerat in, varius in quam. Duis nisl eros, imperdiet fringilla mollis id, faucibus in arcu. Nunc pulvinar eleifend mauris eu vestibulum. Duis non mi vitae ante egestas posuere quis vitae urna. Integer in justo commodo lacus feugiat rutrum. Fusce ligula mauris, convallis sit amet viverra ut, sollicitudin et felis.</p>
  <p><img src="illustration-2.jpg" alt="Alternative textuelle" class="image-droite" /> Sed viverra convallis quam, id mollis dui aliquet eget. Nulla lobortis, libero id adipiscing rutrum, tellus magna porta nibh, non vulputate ipsum sem quis nunc. Donec et dui justo, at consequat nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lacinia, felis at pretium blandit, metus mi vestibulum mi, vel porttitor purus nisl eu sem. Nunc pretium pellentesque vehicula. Fusce congue, augue et blandit ultrices, tellus nisi tincidunt eros, placerat aliquet eros massa nec orci. Nulla vel metus sed lorem pretium elementum vitae sed purus. Proin faucibus lacus et nisl lobortis quis tincidunt risus consectetur. Pellentesque scelerisque rutrum nunc, sed condimentum velit congue bibendum. Aliquam commodo, lectus a aliquam ullamcorper, quam mi adipiscing nunc, id posuere felis sem vel turpis.</p>
</div>

.image-gauche {
  float: left;
}
.image-droite {
  float: right;
}

Quant au problème que tu exposes à propos des images placées « trop tôt », la meilleure solution consiste soit à rédiger des paragraphes suffisamment longs soit à limiter le nombre d'images dans ton article. De plus, les résultats inesthétiques montrés par tes deux captures d'écran sont, pour ainsi dire, normaux. Je te conseille, si ce n'est déjà fait, de lire la section sur les flottants du tutoriel sur le positionnement en CSS.

Pour les images centrées, même motif même punition que pour les images qui flottent : pas besoin de div :
<p><img src="illustration-3.jpg alt="Alternative textuelle" class="image-centre" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat massa, suscipit vitae varius eu, dictum eget mi.</p>

.image-centre {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
Bonsoir Victor,

merci d'avoir pris le temps de me répondre un samedi à 22h Smiley cligne

J'ai mis mon image dans un DIV car il y a en dessous en plus des infos comme le copyright de la photos et un commentaire. Ils n'apparaissent pas ici pour simplifier.

Ta deuxième remarque est la conclusion à laquelle je suis arrivé. Il faut utiliser les images à bon escient dans mon article et vérifier le rendu grâce à un preview avant de mettre en ligne une horreur.

Enfin, j'ai lu beaucoup d'article sur le positionnement mais pas celui-là. Il est clair qu'il est excellent. Néanmoins, je trouve que l'on a un peu tendance à tomber dans une sorte de fanatisme. Avant il ne fallait pas faire de mise en page avec des "table" (l'intérêt est évident) et maintenant, il faut éviter les float (par ex). Je comprends bien l'intérêt de présenter les best pratices ; sinon à quoi servira de mettre un cours en ligne ; mais quand même. La conclusion en 3 points ne me convint pas du tout (surtout les 2 derniers) :

* Nous détournons une propriété de son rôle initial
* Nous alourdissons notre code HTML uniquement à des fins de mise en forme
* Nous rajoutons une ligne supplémentaire dans notre feuille de style pour créer le contexte de formatage.

En 1995 je veux bien, mais à l'époque de l'ultra haut-débit ce n'est pas très crédible. Smiley murf


Merci encore Smiley biggrin
Bonsoir,

kileak a écrit :
En 1995 je veux bien, mais à l'époque de l'ultra haut-débit ce n'est pas très crédible. Smiley murf


En fait, il ne s'agit pas d'une question de débit mais de sémantique (donc d'accessibilité)... Les balises <div> (comme les bases <span> en inline) sont des balises génériques qui n'ont aucun contenu sémantique. D'où l'idée de ne pas les multiplier...

Polly-Jean
Modifié par Polly-Jean (13 Dec 2009 - 02:27)
Salut,

Polly-Jean a écrit :
Les balises <div> (comme les bases <span> en inline) sont des balises génériques qui n'ont aucun contenu sémantique.
Oui.

Polly-Jean a écrit :
D'où l'idée de ne pas les multiplier...
Non : ce n'est pas parce que les éléments DIV et SPAN n'ont aucune sémantique intrinsèque qu'il ne faut pas les multiplier mais, et c'est valable pour tous les éléments, parce qu'il ne sert à rien d'utiliser plus d'éléments que nécessaire.

Par exemple l'élément DIV dans le cas suivant est à priori inutile puisqu'il suffirait de styler P (je dis à priori car il est possible d'avoir besoin de cet élément pour appliquer un style particulier) :
<div><p>bla bla</p></div>

@kileak > comme dit par Polly-Jean le débit n'a rien à voir là-dedans. Smiley cligne
Le principe est assez simple (en théorie) :
* on part d'un contenu html (l'information que l'on souhaite donner) qui est rédigé de manière sémantique.
* à destination des UA graphiques on met en forme ce contenu grâce aux CSS en s'appuyant sur les éléments existants (titres, paragraphes, listes, ...) et on ne rajoute des éléments pour la mise en forme (typiquement DIV et SPAN) que lorsqu'on n'a pas d'autre choix.

Ceci permet (dans la mesure du possible) la séparation contenu / mise en forme tout en ayant un code le plus simple possible.
kileak a écrit :
Avant il ne fallait pas faire de mise en page avec des "table" (l'intérêt est évident) et maintenant, il faut éviter les float (par ex). Je comprends bien l'intérêt de présenter les best pratices ; sinon à quoi servira de mettre un cours en ligne ; mais quand même. La conclusion en 3 points ne me convint pas du tout (surtout les 2 derniers) :

* Nous détournons une propriété de son rôle initial
* Nous alourdissons notre code HTML uniquement à des fins de mise en forme
* Nous rajoutons une ligne supplémentaire dans notre feuille de style pour créer le contexte de formatage.

Ce n'est pas parce que l'article présence la propriété float comme une propriété détournée lorsqu'il s'agit de créer des colonnes, par exemple, qu'il ne faut jamais l'utiliser. Pour positionner tes images à gauche et à droite du texte de ton article, l'utilisation de la propriété float convient parfaitement et ne constitue pas, dans ce contexte, un détournement de propriété, pour ainsi dire. De même que l'élément table convient très bien pour introduire un tableau présentant des données tabulaires. Smiley cligne
Modifié par Victor BRITO (13 Dec 2009 - 11:28)
Sujet clos
Aller à