

#1
Posté 09 June 2010 - 11:30 AM
J'ai déjà développé mon site et aujourd'hui je souhaite l'améliorer et notamment le centrer dans la page. Que dois je faire exactement ?
Un grand merci d'avance.
Sarah
#2
Posté 09 June 2010 - 14:44 PM
Dans mon HTML j'ai une div qui contient toutes les autres:
<body>
<div id="page">
<div id="header">
</div>
<div id='menu">
</div>
etc..
</div>
Et ensuite je vais dans la feuille de style et je met ceci:
#page{
margin-left:auto;
margin-right:auto;
}
Et donc normalement ca te centre le site.
#3
Posté 09 June 2010 - 16:28 PM
Exta, le 09 June 2010 - 14:44 PM, dit :
#page{
margin-left:auto;
margin-right:auto;
}
Et donc normalement ca te centre le site.
Bonjour.
Effectivement, ce code centre le site. Je souhaite juste attirer l'attention sur le poids d'une CSS. Moins on y met de caractères, moins lourde elle est et plus rapidement le site se charge.
Prenez l'habitude d'écrire vos CSS de manière concentrée.
Exemple :
margin-left:auto;
margin-right:auto;
}
margin:auto;
}

#4
Posté 12 August 2010 - 10:51 AM
#5
Posté 12 August 2010 - 12:37 PM
#page {
width: 800px;
margin: 0 auto;
}
#6
Posté 18 August 2010 - 10:52 AM
je viens d'essayer avec vos conseils. tout fonctionne bien pour firefox et pas pour IE. Exta quand tu expliques qu'il faut dans le HTML indiquer une div qui contient toutes les autres, quelles autres div doivent être indiquées par exemple ? et la balise </div> doit elle être tout à la fin du code ?
merci d'avance pour vos réponses.
ps : pour vous préciser que mon site a été entièrement fait sous forme de tableau.
Modifié par sarha, 18 August 2010 - 10:53 AM.
#7
Posté 19 August 2010 - 11:58 AM
j'ai trouvé ici même dans "tutoriels" une explication :
"La spécification du w3c, dit que pour centrer un élément de type bloc ( comme div ), il faut mettre margin-left:auto;margin-right:auto;, mais ie n'est pas capable de comprendre cela, text-align:center; est utilisé pour centrer le texte, dans la spécification, or ie, centre tout type d'élement avec, qu'à cela ne tienne : #total {
margin-left:auto;
margin-right:auto;
text-align:center;
}
"
mais ça ne fonctionne toujours pas dans ie. si quelqu'un a une idée un grand merci d'avance !
#8
Posté 19 August 2010 - 12:14 PM
CSS
#total {display: inline-block; text-align: left;}
N'oubli pas de mettre un text-align:left; sur les éléments qui se trouvent juste en dessous du body.
Ça doit fonctionner pour tous les navigateurs.
Ren
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com
#9
Posté 19 August 2010 - 13:12 PM
#10
Posté 20 August 2010 - 09:49 AM
Grâce à vos conseils, ça fonctionne enfin dans ie aussi. avec le code :
#page {
width:750px;
display: inline-block;
}
Bonne journée
Sarha
#11
Posté 21 August 2010 - 10:32 AM
maintenant que mon site est centré horizontalement, je cherche à le centrer verticalement. il existe à priori "display: table-cell" pour cela mais je ne sais pas bien comment l'utiliser et ce n'est peut être pas la meilleure solution. qu'en pensez vous ?
merci d'avance pour vos réponses
sarha
#12
Posté 21 August 2010 - 13:03 PM
#13
Posté 21 August 2010 - 14:23 PM
n'y a-t-il pas une URL de test pour qu'on puisse au moins apprécier la construction du site et te donner immédiatement le bon conseil ?

Ren
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com
#14
Posté 23 August 2010 - 09:53 AM
oui mon site a une hauteur fixe de 500px.
et non pour le moment il n'est pas en ligne.
merci d'avance pour vos réponses.
sarha
#15
Posté 23 August 2010 - 11:15 AM
#16
Posté 23 August 2010 - 12:21 PM
#page {
position: absolute;
width: 750px;
height: 410px;
top: 50%;
left: 50%;
margin-top: -205px;
margin-left: -375px;
}
#17
Posté 23 August 2010 - 13:44 PM
encore merci.
1 utilisateur(s) li(sen)t ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)