28218 sujets

CSS et mise en forme, CSS3

[Résolu] Image qui se répète sous IE

Bonjour à tous!

j'ai un petit soucis avec IE et je n'ai pas trouvé de documentation pour m'aider... j'espère que qqn ici le pourra... voila mon site: www.emrolle.ch/menu. Sous firefox, c'est presque parfait (mis à part la taille du menu qui n'est pas fixe mais j'ai pas encore cherché pour résoudre ce problème...) mais sur IE, il me répète l'arrondi de mon cadre, et ceci très certainement à cause du texte, mis grâce au z-index...voici ma css:

       html,body {      margin:  0;
                        background-color:  #99CC99;
                        margin:     0;
                        padding:    0;
                        height:     100%;
                        text-align: center;                                         
                        font-family: Comic Sans MS;
                 }

             .tete{
                       background-image: url("../menu/img/tete.gif");
                       width:      1000px;
                       height:     120px;
                       margin:     0 auto;

                  }


            .menu{     position: relative;
                       background-image: url("../menu/img/menu.gif");
                       width:      1000px;
                       height:     32px;
                       margin:     0 auto;
                       z-index: 1;



                  }

            .arrondi{  position: relative;
                       background-image: url("../menu/img/arrondi.gif");
                       background-repeat: no-repeat;
                       width:     1000px;
                       height:    309px;
                       margin:     0 auto;
                  }

            .main{     position: relative;
                       background-image: url("../menu/img/main.gif");
                       width:     1000px;
                       height:    100%;
                       margin:     0 auto;
                       z-index: 2;
                  }

ainsi que mon code HTML 
<html>
<head>
<title>Ecole de musique de Rolle et Environs</title>
<link rel="stylesheet" type="text/css" href="../css/config.css"/>

        </head>




<body>
                  <div class="tete">
                  </div>

                  <div class="menu">          <?php include "menu.php"; ?>
                  </div>

                  <div class="arrondi">

                       <p>

                       blablablablablablablabla blablablablablablablablablablablablablablablabla blablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla
                       blablablablablablablabla
                       blablablablablablablablablablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla blablablablablablablabla
                       blablablablablablablablablablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla blablablablablablablabla
                       blablablablablablablablablablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla
                       blablablablablablablabla blablablablablablablablablablablablablablablabla blablablablablablablabla
                       </p>
                  </div>

                  <div class="main">


                  </div>



</body>

</html>

J'espère que quelqu'un pourra m'aider !!!
A +
Modifié par p_tite_jo (27 Aug 2005 - 15:30)
Modérateur
salut, j'aurai , avec ma logique, pas fait usage du div #main , mais j'aurai mis son image en background a body... les autres elements venant se positionner au dessus, cacheront automatiquement son arriere plan la ou il y aura des couleurs ou des images appliqués.
a plus
j suis pas certaine de te comprendre... que fait-tu de la couleur d'arrière plan du body ? (suivant en quelle résolution tu es, tu ne la vois pas car les images doivent être redimensionnées.. pour le moment elles sont trop grandes...)
Modérateur
bonjour,
ma reflexion venait du fait que ton div class"main" risquer de se retrouver repousser par tes paragraphe et laisser ainsi apparaitre ton fond body ou html. je me serais servis de ce div comme conteneur au moins pour .arrondi et les paragraphe, ou j'aurais tout simplement mis son image de fond dans body, malgré tout, tu positionne tes elements de façon assez precises + avec des z-index, et la je n'arrive pas a suivre la logique de ta conception, j'ai tendance a faire plus simple.
la taille de tes images permet en fait d'afficher les couleurs de ton design jusqu'a une resolution de 1000px de large, ce n'est qu'au dela de cette resolution que tes couleurs d'arriere plan de body et / ou html seront visible, tu peut alors quand même mettre ton image de la class main en arrierre plan a body en la laissant se repeter en hauteur et d'y appliquer aussi ta couleur de fond (ta couleur de fond peut-etre appliquer a html, ce qui peut avoir dans certains cas l'avantage de recaler ton image de fond body si celui-ci est centré et de masquer les partie externe a body si celui-ci est plus petit que ta page .. je veux dire que l'image de fond ne se repetera pas jusqu'au bas de ta page si ta page n'occupe que 50% de la hauteur, en fait body se comporte a l'affichage comme un simple conteneur des que html n'a plus un fond transparent.)
tu peut appliquer une image et une couleur de fond aux balises, avec un no-repeat, la ou ton image ne sera plus affichée, tu auras alors la couleur, si pas de couleurs, par defaut ça reste transparent..

est ce que cela t'aide un peu ? Smiley confused

a plus
Merci beaucoup gcyrillus!
J'ai enfin un site qui ressemble à qqch autant sur IE que sur Firefox...Il me reste à régler ce problème avec le menu, mais c'est une autre histoire !!! Je comprends un peu mieux la logique du truc et je me rends compte qu'en effet, je me compliquais la vie plus qu'autre chose !!!

MERCI !

A bientôt
Sujet clos
Aller à