18041 sujets

Questions générales et questions de débutants

Problème de centrage [résolu]

En bloquant sur un tel problème j'pense qu'on peut rationnellement me qualifier de débutant! J'comprends vraiment pas où est le problème pourtant j'ai déjà fait un ou deux sites (vous m'direz ça commence à dater donc j'ai perdu mes bases un peu). Bon j'm'étends mais faut que j'vous explique mon problème.
A vrai dire j'commence tout juste ce site donc il n'y a pas grand chose encore. Le problème c'est tout simplement que je n'arrive pas à centrer ma page.

Voici le code CSS:

body {
widht: 990px;
background-color:#fff;
background-image:url(_img/fond.png);
color: #000000;
font-family: Bailey, Arial, Helvetica, sans-serif;
text-align: center; /* pour corriger le bug de centrage IE */
}

#header {
width: 900px;
padding-bottom: 30px;
}

#foot {
width: 900px;
padding-top: 30px;
}

Voici le résultat:
Modifié par shiryu (01 Sep 2009 - 14:09)
Salut,

Il te suffit de mettre un margin:auto sur le body. Je ne pense pas qu'il soit très conseillé de mettre une largeur à ton body mais je ne suis pas sûr.
Ce que tu peux faire est de mettre une div qui englobe tout le contenu du style:


<div id="contenu">
<!-- Ici le reste de ton site -->
</div>


et en CSS:

#contenu{
width: 990px;
margin:auto;
background-color:#fff;
background-image:url(_img/fond.png);
color: #000000;
font-family: Bailey, Arial, Helvetica, sans-serif;
text-align: center; /* pour corriger le bug de centrage IE */
}


Fait attention car le mot "width" était orthographié "widht" dans ton code précédent...Peut être la source de ton problème
En tout cas merci pour ton aide!

ps: désolé pour le double post mais j'voulais pas passer pour un rapia en d'mandant de l'aide sans dire une petit merci ^^
Voilà la source XHTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link type="text/css" href="styles.css" rel="stylesheet" />
<link type="text/css" href="bottom.css" rel="stylesheet" />

<script type="text/javascript" src="PikaChoose_2.8/js/jquery.js"></script>
<script type="text/javascript" src="PikaChoose_2.8/js/pikachoose-min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
});
-->
</script>


</head>

<body>

<div id="contenu">

<div id="header">
<img src="_img/header.png" alt="my-creations"/>
</div>

<div id="menu">
</div>

<div id="corps">

<ul id="pikame">
<li><img src="_img/signatures/america.png"/><span></span></li>
<li><img src="_img/signatures/grunge.png"/><span></span></li>
<li><img src="_img/signatures/look-at-me.png"/><span></span></li>
<li><img src="_img/signatures/Magnifique.png"/><span></span></li>

<li><img src="_img/signatures/sony-ericson.png"/><span></span></li>
<li><img src="_img/signatures/spyro.png"/><span></span></li>
<li><img src="_img/signatures/storm.png"/><span></span></li>
<li><img src="_img/signatures/tournoi3.png"/><span></span></li>

<li><img src="_img/signatures/wonderful.png"/><span></span></li>
</ul>

</div>

<div id="foot">
<img src="_img/foot.png" alt="my-c"/>
</div>


</div>

</body>
</html>
J'ai copié/collé ton code et mis un style dessus qui est le suivant:

#contenu{
width:900px;
margin:auto;
}


Ça fonctionne parfaitement, aurais-tu une page en ligne au cas où ? Car cette astuce à toujours marché et là aussi...
Peux tu mettre aussi ton code entre les balises [ code] [ /code] (sans espace devant) ?

Sinon met ici ton CSS aussi, peut être qu'une règle en écrase une autre...
J'ai modifié la taille de mon <body> avec un width de 890 et la ça marche bien. Il n'y a plus la répétition du fond sur la droite. A présent on peut voir que le fond ne s'étend pas sur toute la hauteur. Il y a comme une marge en haut.

XHTML:
#contenu{ 
width: 890px; 
margin:auto; 
background-color:#fff; 
background-image:url(_img/fond.png); 
color: #000000; 
font-family: Bailey, Arial, Helvetica, sans-serif; 
text-align: center; /* pour corriger le bug de centrage IE */ 
} 

#header {
	width: 900px;
	padding-bottom: 30px;	
}

#foot {
	width: 900px;
	padding-top: 30px;
}


CSS:
#contenu{ 
width: 890px; 
margin:auto; 
background-color:#fff; 
background-image:url(_img/fond.png); 
color: #000000; 
font-family: Bailey, Arial, Helvetica, sans-serif; 
text-align: center; /* pour corriger le bug de centrage IE */ 
} 

#header {
	width: 900px;
	padding-bottom: 30px;	
}

#foot {
	width: 900px;
	padding-top: 30px;
	background-image:url(_img/foot.png)
}


De plus, serais-tu comment faire afin que l'image de mon footer soit cadré de manière à c'qu'elle dépasse légèrement sur la droite et la gauche? Je sais pas si j'me suis bien expliqué la :s
Oups désolé j'ai fait une tite faute quand j'ai copié le XHTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link type="text/css" href="styles.css" rel="stylesheet" />
<link type="text/css" href="bottom.css" rel="stylesheet" />
		
		<script type="text/javascript" src="PikaChoose_2.8/js/jquery.js"></script>
		<script type="text/javascript" src="PikaChoose_2.8/js/pikachoose-min.js"></script>
		<script language="javascript">
			<!--
			$(document).ready(
				function (){
					$("#pikame").PikaChoose();
				});
			-->
		</script>


</head>

<body>

<div id="contenu"> 

<div id="header">
<img src="_img/header.png" alt="my-creations"/>
</div>

<div id="menu">
</div>

<div id="corps">

<ul id="pikame">
		<li><img src="_img/signatures/america.png"/><span></span></li>
		<li><img src="_img/signatures/grunge.png"/><span></span></li>
		<li><img src="_img/signatures/look-at-me.png"/><span></span></li>
		<li><img src="_img/signatures/Magnifique.png"/><span></span></li>

		<li><img src="_img/signatures/sony-ericson.png"/><span></span></li>
		<li><img src="_img/signatures/spyro.png"/><span></span></li>
		<li><img src="_img/signatures/storm.png"/><span></span></li>
		<li><img src="_img/signatures/tournoi3.png"/><span></span></li>

		<li><img src="_img/signatures/wonderful.png"/><span></span></li>
	</ul>

</div>

<div id="foot">
<img src="_img/foot.png" alt="my-c"/>
</div>


</div> 

</body>
</html>
Bon j'ai réussi à régler mes quelques problèmes en feintant un peu... Puis j'ai aussi avancé en rajoutant un menu déroulant. Mon seul problème, c'est que quand on passe la souris sur "liens" et que se déroule les liens, ils apparaissent en dessous du diaporama -_-

M'enfin voilà le résultat pour l'instant:
http://img221.imageshack.us/i/sanstitre3cpz.png/

Merci à toi N-J, tu m'as bien aidé.
Sujet clos
Aller à