[Résolu] Pb affichage lors du redimensionnement du navigateur !

Bonjour la compagnie !!!
Bon j'ai un souci avec mon site.
Je viens de m'apercevoir lorsque je redimensionne la fenêtre de Firefox une réaction étrange de celui-ci !
voir la capture écran :



En fait mon site est rogné sur le haut. Une scrollbar se met bien en place (dû au redimensionnement) mais ne prend pas en compte le haut du site...

Voici la CSS :

body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center; /* pour corriger le bug de centrage IE */
	background-color: #F1F2F3;
	margin: 0; /* pour éviter les marges */
}

  /*conteneur global du site*/
#global 
{
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 1000px;
     height: 596px;
     background : url(uploads/images/background-image-accueil.jpg) no-repeat;
     background-color: #F1F2F3;
     margin-top: -298px; /* moitié de la hauteur */
     margin-left: -500px; /* moitié de la largeur */
     text-align: left; /* on rétablit l'alignement normal du texte pour IE5*/
}

/*haut de page*/
#header
{
	width: 1000px;
	height: 91px;
}


/*Le centre du site*/
#centre
	{
		width: 500px;
		height: 420px;
                overflow:auto;
                padding-top: 60px;
                padding-left: 95px;
	}
	

/*le pied de page*/
#footer
{
        clear:both;
	width: 1000px;
	height: 13px;
	font-size: 10px;
	color: #9C9D9F;
	text-align: right;
}

/* couleur du lien footer*/
.lienfooter 
{
	list-style-type: none;
}

.lienfooter a 
{
	margin: 0 2px;
	color: #3293DE;
	text-decoration: none;
}
.lienfooter a:hover 
{
	text-decoration: none;
}

Est-ce que ça vient de ma façon de centrer le site ?
Ou d'autre chose ?

merci pour votre aide et meilleurs voeux !!
Modifié par sagi (09 Jan 2008 - 15:38)

Salut,
Un CSS tout seul ne sert a pas a grand chose

Salut,

indéniablement le problème provient de ton centrage vertical qui ne tient pas compte de la hauteur utilisable (arf le terme m'échappe à l'instant ) de la fenêtre du navigateur du visiteur ne prenant en considération que la hauteur de ta page (fixe en px).

On doit pouvoir réaliser avec plus ou moins de chance ce type de centrage à l'aide de JS mais c'est assez aléatoire.
Si tu veux réaliser (à mon avis une bêtise) un site height 100%, il ne faut pas procéder de cette manière (voir tutos), au sinon plus classique et robuste:

#global 
{
     width: 1000px;
     height: 596px;
	 margin: 0 auto;
     background : url(uploads/images/background-image-agence.jpg) no-repeat;
	 background-color: #F1F2F3;
}

Avec un petit bémol, pour un site optimisé en 1040px préfère un width de 940/960px max.

Autre bémol: Une hauteur fixe impose des contraintes non négligeables... avec des soucis de double scroll si le volume de contenu augmente ou si visiteur augmente la taille de la police... Eventuellement un min-height suffit souvent
Modifié par ghost (10 Jan 2008 - 00:01)

Bonsoir,

#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 1000px;
     height: 596px;
     margin-top: -298px; /* moitié de la hauteur */
     margin-left: -500px; /* moitié de la largeur */
}

Cette méthode de centrage n'est pas robuste. Si le viewport (zone de visualisation du navigateur) a une hauteur inférieure à 596px ou une largeur inférieure à 1000px, une partie de div#global positionné en absolu peut se retrouver «hors-champ», invisible, sans provoquer l'apparition d'une barre de défilement.

Solution: utiliser la technique des marges automatiques pour le centrage horizontal.
Pour le centrage vertical, soit on s'en passe, soit on utilise un tableau de mise en forme à une cellule et la propriété vertical-align.

Oki merci pour vos conseils et votre aide.
Je vais bosser la dessus et vous tiens au courant de la solution adoptée.

sagi a écrit :
Et c'est là mon souci... comment je code "un tableau de mise en forme à une cellule

Plus ou moins comme ceci:
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html
Modifié par Florent V. (23 Jan 2008 - 23:44)

Oki merci Florent !
j'ai suivi le code proposé dans ton lien. ça marche nickel !
Il ne me reste plus qu'à tester avec différents navigateurs, au cas où !
Modifié par sagi (24 Jan 2008 - 07:58)