28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voilà, j'ai un petit problème avec le centrage en horizontale et verticale de ma DIV global avec firefox.
En effet, le site est prévu pour une résolution minimale de 1024 mais si l'on utilisé une plus petite résolution, ou qu'on rétréci la fenêtre, la partie d'en haut, et la partie de gauche disparaissent.
Vous pouvez voir le résultat ici : adelysnet

Je vous met mon morceau de code CSS :

#global {
	 
	 position:absolute;
     width: 972px; /*Largeur de ta page */
     height: 572px; /*Hauteur de ta page */
	 text-align:left;
}

/* Hack anciens navigateurs */ 
@media screen{ 
        #global {
                top: 50%;      
                left:50%;        
                margin-top: -286px; /* moitié de la hauteur */
                margin-left: -486px; /* moitié de la largeur */             
        }
}


Voilà voilà, si vous pouviez m'aider Smiley smile

Merci !!!!!!
Bonjour,
si tu veux éviter ce genre de désagrément, utilises le centrage par marges latéral auto. Voir ce tuto
Quant au centrage vertical via positionnement absolue, il ne devrait être utiliser que si la hauteur de ton bloc conteneur ne dépasse pas la zone d'affichage verticale pour du 800x600 : environ 430px.
Modifié par Hermann (01 Oct 2007 - 12:36)
Pas bête d'utiliser le centrage horizontale avec des marges auto, je n'avais pas pensé.
Mais dans tous les cas le plus embetent c'est le centrage vertical, car, sur un écran à 1600, par exemple, c'est très moche d'avoir tout le site en haut (même pour 1280 dailleurs ....), puis j'ai tout mon menu en haut Smiley confus

Pas d'autres solutions ?? Smiley bawling
Orgies a écrit :
Pas d'autres solutions ?? Smiley bawling

On peut faire du centrage vertical de bloc très facilement avec un tableau. En conséquence de quoi, deux solutions:

- soit la compatibilité avec Internet Explorer est importante et on utilise un tableau (une ligne, une cellule) pour englober toute la page, ce qui ne posera pas de problème d'accessibilité particulier;
- soit on ne souhaite pas forcément que cet effet soit compatible IE et on pourra utiliser display: table et display: table-cell.