Centrer mon wrapper dans css

Bonjour

Je m'entraîne aux CSS, voir comment ça marche tout ça

J'ai fait un petit layout (je sais pas comment dire en français... une mise en page css sans texte quoi, avec différentes couleurs pour bien voir les positionnements....

J'aimerais que le site soit centré (verticalement et horizontalement).

Donc c'est un wrapper avec deux colonnes dedans, voici mon code:

a écrit :


body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#wrapper {
margin: 0 auto;
width: 900px;
height: 300px
}

#colonnegauche {
width: 300px;
height: 300px;
float: left;
background: blue;
}

#colonnedroite {
float: right;
height: 300px;
width: 600px;
background: green;
}

Le wrapper est en fait le conteneur des deux colonnes.

Mais avec ce code, mes deux colonnes sont bien ensembles, centrées horizontalement, mais pas centrées verticalement. Elles se collent en haut de la page.

Quelqu'un pourrait m'aider à me débloquer?

A coup de margin-top et de margin-bottom, avec des pourcentages, c'est faisable.

Bonjour Caribouuu, c'est normal. Ton conteneur est positionné en haut de la page et donc, tes colonnes aussi du même coup !

Va fouiller dans la faq, tu vas trouver une réponse à ton problème


http://forum.alsacreations.com/faq/

Bienvenue sur le forum, es-tu du Québec ?

Merci de ton aide xhtmlboys

Les pourcentages sont utiles? Sachant que mon conteneur (wrapper) a une hauteur fixe? (height: 300px;)

Oups Mabelle, j'avais pas lu ta réponse entre temps, je vais voir ton lien de suite, thanx

(non je ne suis pas du quebec juste une chanson des pixies que j'aime bien )
Modifié par Caribouuu (26 Oct 2008 - 16:37)

Les pourcentages servent a faire des proportions de tailles.
Si wrapper est dans body, et que tu dit qu'il est a 15% du haut, cela voudra dire : Wrapper est a 15% du haut par rapport a body, tu comprends ?
Ne les mets pas sur la taille de tes éléments, attention !
Je n'ai pas chercher, la, on va dire qu'avec 30% en haut et 20% en bas, c'est centré : tu auras donc :

#wrapper
{
   margin: auto;
   margin-top : 30%;
   margin-bottom : 20%;
}

(Code pas testé, si jamais sa marche pas, je m'en excuse, mais il me semble que je faisais comme ça...).
Modifié par Xhtml_boys (26 Oct 2008 - 16:42)

Finalement j'ai trouvé dans la faq la méthode dite des "marges négatives", et ça marche, même si c'est déconseillé pour des raisons que je ne maîtrise pas encore

Merci de votre aide.

Xhtml_boys a écrit :
Les pourcentages servent a faire des proportions de tailles.
Si wrapper est dans body, et que tu dit qu'il est a 15% du haut, cela voudra dire : Wrapper est a 15% du haut par rapport a body, tu comprends ?
Ne les mets pas sur la taille de tes éléments, attention !
Je n'ai pas chercher, la, on va dire qu'avec 30% en haut et 20% en bas, c'est centré : tu auras donc :

#wrapper
{
   margin: auto;
   margin-top : 30%;
   margin-bottom : 20%;
}

(Code pas testé, si jamais sa marche pas, je m'en excuse, mais il me semble que je faisais comme ça...).

J'ai essayé ton code mais il ne marche pas non plus... c'est pas grave la méthode de la faq fonctionne
Merci

Caribouuu a écrit :
Finalement j'ai trouvé dans la faq la méthode dite des "marges négatives", et ça marche, même si c'est déconseillé pour des raisons que je ne maîtrise pas encore

Ça marche mais c'est déconseillé... parce que ça marche pas toujours bien, parce que dans certains cas ça pose problème, parce que c'est limité comme solution.

Limite 1: tu dois connaitre à l'avance la hauteur de ton conteneur. Et ça, pour du Web c'est une sacrée limite. Rares sont les sites qui peuvent se permettre de figer la hauteur des conteneurs.

Limite 2: si la hauteur de la zone de visualisation du navigateur (qui dépend de la taille de la fenêtre, des barres d'outils éventuelles affichées, de la résolution de l'utilisateur, etc.) est inférieure à la hauteur du conteneur, les parties qui «dépassent» risquent d'être masquées et de plus inaccessibles (pas de scroll dans certaines directions).

Donc, on laisse tomber cette technique trop problématique et on opte pour quelque chose de plus fiable:
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html

Bonne continuation.

Merci Florent V, j'avais vu justement vu un site web centré verticalement et horizontalement, et en regardant le code source j'avais trouvé étonnant qu'il utilise des "tables". C'était donc en fait un choix réfléchi...

Je vais voir ça