Bonjour,

J'avais l'habitude d'afficher mes images ainsi :

et cela fonctionne sous le header, et à droite du menu gauche du site que je prépare :

<CENTER><TABLE><TR><TD>
<IMG src="../photos/lecrotoy/cretoy5.jpg" border="0" alt="Photo cabines de plage">
</TD></TR></TABLE></CENTER>

Mais il vaut mieux mettre "center" dans la feuille de css.

Cette écriture ci-dessous ne fonctionne pas l'image se retrouve en bas de page, sous le menu gauche.


table.tabcentre { margin-left: auto; margin-right: auto; }

<table class="tabcentre" >
<TR><TD>
<IMG src="../photos/lecrotoy/cretoy5.jpg" border="0" alt="Photo cabines de plage">
</TD></TR></table>

Sympa de m'apporter une aide pour bien aligner cette photo les autres suivront le même moule

A bientôt.
Régis

Il faut ajouter
text-align:center;
Mais c'est encore mieux dans un div que dans un tableau ;-)

Salut Régis,

Les { margin-left: auto; margin-right: auto; } ne fonctionnent pas sous IE... et c'est un bug connu.
La meilleure manière de contourner cela est de mettre un <div> avec un "text-align:center} pour englober ton tableau, si tu tiens vraiment au tableau.
Dans ce cas, il faudra définir text-align:left pour la table pour éviter d'avoir tout le contenu centré.

Mais les tableaux devraient idéalement être réservés aux données "tabulaires" comme des colonnes de chiffres/texte et non pour la présentation graphique.

Dan

Merci Fight et Dan,

Mais comment se passer de tableau pour afficher et centrer une image ...
J'espère que ma question n'est pas trop basique mais pour l'instant je bloque !

a bientôt

Régis

Plus amples explications : http://www.alsacreations.com/articles/centrer/

Merci,

Au fait, je ne vois pas comment img est relié à la feuille de style avec cette écriture.



img {
margin-left: auto;
margin-right: auto;
}


html
<img src=" alt="" />

et pourquoi la phrase html se termine par /> et non pas par >

Merci pour vos réponses.

Régis

Pour l'attribut /> c'est dans le Xhtml etant donner que la balise <img> na pas de balise de fin genre </img> en Xhtml tu remplace </img> ( qui n'existe pas ) par <img blablabla />

Le reste je sais pas

Bonjour Régis,

Des attributs de feuilles de style peuvent se "transmettre" de plusieurs façons.

Avec un élément toutes les images de tes pages auront ces caractéristiques.

Avec classtoutes les images, sur toutes les pages, auxquelles tu attribueras cette classe auront ces caractéristiques.

Avec idune seule image par page peut se voir attribuer ces caractéristiques.

Ces exemples sont applicables de la même manière à tous les éléments d'une page.

Je n'ai pas ajouté le / de fermeture : en HTML il ne faut pas l'utiliser, tes pages ne seraient pas validées. C'est à utiliser (et obligatoire) seulement en XHTML.

En fait, si, ça existe. En XML, donc en XHTML également, les lignes suivantes sont parfaitement équivalentes:
Évidemment, la première version semble plus lisible et plus pratique. Et puis un navigateur ne comprenant pas XML refusera probablement d'entendre parler d'une balise fermante </img>, alors que la plupart supportent sans sourciller <img/>.
Astuce : laissez un espace avant le /, pour éviter des soucis.