28173 sujets

CSS et mise en forme, CSS3

[résolu] Deuxieme probleme d'interpretation de CSS toujours sous IE

Voila , je developpe mon site et je galère vraiment a le rendre compatible avec IE !

Voila mon code source : 

<body>
<div id="global">

<!-- Contient tout les div et creer la largeur fixe de 779px -->


<div id="header">   
<!-- Affiche la banniere -->
</div>




<div id="menu_h_g">
<!-- Menu horizontal  , partie gauche  [ attribut float:left; ] -->
</div>



<div id="menu_h_d">
<!-- Menu horizontal  , partie droite -->
</div>



<div id="contenu">

<!-- Contient tout en dessous du menu vertical  [ attribut clear:both; ] pour placer ce bloc sous les 2 blocs flotants du menu horizontal -->

<div id="menu_v_g">
<!-- Menu vertical [ attribut float: left; ] pour situer le texte de la page et le menu cotes a cotes-->
</div>




<div id="texte">
<!-- Texte de la page -->
</div>




</div>

<div id="footer">
<!-- Footer [ attribut clear:both; ] pour placer ce bloc sous les 2 blocs flotants du menu vertical + texte-->
</div>



</div>
</body>


Ensuite les CSS , j'ai deux feuilles de style une globale , et une venant s'y ajouter si jamais le navigateur est IE Smiley cligne :

CSS global : 

body {
     margin: auto; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     background-image: url(../images/bg.gif);
     }

#global {
     margin-left: auto;
     margin-right: auto;
     width: 779px;
     text-align: left; /* on rétablit l'alignement normal du texte */
     }

#header {
     background-image: url(../images/banniere.jpg);
     background-repeat: no-repeat;
     height: 123px;
     }

#menu_h_g {
     background-image: url(../images/menu_h_g.jpg);
     background-repeat: no-repeat;
     width: 154px;
     height: 35px;
     float:left;
     }

#menu_h_d {
	background-image: url(../images/menu_h_d.jpg);
	background-repeat: repeat-x;
	height: 35px;
	width: auto;
      } 

#contenu {
     background-image: url(../images/contenu_bg.jpg);
     background-repeat: repeat-y;
     }

#menu_v_g {
     width: 151px;
     float: left;
     }

#texte {
     width: 628px;
     margin :0 0 0 150px;
     padding:0;
     }

#footer {
     background-image: url(../images/footer_bg.jpg);
     width: 779px;
     height: 19px;
     clear:both; 
     }


Et le supplement CSS si le navigateur est IE : 



#menu_h_d {
	background-image: url(../images/menu_h_d.jpg);
	background-repeat: repeat-x;
	height: 35px;
	width: 625px;
	position: relative;
	left: -3px;   /* pour rectifier le décalage du menu horizontal */
	margin-right: -3px;
      }


Rendu correct sous Firefox :

http://img20.imageshack.us/img20/2480/temp5ka.th.jpg

Mais sous IE , ca bug ! :

http://img20.imageshack.us/img20/2738/temp0cm.th.jpg


Si certains savent ce qu'il faut rajouter dans la feuille de style IE pour avoir le meme rendu que FF , cela m'aiderai beaucoup ! Smiley smile

Merci , Cordialement , Ronan
Modifié par Ronan (25 Mar 2006 - 14:43)
Bonjour,
Dans ton balisage, fais un essai en plaçant les "div" de type contenu/texte (et qui doivent se trouver à droite [donc spécifiés avec un "float: right;"]) en premier, et ensuite ceux des menus. (autre avantage, si on consulte le site sans CSS, le menu se retrouve après le contenu, ce qui est plus agréable.)

<body>
<div id="global">

[#orange]<!-- zone texte à afficher à droite -->[/#]
<div id="contenu/texte">
    [ici, les "divs à mettre dedans]
</div>

[#orange]<!--zone menu à afficher à gauche -->[/#]
<div id="menuGauche">
    [ici, tout ce qui doit se trouver à gauche]
</div>

</div>
</body>

Sur mon site, ça fonctionne sans trop de problème. Smiley sweatdrop Voici la partie CSS que j'utilise :

[#orange]/* BLOC menu - contient tout les éléments du menu */[/#]
#navigation {
	margin: 15px 0 30px;
	[b]float: left;[/b]
	height: auto;
	width: 230px;
	border-style: none;
	}

[#orange]/* BLOC texte - contient le texte et tout ce qu'on peut trouver à droite*/[/#]
div#contenu {
	[b]float: right;[/b]
	margin: 15px 10px 30px;
	padding: 0;
	width: 490px;
	}


Si ça ne fonctionne pas, fais un test en supprimant "float: left" des div#gauche et sors les du flux normal avec "position: absolute; left:XXpx; top:XXpx".

Si rien ne fonctionne (car je me plante peut-être), tu devrais donner le lien vers ta page, ainsi on peut tenter d'éditer ton fichier CSS en ligne pour trouver une solution - c'est pratique.
Modifié par Smiley neko (25 Mar 2006 - 14:22)
La balise contenu est juste la pour mettre l'image de fond qui s'étend du menu vertical jusqu'au texte ( image de 779px de large)

Donc la balise "contenu" n'est la que pour l'image de fond Smiley cligne
Bonjour,

Enlève le width: 628px; qui est sur #texte.
La div s'étendra de toute façon sur le reste de la largeur, et ça devrait t'éviter ce souci avec IE.

A+
Alan a écrit :
Bonjour,

Enlève le width: 628px; qui est sur #texte.
La div s'étendra de toute façon sur le reste de la largeur, et ça devrait t'éviter ce souci avec IE.

A+



Alan je t'aime Smiley biggrin , serieusement merci merci merci !
Essai avec 


#texte {
	width: auto;
	margin :0 0 0 150px;
	padding:0;
	background-color: #003399;
     }


Différence de calcul de la largeur entre IE et FF
Sujet clos
Aller à