Header caché sous certaine resolution

Bonjour,

Je viens de me rendre compte que j'avais un bug avec mon site en 1024*768 que ce soit avec IE ou FireFox.

Voici une copie d'ecran du bug :
[img=http://img153.imageshack.us/img153/6121/bugzf7.th.jpg]

Donc voici mon code :

			echo "<div id='image_fond_nav'>";
				echo "<div id='cadre_accueil_nav'>";
					echo "<div id='contenu_accueil_nav'>";
						echo "blablabla";
					echo "</div>";
				echo "</div>";	
			echo "</div>";	

Et la partie css qui nous interesse :

#image_fond_nav{
position: absolute;
width: 800px;
height: 692px;
/* Pour centrer le site */
left: 50%; 
top: 50%;
margin-top: -346px;  
margin-left: -400px; 
/* fin centrage */
background-image:url("../Images/design.jpg");
background-position: top left;
background-repeat: no-repeat;
color: black;
border: 0px;
}
#cadre_accueil_nav {
position:absolute;
top: 250px;
left: 120px;
width: 580px;
height: 400px;
border: none;
overflow: auto;
}
#contenu_accueil_nav {
padding: 10px;}

image_fond affiche l'image, le reste c'est pour l'overflow sur la page.

Une idée ? Moi je n'y comprend rien... En resolution superieure ca marche nickel...

Edit : Je me rend compte que ca bug dans certaine resolutions superieures aussi
Et si je met margin-top: -300px; ca marche mais en 800*600 le probleme revient Et puis normallement c la moitié de la hauteur...
Modifié par Loizo666 (11 Mar 2007 - 15:25)

Bonsoir,
pour cela tu dois comprendre le centrage vertical via le positionnement absolue et les marge négatives.
En effet cette méthode de centrage ne devrait être utilisée que si la hauteur
de ton conteneur ne dépasse pas environ 430px (zone d'affchage verticale en 800x600) si toutefois tu cible aussi cette résolution.

#image_fond_nav{
position: absolute;
width: 800px;
height: 692px;
left: 50%; 
top: 50%;
margin-top: -346px;  
margin-left: -400px; 
background: url(../Images/design.jpg) no-repeat top left;
color: black;
border: 0;
}

Avec margin-top: -346px; tu montes ton conteneur d'une hauteur supérieur à la moitié des 430px (environ) en question.
Soit environ 130px qui doivent passer sous la zone d'affichage.
Modifié par Hermann (11 Mar 2007 - 21:15)

Très bonne explication d'Hermann, donc je ne la refais pas.

Centrage horizontal : utiliser la technique des marges automatiques.
Centrage vertical : soit on se passe de centrage vertical, soit on y tient absolument et dans ce cas on pourra utiliser un tableau à une cellule (compatible IE 6 et 7, et parfaitement accessible) en height: 100% avec vertical-align: center. À noter qu'on pourra aussi le faire avec une div en display: table, si on ne se préoccupe pas particulièrement d'obtenir cet effet dans Internet Explorer (6 et 7).

Ok merci pour l'explication !
Bon j'ai viré le centrage vertical tant pis. C'est pas tres important.
Mais sinon oui j'essaye de rendre accessible mon site à toute les resutions vu qu'il n'est pas flexible (design sous photoshop donc je ne peux pas l'adapter a la resolution).