Centrer une image, est-ce correct ?

Bonjour

Je suis tombé sur un sujet parlant de cela en faisant une recherche sur google, j'ai tenté d'y répondre mais le sujet, trop vieux, est clos.

Dans l'autre topic, quelqu'un suggérait d'aller voir dans la faq. J'ai lu les astuces qu'elle contient mais elles ne me disent pas grand chose (cela ne veut pas dire que je ne les comprend pas).

Ne serait-il pas plus simple de procéder ainsi :

.center{
text-align: center;
}

<div id="machin">

<p>Mon texte ici</p>

<p class="center"><img src="mon_image.jpg" alt="" /></p>

<p>mon texte ici</p>

</div>

J'ai testé et ça marche. Cependant, je me demande si cette manière de procéder est sémantiquement correcte. Qu'en pensez-vous ?

Merci

Salut

Si, c'est correct. C'est d'ailleurs la meilleure méthode.

Quoique, point de vue sémantique, on pourrait chicaner sur la balise adéquate : <p class="center"> ou <div class="center"> ?

Mais franchement, ce serait une discussion (un débat ?) inutile

Bonjour,

Si cela peut rassurer:

Vous vous souvenez que CSS n'a aucun rapport avec la sémantique, justement ?

Que la méthode de centrage d'une image n'a rien, mais alors rien de rien de près ou loin, dans le brouillard ou par temps clair, à voir avec les problématiques du Web sémantique ?

Ce qui sert de conteneur à l'image non plus. Les seules choses sémantiques là-dedans, on ne peut pas les changer: l'élément img et son attribut alt.

Moi, je dis ça, mais je ne dis rien...
Modifié par Laurent Denis (23 Aug 2006 - 18:58)

deejay-bee a écrit :
Bonjour

Salut et bienvenue

deejay-bee a écrit :
Ne serait-il pas plus simple de procéder ainsi :

Ah ben tiens, comme par hasard, que trouvons-nous dans l'incontournable FAQ ?
http://forum.alsacreations.com/faq/#item74

La vie est parfois bien faite quand-même. Il suffit parfois de chercher pas loin.

Bonjour,

Mais ne serait-il pas mieux de donner un nom différent à la class, au cas où la mise en page de l'image changerait et qu'elle ne serait plus centrer ? Un nom comme "image-contenu" qui ne relie en aucun cas son nom avec le style CSS appliqué.

Moi, je dis ça, mais je ne dis rien non plus...
Modifié par Tony Monast (23 Aug 2006 - 19:33)

a écrit :
Un nom comme "image-contenu" qui ne relie en aucun cas son nom avec le style CSS appliqué.

Dans ce cas ci , le center est vraiment utilisé pour centrer l'image , je pense qu'on est mieux de changer le style affecté a l'image pour un left ou right directement dans le XHTML si on ne veut plus du center.

Mais ce genre de topic ,c'est un méchant débat qui peut s'ouvrir et qui nous menera nulle part, le tout c'est surtout de s'y retrouver dans sa feuille et un mot comme cnter et parfois mieux que #b42blackimageright non ?

RoseGrenouille a écrit :
le tout c'est surtout de s'y retrouver dans sa feuille et un mot comme center et parfois mieux que #b42blackimageright non ?

Non justement, il est fortement suggéré de ne pas prendre des noms reliés aux styles qui y sont appliqués. Disons deux menus, un qui est stylé pour se retrouver à gauche, et l'autre à droite. Il est préférable de les nommer "menu-principal" et "menu-secondaire" (ou "menu-1" et "menu-2") au lieu de les nommer "menu-gauche" et "menu-droite". Qui sait si un jour tu n'auras pas un skin qui inverse la position des menus. Dans une feuille de style :

ul.menu-gauche {
float:right
...
}

ul.menu-droite {
float:left
...
}

Ca le fait pas trop hein ! Ca va de même pour une class center qui n'est plus center finalement.

Ca reste libre à chacun. Moi-même, il m'arrive de ne pas respecter ce conseil.
Modifié par Tony Monast (23 Aug 2006 - 20:31)

ok, débat lancé !!!

je suis d'accord avec ce que tu dis dans le cadre de ton menu et en général d'ailleurs pour utiliser des noms qui décrivent l'usage plutot que le look.

Maintenant ca depend a quoi tu l'appliques et a quel type de contenu tu l'appliques.

Par exemple : si on ne parle pas du skin de base du site mais de ce que l'on va mettre dans une partie " #centre" , partie qui la plupart du temps va etre la seule partie qui varie puisque le menu , le header et le footer sont normalement souvent les mêmes.

Dans ce div #centre on a différents éléments dont des images avec légendes ( bon c'est un exemple faut faire tourner son imaginaire un peu )

Des fois on veut l'image et sa legende a droite, des fois, le tout centrer et des fois a gauche.

HE bien je pars du principe que pour ce type de style apllicable au contenu du div #centre , on est mieux avec des nom qui ne changent pas et encore mieux avec des noms qui ne changent pas d'un site a l'autre et d'une feuille a l'autre.

Aussi si notre image alignée a gauche on la veut au centre on changera le style de .aligneagauche pour .aligneaucentre . C'est parlant !

MAis pour le design (la carcasse) du site, tu as raison la dessus de ne pas donner de position geographique dans le nom du style.

D'ailleurs, le div #centre devrait s'appeller #principal, ou #contenu dans ce cas, non

@sopo : ben en fait oui, tu as tout a fait raison, je vais me changer ca tiens, voila mon avancée de la semaine

Bonjour,

Tony Monast a écrit :
Non justement, il est fortement suggéré de ne pas prendre des noms reliés aux styles qui y sont appliqués.

Oui, mais non

A l'usage, par exemple, lorsque des rédacteurs doivent pouvoir réaliser des mises en pages dans un cadre défini via un CMS (wikipedia est un bon cas-type public, mais c'est le cas également de SPIP, et la syntaxe wiki Dotclear le fait sans le dire si ma mémoire est bonne), il est nécessaire de leur fournir des classes génériques de présentation les plus explicites possibles. Typiquement:
- class="center" pour centrer une image
- class="floatleft" et "floatright" pour positionner une image dans un texte avec des marges prédéfinies, etc.
- etc.

Il y a en fait un dosage délicat à réaliser, avec des règles d'usage aussi efficaces que possibles, au cas par cas.

C'est un problème d'industrialisation trçs intéressant, en tous cas.
Modifié par Laurent Denis (24 Aug 2006 - 11:54)

Raphael a écrit :
Salut et bienvenue

Merci

Raphael a écrit :

Ah ben tiens, comme par hasard, que trouvons-nous dans l'incontournable FAQ ?
http://forum.alsacreations.com/faq/#item74

La vie est parfois bien faite quand-même. Il suffit parfois de chercher pas loin.

Arf ! L'autre topic renvoyait vers l'alignement vertical ! Je n'avais pas vu l'horizontal. En fait je pensais qu'aligner du texte ou une image au centre c'était un alignement vertical parce que je vois mal comment l'on peut aligner quelque chose horizontalement

Mais bon j'ai encore appris quelque chose, je ne suis pas un confirmé en codage Je vais me renseigner sur cette histoire.

Laurent Denis a écrit :
Typiquement:
- class="center" pour centrer une image
- class="floatleft" et "floatright" pour positionner une image dans un texte avec des marges prédéfinies, etc.
- etc.

En fait c'est ça qui m'intrigue. Le fait de mettre <div class="center"> ressemble beaucoup à <div align="center">. Je me suis donc demandé si ce n'était pas du bidouillage pour contourner la règle du xhtml qui interdit d'introduire des éléments de style.

Donc si j'ai bien compris, il vaut quand même mieux spécifier un autre nom ? A mon avis c'est en fonction du cas. Je vairai.

En tout cas merci pour vos réponses !

a écrit :
Le fait de mettre <div class="center"> ressemble beaucoup à <div align="center">. Je me suis donc demandé si ce n'était pas du bidouillage pour contourner la règle du xhtml qui interdit d'introduire des éléments de style.

A ma connaissance il n'y a pas de "regle du Xhtml" qui t'interdit d'introduire des éléments de style dans ta page.

En passant ce ne sont de toute facon pas des règles mais des recommandations ( la sémantique est importante )



Tu as raison de dire que cela peut paraitre compliqué et que tout cela se ressemble ou parait avoir la même utilité .

Mai sil est important d'adapter ton code a l'usage et c'est ce que je disais dans mon premier post de ce sujet.

Si le site ( si l'on parle de site ) que tu veut faire est de toute façon un truc très léger avec genre 4 pages qui bougeront pas parce que le destinataire du site est une compagnie qui veut juste une e-image corporative, c'est très différent d'un site qui contiendrait beaucoup de contenu evolutif et qui plus est , du contenu dynamique.

Dans le premier cas , tu peux tres bien appliquer une style local a ton image , dans le deuxieme tu as plutot interet à appliquer un style de type class parce que autrement ta maintenance sera plus laborieuse et plus longue.

On peut aussi envisager la troisieme solution qui serait

<div style="text-align:center">mon contenu</div>

.

C'est toujours comme dans tout , il faut adapter l'outil a l'usage, on ne plante pas un crochet a tableau avec une masse mais on ne creuse pas pas une piscine avec une pelle !
Modifié par RoseGrenouille (24 Aug 2006 - 15:40)

Punaise ouais même avec du code de style ça valide en xhtml 1.0 strict ! J'avais jamais testé vu que je trouve tellement plus simple d'utiliser les css avec les id et class du XHTML...

Même dans le cas d'un petit site je trouve bête de mettre du style dans le XHTML. C'est, à mon sens, un peu comme utiliser du javascript à la place du target="blank".

a écrit :
Le fait de mettre <div class="center"> ressemble beaucoup à <div align="center">.

Argh !

C'est fondamentalement différent. Le class="center" apporte une information complémentaire, une petite étiquette anodine, à la structure de la page, tandis qu'align="center" est une information de mise en forme. Or, on s'applique dans la conception d'un site conforme à séparer fond & forme. Et ce n'est pas seulement par principe.

Un des grands avantages que l'on retire de cette séparation fond/forme et de l'utilisation des feuilles de style, c'est la facilité de mise à jour et de modification d'apparence du site produit. Imagine simplement qu'un jour ou l'autre, tu souhaites changer la position des images sur ton site, qui en comporte plusieurs dizaines. Tu ne veux plus les centrer, mais les aligner à droite. Si tu as utilisé align="center" pour réaliser le centrage, te voilà parti pour modifier retrouver les images dans chaque page et modifier pour chacune la valeur de l'attribut align. Si tu as utilisé une classe, tu n'as qu'un mot à changer dans la feuille de style. Et si un jour, tu souhaites cacher toutes les images (le 1er avril), ça te coûtera une ligne de code dans le fichier CSS.

Les codes se ressemblent peut-être, mais ce n'est qu'une apparence ...

OK donc ce n'est pas une mauvaise manière, c'est ce que je voulais savoir. Merci à tous pour vos réponses !