Centrer un DIV dans un DIV DANS IE6 :-( Fermé

Question

Bonjour,

Ce message fait suite au post suivant:
centrer un div

Cependant je souhaiterai le diriger plus sur IE6, donc je recrée un post.

Je suis débutant en PHP/MySQL et aussi XHTML et donc CSS... ;-)
Je programme en TXT sous Linux(Ubuntu).

Donc, mon site ressemble à ça:
- Un header et un footer,
- Un "menu" (float-left, width:150px),
- Un "main" (extensible),
- Un "panier de sélection" (float-right, width:150px).

Mon problème est que je voudrait poser un DIV de taille fixe à l'intérieur du "main" et le centrer, comme ça, suivant les définitions utilisées ça reste +/- équillibré comme design mais je peux l'optimiser pour le 1024.

J'ai donc utilisé la technique de la "marge négative pour la moitier de la taille du DIV" et du positionnement relatif + left:50%.
Ca marche très bien pour FF, Opera. Lorsque je diminue la taille de la fenêtre, le DIV passe sous les fenêtres et j'ai droit à une "barre d'overflow", donc c'est PARFAIT.

PROBLEME:
Sous IE6/Win, comme d'hab, ça foire!
En fait ça centre bien, mais lorsque l'on réduit la taille de la fenêtre, le DIV centré passe SUR les DIV de "menu", "panier de sélection" et "footer", ce qui est fort gênant!! :-(

Tout ce passe comme si IE6 prenait le DIV centré comme "absolute" au navigateur et non "relative" au DIV conteneur du DIV centré!!!
Je ne comprends pas la logique de ce comportement d'IE...

J'ai essayé de jouer avec des z-index mais ça ne change rien du tout.
Alors après 2 jours de recherche infructueuse je me tourne vers plus expérimenté que moi! :-)

=====================
Voici le CSS de mon div à centrer:
#view_villa_topband
{
width: 674px;
	height: 520px;
	background: red;
	color:#000;
	margin-left: -337px;
	position: relative;
	left: 50%;
	z-index: 10;
}

Et le CSS du DIV "main" qui le contient:
#main
{
height: 475px;
padding: 5px;
margin: 0px;
margin-left: 3px;
border: 2px solid blue /*#69c*/;
overflow: auto;
font-size: 95%;
line-height: 1em;
color:#000;
background-color: #d1f2f2;
text-align: justify;
}

Merci beaucoup de votre aide!
Bonne journée!
Feral

Gihef · Answer

Bonjour,

À tout hasard.
As-tu essayé de positionner ton bloc au centre du centre avec (le bouton [code] sert à le rendre plus lisible)#view_villa_topband
  { 
  width: 674px; 
  height: 520px; 
  background: red; 
  color:#000; 
  margin : 0 auto;
  /*margin-left: -337px; 
  position: relative; 
  left: 50%; 
  z-index: 10; */
  } Le #main n'est pas en float ?

Feral · Answer

Merci Beaucoup de ta réponse Gihef,

Le "main" n'est pas en float car je veux qu'il s'étire jusqu'au "panier de sélection".
Quand je le mets en float, il s'arrête à la taille de son contenu ("view_villa_topband") et j'ai un trou entre le main et le panier en float à droite.

Ton code marche très bien sur FF et sur IE6.
Je le préfère au mien car lorsque je réduit la page, le "view_villa_topband" se colle à la limite gauche du "main", à droite du menu au lieu de se glisser dessous.
Malheureusement toujours avec IE6, lorsque le panier arrive à la taille du "view_villa_topband" il renvois le "main" et donc le "view_villa_topband" en dessous au lieu de le faire passer SOUS lui comme le fait FF. En fait il le prends pour un float on dirait! :-(

Merci beaucoup de ton aide.

Aurais-tu encore quelques trucs pour moi STP? ;-)
Bonne journée!

Centrer un DIV dans un DIV DANS IE6 :-(

2 réponses

Discussions similaires