28220 sujets

CSS et mise en forme, CSS3

[RESOLU] Comment centrer mon image?

Bonsoir ( ou bonjour selon Smiley smile )
J'ai un peu retourner le problème dans tout les sens, je n'y arrive pas.
Je ne vois pas ce qui cloche et pourtant je suis sûr que c'est tout bête... Smiley ohwell
Mon illustration n'est pas centré sur la page.
Le lien vers la page test: http://lagardedamakna.free.fr/index0
Le CSS:

body {
margin: 0;
padding: 0;
background-color: #F0E4C8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #980000;
}
#conteneur {
margin: 0 auto;
width: 750px;
left: 50%;
}
#centre {
text-align: justify ;
text-indent: 2em ;
line-height: 1.3em ;
padding: 2em 2em 2em 2em;
}
#pied {
height: 40px;
text-align: center;
font-size: 0.75em;
line-height: 1.3em;
background-color: #F0E4C8;
}
h3{
text-align: center;
font-size: 1em;
}
a {
color: #980000;
text-decoration: none;
}
a:hover {
color: #980000;
text-decoration: underline;
}

Le code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Bienvenue</title>
<meta name="author" content="ArtNo" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> 
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="Dofus,MMORPG,MMOG,Ankama,jeux PC, jeux massivement multi-joueurs,jeu en ligne, rpg, flash, artno, guilde, garde" />
<meta name="Category" content="Games" />
<meta name="description" content="Dofus - Site et forum de discussion sur le MMORPG (jeux massivement multi-joueurs)" />
<meta name="Robots" content="index,follow,all" />
<meta name="Revisit-after" content="3 days" />
<link rel="stylesheet" type="text/css" href="styles1.css" />
</head>
<body>
<div id="conteneur">
<div align="centre">
<br/>
<img src="/images/boutons/imageindex1.jpg"/><br/>
<h3>" A l'origine du Monde fût le Tofu... Et les Dieux surent alors qu'il avait vraiment déconnés!"</h3>
<h3>- Le Sage Dahreu Wine -</h3><br/>
</div>
<div id="pied">Réalisation du site <a href="mailto:lagardedamakna&#64;no&#45;log&#46;org">ArtNo</a> © 2005 <a href="mailto:lagardedamakna&#64;no&#45;log&#46;org">La Garde d'Amakna</a>. Tous droits réservés.<br/>
Les images et textes issus de <a href="http://www.dofus.com/fr/">Dofus</a> sont © 2004 <a href="http://www.ankama-studio.com/fr/accueil.html">Ankama Studio</a>.Tous droits réservés.
</div>
</div>
</body>
</html>

Merci par avance pour votre aide Smiley biggrin
Modifié par Artno (25 Nov 2005 - 17:48)
Administrateur
Salut, il y'a plusieurs choses incompréhensibles.

Si tu veux utiliser la propriété "align", la valeur "centre" n'extsie pas. La bonne valeur est "center".

Cependant, je te conseille d'éviter les éléments de mise en page (align) directement dans le code HTML.

Tu peux simplement appliquer un text align : center sur ce div en CSS
Raphael a écrit :
Salut, il y'a plusieurs choses incompréhensibles.

Si tu veux utiliser la propriété "align", la valeur "centre" n'extsie pas. La bonne valeur est "center".

Cependant, je te conseille d'éviter les éléments de mise en page (align) directement dans le code HTML.

Tu peux simplement appliquer un text align : center sur ce div en CSS


Merci de ta réponse Raphael. Je vais déjà essayer de modifier ça et je verrais ce que cela donne.

Au départ je ne m'y étais pas du tout pris comme ça mais l'image ne s'affichait pas ( je pense que je la mettais en arrière fond alors que j'en avais déjà un) et un ami m'avait conseillé de placer cette valeur dasn le code html. Il débute comme moi le css et on essaye de s'entraider un peu comme on peu Smiley lol

Je vais être HS mais je viens de finir ton livre, j'ai énormément appris. Presque " trop" car en partant de zéro j'ai du mal a tout " garder". Je vais le relire tranquillement cela devrait m'aider Smiley smile
En tout cas un excellent livre que je conseille et qui m'a donné envie de me donner encore plus dans les standards et d'envisager de nouvelles lectures à ce sujet Smiley cligne
Raphael a écrit :
Cependant, je te conseille d'éviter les éléments de mise en page (align) directement dans le code HTML.
Tu peux simplement appliquer un text align : center sur ce div en CSS


Nickel Raphael, ça fonctionne simplement en retirant l'éléments de mise en page dans le code html et en appliquant dans le css:
text-align: center;


Merci à toi Smiley biggrin

PS: J'avais raison dans le post initial: c'était tout bête, il suffisaitd e demander de centrer pour... centrer Smiley biggol
Par contre, je trouve que l'intitulé "text-align" induit un peu en erreur quand on veut centrer une image et non pas... un texte!
Modifié par Artno (25 Nov 2005 - 17:50)
Sujet clos
Aller à