Forums Développement Multimédia

Aller au contenu

centrer mon site

CODE HTML CSS

16 réponses à ce sujet

#1 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

Posté 09 June 2010 - 11:30 AM

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

#2 Exta_design

    Ceinture Orange

  • Members
  • PipPipPip
  • 38 messages

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.

#3 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 09 June 2010 - 16:28 PM

Voir le messageExta, 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.

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;
}
Peut avantageusement s'écrire :
#page{
margin:auto;
}
Bien entendu sur ce bout de code cela n'aura pas d'impact mais sur une feuille complète… ;)

#4 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 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;
}
 


#6 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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.

Modifié par sarha, 18 August 2010 - 10:53 AM.


#7 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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 !

#8 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 19 August 2010 - 12:14 PM

Bonjour,

CSS
body{text-align: center;}
#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

#9 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 19 August 2010 - 13:12 PM

les margin auto marchent sur IE, il faut juste préciser la largeur.

#10 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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 :

body{text-align: center;}


#page {
width:750px;
display: inline-block;

}

Bonne journée
Sarha

#11 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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

#12 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 21 August 2010 - 13:03 PM

est-ce qu'il a une hauteur fixe ?

#13 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 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
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#14 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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

#15 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 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;
}
 


#17 sarha

    Ceinture Orange

  • Members
  • PipPipPip
  • 32 messages

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.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP