[Résolu] Centrer une image - Malgrès tout mes effort elle ne veut pas :( par ice13om - page 1

Bonsoir tout le monde

Je suis en train de refaire le design de mon site et j'ai un petit problème de centrage d'image.. En effet comme vous pouvez-le voir sur l'image dessous mon image est à gauche.

J'ai beau essayer tout ce que je connais (merci cours zéros

) rien n'y fait. Pouvez-vous m'aider ? Voilà le code que j'utilise. Je sais que c'est long à lire, désolé par avance.

Pour la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>Site d'Ice13om -- Edito</title>
<meta name="Description" content="L'Edito du jour" />
<meta name="Keywords" content="edito,ice13om" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design par défaut" href="defaut.css" />
<link rel="alternate stylesheet" media="screen" type="text/css" title="Design 2" href="design2.css" />
</head>

<body>
<div class="couleur">
<div class="bidouille_ie">

<div id="top1"></div>

<div id="top2"></div>

</div>
<div id="menu">
<p class="sommaire">Sommaire</p>

<ul class="dans_menu">
<li><a href="edito.php" title="L'Edito..">Edito</a><br /><br /></li>
<li><a href="3d.php" title="Mes productions 3D..">3D</a></li>
<li><a href="annuaire.php" title="L'Annuaire inversé gratuit..">Annuaire</a></li>
<li><a href="dbz-hamygoddess.php" title="Des dessins que j'aime bien..">Dessins</a></li>
<li><a href="drol_blagues.php" title="Divers choses marrantes..">Drôlistique</a></li>

<li><a href="ff1.php" title="Mon petit dossier Final Fantasy..">Final Fantasy</a></li>
<li><a href="linux_presentation.php" title="Des trucs sur Linux..">Linux</a></li>
<li><a href="logiciels.php" title="Des logiciels sympas..">Logiciels</a></li>
<li><a href="lyrics.php" title="Plein de paroles de chansons..">Lyrics</a></li>
<li><a href="jeux.php" title="Des jeux marrants..">Jeux</a></li>
<li><a href="ma_vie.php" title="Je parle de ma vie..">Ma Vie</a></li>

<li><a href="photos.php" title="Des photos que j'ai prises..">Mes Photos</a></li>
<li><a href="programmes.php" title="Des petites codes..">Programmation</a></li>
<li><a href="smileys.php" title="Smileys">Smileys</a><br /><br /></li>
<li><a href="liens.php" title="La page des liens..">Liens</a></li>
<li><a href="livreor.php" title="Venez signer mon Livre d'Or..">Livre d'Or</a></li>
<li><a href="mailto:ice@ice13om.com?subject=Un ptit coucou ^^" title="Ecrivez-moi..">M'écrire</a></li>

</ul>
<p><br /><br />
<a href="http://validator.w3.org/check?uri=referer"><img class="no_border"
src="http://www.w3.org/Icons/valid-xhtml11"
alt="Valid XHTML 1.1 !" height="31" width="88" title="Valid XHTML 1.1 !"/></a>
<br /></p>
<img class="no_border" src="vcss.png" alt="Valid CSS !" title="Valid CSS !"></img>

<p class="centre"><strong>6607</strong><br />visites depuis le 24/11/2001</p>

</div>
<div id="main">

<h1> Edito du 11/11/2005<br /><br /></h1>
<h2>Redémarrage du site et nouvel appartement

<br /><br /></h2>
<p>Bonjour

Voilà enfin une mise à jour du site après plusieurs blablabla..<br /><br /><br />

Bon, il ne me reste plus qu'à vous souhaiter une belle journée et vous dire à bientôt les amis

<br /><br /><br /><br /></p>

<p class="centre">A coucou les gens

<br /><img class="no_border" src="masckot_index.gif" alt="Maskotte du site"></img><br /><br /><br /></p>

<p class="droite">Un truc à me dire ? Ecrivez-moi : <a href="mailto:ice@ice13om.com" title="Cliquez pour m'écrire">ice@ice13om.com</a><br /><br /><br /></p>

<p class="centre">|| <a href="ex_edito.php" title="Accéder à tous les éditos..">Accéder à tous les éditos</a>
|| <a href="mailto:ice@ice13om.com?subject=Inscription News Letter"
title="Inscription à la News Letter..">Inscription à la News Letter</a> ||
<a href="mailto:ice@ice13om.com?subject=Desinscription News Letter"
title="Desinscription de la News Letter..">Desinscription de la News Letter</a> ||</p>

</div>
</div>
</body>

</html>

Pour le CSS :

body
{
text-align:left;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
background-color:#DBE7F1;
}

#top1
{
float:left;
height:67px;
width:513px;
background-image: url("logo.jpg");
background-repeat: no-repeat;
background-position: center;
margin-top:0px;
}

#top2
{
height:106px;
background-image: url("gradient.jpg");
background-repeat: repeat-x;
margin-top:0px;
}

#menu
{
margin-left:5px;
border: 1px solid #A9C4E1;
float:left;
width:110px;
background-color:#DBE7F1;
padding:5px;
}

#main
{
margin-right:5px;
border: 1px solid #A9C4E1;
margin-left:135px;
padding:5px;
background-color:#E3EAF1;
/*background-color:#DBE7F1;*/
}

h1
{
text-align:center;
font-size:x-large;
font-weight:bold;
color:black;
}

h2
{
text-align:center;
font-size:large;
font-weight:bold;
color:black;
}

.sommaire
{
text-align:center;
font-size:medium;
font-weight:bold;
color:black;
}

.no_border
{
border: 0px;
}

.couleur
{
background-color:#DBE7F1;
}

.centre
{
text-align:center;
}

.droite
{
text-align:right;
}

.bidouille_ie
{
background-image: url("gradient.jpg");
background-repeat: repeat-x;
}

.tab_centre
{
margin:auto;
}

.c
{
margin-left:50px;
margin-right:50px;
color:navy;
text-align:left;
background-color: #FFFFFF;
}

.dans_menu
{
list-style-position: inside;
list-style-type:none;
padding: 0;
margin:0;
}

.dans_menu a
{
color: #000000;
}

.dans_menu a:hover
{
background-color: #E3EAF1;
color: black;
}

Alors quelques explications : Je tient particulièrement à garder mes 2 div top1 et top2. En effet c'est si je ne les garde pas je vais être embêter pour changer le design de mon site à la volé comme je le souhaite. Avez-vous des idées ? En tout cas merci beaucoup pour votre attention

ice13om

8 décembre 2005 à 21:52:05

ljam

8 décembre 2005 à 22:03:36

Salut,

Je n'ai pas lu tout ton code mais si tu veux placer ton image en utilisant la propriété background-image dans ton fichier CSS, alors il suffit de spécifier une largeur à ton div et d'ajouter un "margin:auto;"

@+++

Anonyme

8 décembre 2005 à 22:10:47

mets une balise

<center>
<!-- url de ton image j'espère au moin que tu sais inserer ça

-->
</center>

8 décembre 2005 à 22:11:08

Mon design est fait pour être extensible, si je donne une largeur à mon div ça va poser problème non ?
Sinon pour le code html je ne peux pas l'utiliser car mon image est introduite par le fichier CSS..

Zazou

8 décembre 2005 à 22:33:27

Essai de donner une largeur en pourcentage et applique la méthode

margin: auto;

8 décembre 2005 à 22:42:37

Citation : Zazou

Je viens de le faire et ça marche, mais seulement sous Firefox, IE n'en veut pas

une idée pour IE ? En tout cas merci beaucoup

ps : Pour l'histoire j'avais mis un width=la largeur de mon image, donc forcément le margin ne marchait pas

Merci merci

neoxx78

8 décembre 2005 à 22:42:48

#top1
{
float:left;
height:67px;
width:513px;
background-image: url("logo.jpg");
background-repeat: no-repeat;
background-position: center;
margin-top:0px;
}

"top1 c'est bien ton image en question ? :-°

Si c'est le cas enlève le float : left ! et mets margin : auto !

Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal

9 décembre 2005 à 0:06:02

Citation : neoxx78

#top1
{
float:left;
height:67px;
width:513px;
background-image: url("logo.jpg");
background-repeat: no-repeat;
background-position: center;
margin-top:0px;
}

"top1 c'est bien ton image en question ?
Si c'est le cas enlève le float : left ! et mets margin : auto !

Je viens de résoudre le problème

En fait ça ne venait pas de mon float:left, j'avais un doublon qui me décalait le truc du haut.. Pour être plus précis il y avait 2 erreurs mais j'ai tellement trifouillé que je ne sais plus exactement ce que c'était. En tout cas le problème est résolu, merci tout le monde pour votre aide

A bientôt

Centrer une image

Malgrès tout mes effort elle ne veut pas :(

Centrer une image

Supprimer

Modérer

Signaler le message aux modérateurs