28172 sujets

CSS et mise en forme, CSS3

[resolu] Div qui se retrouve en bas de page sur IE6

Bonjour à tous,

Je suis entrain de restructurer un site complètement, et je tiens à ce qu'il soit vraiment top au niveau css, j'ai donc tout refait en partant du début pour ne pas garder de mauvaises choses. J'au tout terminé sauf qu'en testant sur IE6 mon menu de droite se retrouve tout en bas de ma page.
Voici comment est structurée ma page :


<div id="global">
  <div id="entete"><img src="images/logo.jpg" width="330" height="135" /></div>
  <div id="navigation">
    Mon menu
  </div>
  <img src="images/separateur.gif" width="955" height="7" align="left" />
  <div id="centre">
    <div id="principal">
<img src="images/diaporama.jpg" width="565" height="270" />
</div>
    <div id="secondaire">
        Ma pub
</div>
    </div>
  </div>
  <div id="pied">...</div>
</div>


Et ma css

/* Général */
body {
	background-color: #7c766d;
	background-image: url(../images/header-fond.gif);
	background-repeat: repeat-x;
	background-position: center top;
	padding:0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#4d463a;
}
#global {
	width: 955px;
	margin: 0 auto; /* -> 3 */
	background: #FFFFFF;
	overflow:hidden;
}
/* En-tête */
#entete {
	margin: 0px;
	background-image: url(../images/header-entete.gif);
	background-repeat: repeat-x;
	background-position: center top;	
}
#entete h1 img {
	float: left;
	display:inline;
}

/* Navigation */
#navigation {
	clear:both;
	margin-left:20px;
	padding-top:4px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9em;
	
}
#navigation a {
	color: #4d463a;
	font-weight:bold;
	text-decoration:none;
}

/* Bloc central */
#centre {
	background: #FFFFFF;
	width: 100%; 
	overflow: hidden;
	clear:both;
}
/* Contenu principal */
#principal {
	background: #FFFFFF;
	float: left;
	width: 571px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 7px;
}

/* Contenu secondaire */
#secondaire {
	height:1%;
	background: #FFFFFF;
	margin-left: 579px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	padding-top: 10px;
	padding-right: 7px;
	padding-bottom: 10px;
	padding-left: 0px;
	
}
#pied {
	background: #4d463a;
	clear:both;
}


J'ai pas mal cherché avant de venir posté, merci de votre aide.
Modifié par jexl (25 Nov 2009 - 11:50)
Hello,

Tout d'abord merci Mikachu pour cette réponse constructive, tu as bien ciblé le problème.
Voici un résumé des solutions à apporter à ce problème. J'ai trouvé les réponses dans les liens envoyés par Mikachu:
IE6 ne calcul pas la taille d'une div comme tous les navigateurs, il occulte les padding et les magin.
Du coup il faut faire une feuille CSS spécialement pour lui en ajoutant dans le html :
<!--[if IE 6]>
	<link type="text/css" rel="stylesheet" href="css/css_ie6.css" />
<![endif]-->

Et dans cette feuille recalculer les tailles sans les margin et les padding.

C'est incroyable que tous les navigateurs n'appliquent pas les mêmes règles, mais ca vous deviez déja le savoir Smiley biggrin

Merci pour ton aide Mikachu.
Petite question subsidiare.
Quand IE 6 lit la page, est-ce qu'il occulte complètement la css qui ne lui est pas dédié ? ou est-ce qu'il fait une sorte de fusion ?
IE6 n'occulte pas de CSS ne lui étant pas dédiée, puisque la première CSS lui est également dédiée...

Par contre, n'importe quel navigateur ne retiendra que la dernière définition donnée pour un attribut CSS. C'est pour cette raison que les feuilles de styles correctives doivent apparaitre après les feuilles de styles normales.

ps. : Il n'y a pas de bouton résolu, il faut éditer le premier message et changer son titre en ajoutant [résolu].
Donc je n'ai pas besoin dans ma seconde feuille de remettre tout ce que j'ai précedemment déclaré si je comprends bien.

Ok pour résolu, je le fais de suite.

Merci pour tout.
J'me réponds à moi même, je viens de tester, il n'est pas necessaire de tout remettre, ce qui semblait logique et qui est quand même préférable Smiley lol
Sujet clos
Aller à