28172 sujets

CSS et mise en forme, CSS3

Margin : auto/marche horizontalement , mais verticalement que faire??

Bonsoir,

Voila je cherche a faire un margin auto " vertcical" de tout mon contenu (un div #global"). En fait mon bloc fait 1024x500 et pour les résolutions supérieurs il se centre horizontalement grace au "margin : auto mais il est collé en permanence en haut de la fenetre et je voudrais qu'il de décale verticalement quand les gens ont une résolutions plus élevée. Existe-t-il une propriété css qui gère ça correctement (sans passer par un tableau, car il s'agit pas de données). Merci beaucoup

Jeandalement
Salut jeanda et bienvenue Smiley cligne ,

normalement pour centrer verticalement le contenu d'un bloc il suffirait de lui affecter un display: table-cell; et un vertical-align: middle;

Malheureusement cela n'est reconnu ni par IE6 ni par IE7...

Donc même si les tableaux ne devraient servir qu'aux données tabulaires, une balise <table> ne contenant qu'une cellule reste encore le moyen le plus simple de faire ce que tu veux Smiley smile !

Pour plus d'infos tu peux jeter un oeil à ce point de la FAQ.

A+
Modifié par Heyoan (31 May 2008 - 00:39)
Salut Heyoan,
Et merci pour cette réponse ad hoc !
Mais finalement j'ai utilisé un truc médian satisfaisant selon moi pour les reso 1024x768 et au-dessus( sachant que mon "content" fais 576px de haut constant dans toutes les pages du module), même si le bloc n'est pas exactement centré en hauteur par exemple en 1600x1200, son "margin-top" fluctue bien en fonction des différentes résolutions. 

<div id="global">
<div style="position:absolute;top:30%;margin-top:-175px;">
content 
</div>
</div>

Dans mon id="global" j'ai bien entendue un margin : 0px auto (pour mon content centré horizontalement), mais qui ne marche pas avec un poistionnement absolu d'ou mon 2eme div "sous-englobant" qui permet de positionner le contenu avec une marge en haut automatique.
j'ai testé sous ie6 et firefox mais pas encore avec Safari et ie7 j'espère que ça sera bon.
C'est pas joli joli tout ca mais bon voila . Qu'est-ce que tu en penses? (peut-être rien Smiley smile )
En tout cas merci pour ta réponse qui m'a aussi permis de mieux comprendre comment le site Alsa fonctionne.
A bientôt
Jeanda
Salut,

Quitte a faire dans le pas top, le faire à fond Smiley biggol 

html, body{
height: 100%;
margin: 0;
padding: 0;
}

#global{
width: 1024px;
height: 500px;
position: absolute;
margin-left: -512px;<!-- la moitié de 1024 -->
left: 50%;
margin-top: -250px;<!-- la moitié de 500 -->
top: 50%;
background: lime;
}
<body>
<div id="global">
</div>
</body>


Alors pas glop car, avoir un height fixe sur un bloc, ben il faut vraiment savoir ou on met les pieds, car si le contenu augment ben ou on a un dépassement du contenu ... ou si on a fixé un overflow: auto, on récupère une vilaine scroll barre verticale pas très ergonomique. Ca c'est pour le côté développeur Smiley cligne
Côté utilisateur, on ne peut pas contrôler (ouf!) la taille de la police du visiteur ce qui risque finalement de provoquer le même souci...
Et puis, un width de 1024 c'est un peu large (pour une optimisation pour du 1024, utiliser plutôt 960px, à causes des barres d'outils verticales potentielles et des différences entre le width des scroll barres verticales suivant le navigateur...).
Et puis encore, je trouve qu'un bloc de cette taille en absolute c'est casse gueule ...
La solution d'Heyoan reste la "moins pire" Smiley lol
Ok ghost merci pour ces infos sur les tailles j'ai passé mon content en 990 (plus de scroll dans ma réso de base en 1024, c'est impeccable).
Jeandalement
Sujet clos
Aller à