28172 sujets

CSS et mise en forme, CSS3

[résolu] Problème de DIV sous IE

Bonjour,

J'ai un souci avec la mise en page du site sur lequel je travaille. J'essaye de caler 3 div en absolu dans mon div footer. Pour une raison que je n'arrive pas à comprendre, ça fonctionne sous Firefox mais sous IE 7 ça s'aligne complètement à droite, en dehors du div parent...

Toute aide serait très fortement appréciée !!

Voilà mon code (simplifié) :


<head>
<link rel="stylesheet" type="text/css" href="div.css">
</head>

<body>

<div id="global">
<div id="header"></div>
<div id="barnav"></div>
<div id="content"></div>
<div id="nav"></div>
<div id="pied_page">
<div id="footer1">footer1</div>
<div id="footer2">footer2</div>
<div id="footer3">footer3</div>
</div>
</div>

</body>


Et mon CSS :


html {
	height:100%;
	margin: 0;
	padding: 0;
	border: none;

}

body {
    	margin:0;
    	padding:0;
	border: none;
	text-align:center;

}

#global {
  	position:absolute;
	margin: 0 auto;
  	left: 50%;  
  	top: 50%; 
  	width: 900px; 
  	height: 550px; 
  	margin-top: -275px;
  	margin-left: -450px;
	font-family: Verdana, Arial;
	font-size:8pt;
	background-color:#ffffff;

}

#header {
    	height:80px;
	width:872px;
    	margin: 0 auto;
	background-color:#4F4733;

}

#barnav { 
    	height:38px;
	width:900px;
    	margin: 0 auto;
	background-color:#000000;


}
 
#content { 
	width:872px;
    	height:330px;
    	margin: 0 auto;
	background-color:#B39C63;

}

#nav { 
	width:872px;
    	height:20px;
    	margin: 0 auto;
	background-color:#000000;

}
 
#pied_page { 
    	height:82;
	width:872;
    	margin: 0 auto;
	background-color:#4F4733;

}

#footer1 {
  	position:absolute; 
	width: 80px; 
  	height: 15px; 
	background-color:#66CC33;
	margin-left: 616px;
	margin-top:61px;
}

#footer2 {
  	position:absolute; 
	width: 80px; 
  	height: 15px; 
	background-color:#66CC33;
	margin-left: 702px;
	margin-top:61px;
}

#footer3 {
  	position:absolute; 
	width: 80px; 
  	height: 15px; 
	background-color:#66CC33;
	margin-left: 788px;
	margin-top:61px;
}



Merci beaucoup pour votre aide !!
Modifié par Mastah (07 Jan 2011 - 08:29)
Mastah a écrit :
Pour une raison que je n'arrive pas à comprendre, ça fonctionne sous Firefox mais sous IE 7 ça s'aligne complètement à droite, en dehors du div parent...

C'est le comportement normal puisque tu cherches à positionner en absolue tes div inclus dans ton pied de page et que faisant, tu les sors du flux de la page. Chez moi, j'ai le même résultat peu importe le navigateur. Tu peux ajouter un border sur ton div pied de page pour mieux visualiser ce que ton code initial donne, ça aide à comprendre le phénomène.

spiral123 a écrit :
position:relative à mettre sur ton #pied-de-page
nan ?


Oui, peut-être mais à ce moment là, si tu continue à utiliser le positionnement absolue, tu devras positionner tes footer1, footer2 et footer3 à l'aide de soit top, bottom, right ou left.

À lire sur le positionnement absolue

Par contre, je me questionne sur l'emploi du positionnement absolue dans ton cas. Mais ne sachant pas ce que tu cherches à obtenir, c'est difficile d'aller plus loin pour t'aider.
Merci pour vos réponses.

En fait j'utilise le positionnement absolu uniquement pour que ma page soit centrée verticalement. J'ai appliqué un absolu à mes 3 footers uniquement parce que sous Firefox c'était le seul moyen que j'avais pour qu'ils soient bien positionnés, ou du moins c'était ce que je pensais... J'ai un peu de mal avec ces notions d'absolu / relative Smiley ohwell

Ce que je cherche en fait, c'est à ce que mes footers 1 2 3 soient situés en bas à droite de mon pied de page, avec une marge de 3-4px.
Modifié par Mastah (05 Jan 2011 - 18:36)
spiral123 a écrit :
position:relative à mettre sur ton #pied-de-page

nan ?


Il suffirait donc simplement de changer dans mon css ses propriétés ?


#pied_page { 
position:relative;
height:82;
width:872;
margin: 0 auto;
background-color:#4F4733;
}


Pour moi cela n'a absolument rien changé sous IE7 hélas Smiley decu Est-ce que ça aurait un lien au fait que le div parent de #pied_page est en absolu ?

Encore merci pour votre aide.
C'est normal que cela ne fonctionne pas.
Voici la réponse que je t'avais donné:
Mabelle a écrit :
Oui, peut-être mais à ce moment là, si tu continue à utiliser le positionnement absolue, tu devras positionner tes footer1, footer2 et footer3 à l'aide de soit top, bottom, right ou left.

À lire sur le positionnement absolue

Par contre, je me questionne sur l'emploi du positionnement absolue dans ton cas. Mais ne sachant pas ce que tu cherches à obtenir, c'est difficile d'aller plus loin pour t'aider.


Tu pourrais aussi faire flotter à droite tes trois divs dans ton pied de page.
Modifié par Mabelle (06 Jan 2011 - 11:48)
Mabelle a écrit :
C'est normal que cela ne fonctionne pas.
Voici la réponse que je t'avais donné:


Autant pour moi, j'avais laissé mes margin-right au lieu d'un simple right. A force d'avoir le nez dans le code on en oublie de regarder le plus évident... Smiley ohwell

Tout est parfait maintenant, merci beaucoup !!
Sujet clos
Aller à