Bonjour à tous,
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
0
#2
-
- Members
-
- 38 messages
Ceinture Orange
Posté 09 June 2010 - 14:44 PM
Généralement moi je fais avec css:
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.
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
-
- Honoris
-
- 1194 messages
Éternel apprenti.
Posté 09 June 2010 - 16:28 PM
Exta, le 09 June 2010 - 14:44 PM, dit :
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.
#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 :
#page{
margin-left:auto;
margin-right:auto;
}
margin-left:auto;
margin-right:auto;
}
#page{
margin:auto;
}
margin:auto;
}
#4
-
- Members
-
- 32 messages
Ceinture Orange
Posté 12 August 2010 - 10:51 AM
merci pour vos réponses, pour le moment je travaille sur un autre site mais dès que je me remets sur celui ci, je reviens vers vous.
#5
-
- Honoris
-
- 3827 messages
Posté 12 August 2010 - 12:37 PM
ne pas oublier de spécifier la largeur si besoin
#page {
width: 800px;
margin: 0 auto;
}
#page {
width: 800px;
margin: 0 auto;
}
#6
-
- Members
-
- 32 messages
Ceinture Orange
Posté 18 August 2010 - 10:52 AM
bonjour,
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.
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
-
- Members
-
- 32 messages
Ceinture Orange
Posté 19 August 2010 - 11:58 AM
bonjour
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 !
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
-
- Moderateur
-
- 600 messages
Posté 19 August 2010 - 12:14 PM
Bonjour,
CSS
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
CSS
body{text-align: center;}
#total {display: inline-block; text-align: left;}
#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
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com
#9
-
- Honoris
-
- 3827 messages
Posté 19 August 2010 - 13:12 PM
les margin auto marchent sur IE, il faut juste préciser la largeur.
#10
-
- Members
-
- 32 messages
Ceinture Orange
Posté 20 August 2010 - 09:49 AM
Bonjour à tous et un grand merci !
Grâce à vos conseils, ça fonctionne enfin dans ie aussi. avec le code :
Bonne journée
Sarha
Grâce à vos conseils, ça fonctionne enfin dans ie aussi. avec le code :
body{text-align: center;}
#page {
width:750px;
display: inline-block;
}
#page {
width:750px;
display: inline-block;
}
Bonne journée
Sarha
#11
-
- Members
-
- 32 messages
Ceinture Orange
Posté 21 August 2010 - 10:32 AM
bonjour à tous
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
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
#13
-
- Moderateur
-
- 600 messages
Posté 21 August 2010 - 14:23 PM
Bonjour,
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
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
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com
#14
-
- Members
-
- 32 messages
Ceinture Orange
Posté 23 August 2010 - 09:53 AM
bonjour
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
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
-
- Members
-
- 32 messages
Ceinture Orange
Posté 23 August 2010 - 11:15 AM
finalement mon site fait de hauteur 410px exactement, d'où l'importance de le centrer aussi verticalement...
#16
-
- Honoris
-
- 3827 messages
Posté 23 August 2010 - 12:21 PM
S'il y a une largeur et une hauteur fixe, c'est simple :
#page {
position: absolute;
width: 750px;
height: 410px;
top: 50%;
left: 50%;
margin-top: -205px;
margin-left: -375px;
}
#page {
position: absolute;
width: 750px;
height: 410px;
top: 50%;
left: 50%;
margin-top: -205px;
margin-left: -375px;
}
#17
-
- Members
-
- 32 messages
Ceinture Orange
Posté 23 August 2010 - 13:44 PM
merci neolao. ça fonctionne ! c'est génial ! il y a juste un truc pas pratique, dans l'affichage en mode création de dream il décale tout sur la droite et rend ainsi difficile l'accès au contenu de la partie gauche, mais c'est pas très grave, il reste toujours la solution de travailler directement sur le code HTML et ou d'indiquer ce code une fois le site entièrement finalisé.
encore merci.
encore merci.
1 utilisateur(s) li(sen)t ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)
