28220 sujets

CSS et mise en forme, CSS3

Problème avec les floats et IE

Bonjour,
j'ai réalisé un design que j'ai testé sur Firefox, Netscape et Opera. Pour ces derniers browsers il n'y avait aucun problème mais lorsque j'ai visionné tous ça avec IE, il y avait pleins de bugs dont un conséquent que je ne parviens pas à résoudre.

En fait, mon design est séparé en 3 parties :
* Une barre de navigation sur la gauche.
* Un contenu central (corps de la page).
* Une barre de navigation sur la droite.

Le problème vient du fait que le corps de la page (le contenu central) se place automatiquement au niveau en dessous du contenu des 2 barres de navigation, laissant ainsi un vide au-dessus. Bon, comme des images valent mieux qu'un long discours, voici deux screenshots :
* Tout d'abord, le résultat sur Firefox :
http://img179.imageshack.us/img179/1294/ff5rw.th.jpg
* Le résultat sur Internet Explorer :
http://img156.imageshack.us/img156/2738/ie0oy.th.jpg

Voici maintenant le code (x)HTML :
<body>
<!-- Header defini dans le CSS-->
<div id="header">

</div>

<div id="sidebar_gauche_structure">
<div id="sidebar_droite_structure">
 
<!-- Menu du haut horizontal -->
<div id="menu_haut">

<!-- Images faisant la liaison entre le menu horizontal du haut et les 2 sidebars -->
 <div id="sidebar_liaison_gauche"><p>
<!-- Code PHP de la date et de l'heure -->
</p>
 </div>
 
 <div id="sidebar_liaison_droite"></div>
 
 <ul>
  <li class="menu_haut_sep"></li>
  <li id="lien_accueil"><a href="site.php?page=accueil"></a></li>
  <li class="menu_haut_sep"></li>
  <li id="lien_agenda"><a href="site.php?page=agenda"></a></li>
  <li class="menu_haut_sep"></li>
  <li id="lien_photos"><a href="site.php?page=galerie"></a></li>
  <li class="menu_haut_sep"></li>
 </ul>
</div>

<!-- SideBar de gauche -->
<div id="sidebar_gauche">
    <!-- Liste des liens + images de titres -->
</div>

<!-- SideBar de droite -->
<div id="sidebar_droite">
    <!-- Code PHP + (x)HTML de la sidebar de droite -6>
</div>

<!-- Corps de la page -->
<div id="corps">
   <!-- Contenu central inclus -->
</div>

<!-- Footer -->
</body>
</html>


Et une partie du code CSS correspondant :

#sidebar_gauche_structure {
	background-image: url("template/sidebar.gif");
	background-color: #eaeaea;
	background-position: left;
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
}

#sidebar_droite_structure {
	background-image: url("template/sidebar_droite.gif");
	background-position: right;
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
}

#sidebar_gauche {
	width: 182px;
	height: 100%;
	float: left;
}

#sidebar_droite {
	width: 178px;
	height: 100%;
	float: right;
}

#sidebar_liaison_gauche {
	background-image: url("template/sidebar_separation.gif");
	background-repeat: no-repeat;
	background-position: left;
	width: 182px;
	height: 34px;
	margin: 0px;
	float: left;
}

#sidebar_liaison_droite {
	background-image: url("template/sidebar_separation_droite.gif");
	background-repeat: no-repeat;
	background-position: right;
	width: 182px;
	height: 34px;
	margin: 0px;
	float: right;
}

#corps {
	margin-left: 182px;
	margin-right: 178px;
}


Merci de m'aider ce serait vraiment sympa car je galère depuis quelques jours dessus Smiley sweatdrop

edit: tags code ajoutés
Modifié par J3R3My (01 Jul 2005 - 17:18)
Sujet clos
Aller à