28173 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement d'image : Comment faire ?

Bonjour,

J'ai commencé cet après-midi à refaire plusieurs pages de mon site internet afin d'essayer de les mettre en conformité avec le standard XHTML Strict et le CSS.
Après plusieures modifications réussies, je me demande à présent comment aligner (oui je sais text-align: center dans le css) une image ?
Pour le texte, il y a souvent des <p> donc il suffit de définir le p dans le css mais pour l'image c'est un img.

Avant j'avais :
<center<img src='http://www.bender-fr.info/Banniere.jpg' alt=\"Bannière Bender\" /></center>

Et maintenant j'aimerais centrer cette image sans la balise <center>.
Merci de ne pas me dire de chercher ailleurs car j'ai déjà fait des recherches dans le forum et google mais cela est tellement simple.

A première vue, je pense qu'il faut définir un div ? mais je n'en suis pas tout à fait sûr, puisque ce n'est "que" pour "une" image.

Merci d'avance.

Cordialement,

Christopher Bender
www.bender-fr.info

P.S. N'allez pas faire la vérification si ma page est valide XHTML Strict car elle ne l'est pas encore Smiley smile
Modifié par Mister_ben (17 Apr 2006 - 14:42)
salut

je propose:

#banniere {
width: largeur_de_ton_image;
height: longueur_de_ton_image;
margin-left: auto;
margin-right: auto;
background-image: url(Banniere.jpg);
background-repeat: no-repeat;
}


et

<div id="banniere"> </div>



@+
Administrateur
Hello Mister_ben et bienvenue parmi nous Smiley smile

Tu as au-moins deux solutions à ma connaissance :
1- celle que t'a proposé -fredo-, à savoir placer ton image dans la feuille de style CSS. A condition que ce soit une image de décoration
2- placer ton image dans un élément de type bloc (<div> par exemple) et d'appliquer un text-align : center à ce <div>. A condition que ce soit une image de contenu.

Bref, cela dépend donc si l'image est pertinente (contenu) ou si elle n'est qu'une décoration.
Merci à vous 2.

J'ai pris la solution n°1, à savoir un div pour l'image.
Si maintenant je veux faire tout un décor en arrière-plan (un design) fait de plusieurs images (ce qui n'est déjà pas facile à concevoir sur le papier, faut avoir de l'imagination), je devrai faire un div pour chaque image ?

#banniere-du-haut {
}

#banniere-gauche-1 {
}

#banniere-gauche-2 {
}

Répondez si vous avez le temps car je l'avoue, je n'ai pas encore cherché pour ce cas. Merci d'avance.

Christopher
J'ai vu ailleurs une autre possibilité, qu'en pensez-vous ?

Extrait du Site du 0
a écrit :

<p>
Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
<img src="images/hawai.jpg" alt="Photo de Hawaii" title="Ca fait envie hein ?" />
</p>


Est-ce une bonne solution ? Il y a un attribut alt contrairement à la solution proposée ci-dessus.

Merci d'avance
Administrateur
Mister_ben a écrit :
J'ai vu ailleurs une autre possibilité, qu'en pensez-vous ?

Extrait du Site du 0
<p>
Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
<img src="images/hawai.jpg" alt="Photo de Hawaii" title="Ca fait envie hein ?" />
</p>


C'est la solution 2 que j'ai proposé : placer ton image (<img>) dans un <div> et y appliquer un text-align center.

Comme je l'ai dit, il y'a deux façons d'inclure des images :

Premier cas : l'image est décorative.

Il peut s'agir d'illustration de fond, de bordure imagée, d'arrondi ou toute autre décoration qui n'apporte rien au contenu de la page.

Dans ce cas, il faudrait éviter de faire apparaître cette image dans le code HTML (<img>) mais privilégier la séparation fond/forme en gérant cette image décorative à l'aide d'une feuille de style CSS séparée.

Cela permet de ne pas avoir d'éléments de structure qui vont inutilement allourdir le code ou rendre son interprétation plus difficile.


Second cas : l'image apporte du contenu.

A partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton, un logo), il faudrait que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.

Il faut donc faire apparaître l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant.

Est-ce une bonne solution ? Il y a un attribut alt contrairement à la solution proposée ci-dessus.

Merci d'avance
Modifié par Raphael (17 Apr 2006 - 09:33)
Salut,

Je pense que cette solution est la même que celle que te proposait Raphaël, à savoir placer ton image dans un élément de type "bloc". L'attribut "alt" est là pour proposer un texte alternatif aux personnes qui ne verront pas ton image. Cet attribut est obligatoire.

@++

Edit: oups! Grillé! Smiley decu Smiley confused
Modifié par Tony_M (17 Apr 2006 - 09:38)
Sujet clos
Aller à