Problème calques/css sous ie

Problème calques/css sous ie - HTML/CSS - Programmation

Marsh Posté le 25-07-2006 à 18:46:35    

Voila je m'explique je viens de créer un début de template pour mon site, sous firefox et opéra ca passe nickel, par contre sous Internet Explorer j'ai un problème sur la bordure de droite et dans le menu de gauche, en effet il y a un blanc.
 
La page est ici: http://rpgillusion.franceserv.com/ [...] dex(1).php
 
et voila le code:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script language=JavaScript src="js_divers.js"></script>
<title></title>
<style type="text/css">
<!--
 /*  Partie conteneur du site */
 
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; BACKGROUND-IMAGE: url(../images/principal/arriereplan.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TOP: 0px; BACKGROUND-COLOR: #606060
}  
 
.conteneur {
  width:767px;
  margin-left:auto;
  margin-right:auto;
  border:0px solid #000000;
  margin-top:20px;
  margin-bottom:20px;
  background-color:#FFFFFF;
}
 
/*  Partie en-tête du site */
 
.header {
 
  width:767px;
  height:102px;
        background-color: #ffffff;
        background-image:url(entete.jpg);
  background-repeat:no-repeat;
}
 
.flash {
 
  width:767px;
  height:46px;
        background-color: #ffffff;
}
 
/*  Partie principal du site */
 
.centre {
        margin-bottom: 0px;
  margin-left:2px;
  float:left;
  width:578px;
  padding:0px;
  background-color:#FF0000;
}
 
/*  Partie menu de gauche */
 
.gauche {
display:block;
        width: 175px;
 float:left;
 margin-left:0px;
        min-height: 500px;
       BACKGROUND-IMAGE: url(../images/principal/fondmenu.gif);
}
 
/*  Partie menu de droite */
 
.droite {
   
        width:6px;
   
  float:right;
  margin-right:0px;
        min-height: 500px;
  padding:0px;
        BACKGROUND-IMAGE: url(../images/principal/borduredroite.gif);
}
 
/*  Partie pied du site */
 
.pied {
        BACKGROUND-IMAGE: url(../images/principal/bas.gif);
        padding-top:0px;
        padding-bottom:0px;
       clear:both;
        width:767px;
        height:26px;
        text-align:right;
}
-->
</style></head>
<body>
<!-- Div qui permet de contenir le site  -->
<div  class="conteneur">
  <!-- Div qui permet de contenir toute l'en-tête et le menu horizontal par onglets  -->
  <div  class="header">
  </div>
   <div class="flash">
   <script type="text/javascript">Flash("../images/principal/entete8.swf", "767", "46", "", "banniere", "$mavariable" );</script>
  </div>
  <!-- Div qui permet de contenir le menu de gauche et divers modules  -->
  <div>
    <div  class="gauche">
    gauche
    </div>
 <div  class="centre">centre<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
 <div  class="droite">
    </div>
  </div>
  <!--  Div qui permet de contenir page principal et les principaux modules  -->
  <!--  Div qui permet de contenir le pied de page et le second menu horizontal  -->
  <div  class="pied">
  </div>
</div>
</body>
</html>

Reply

Marsh Posté le 25-07-2006 à 18:46:35   

Reply

Marsh Posté le 25-07-2006 à 19:50:02    

IE ne gère pas min-height
 
Essaie ça :
 
.gauche {  
display:block;  
width: 175px;  
float:left;  
margin-left:0px;  
min-height: 500px;
height:auto;  
background-image:url(../images/principal/fondmenu.gif);  
}
 
et le hack pour IE :
* html .gauche
{
 height: 500px;
}

Reply

Marsh Posté le 26-07-2006 à 11:32:18    

J'ai replacé comme tu m'a dis  
 
.gauche {  
display:block;  
        width: 175px;  
 float:left;  
 margin-left:0px;  
        min-height: 500px;  
       BACKGROUND-IMAGE: url(../images/principal/fondmenu.gif);  
}
 
 
par
 
.gauche {  
display:block;  
width: 175px;  
float:left;  
margin-left:0px;  
min-height: 500px;  
height:auto;  
background-image:url(../images/principal/fondmenu.gif);  
}
 
Mais le problème est toujours le meme, je sais vraiment pas quoi faire, faudrai que le menu de gauche et la bordure de droite touche en permenant le bas, comme c'est le cas sous firefox ou opera.
 
Voila une capture du problème sous Ie: http://www.kankrelator.info/tgkhost/host1/cap2006726113125.JPG


Message édité par sff le 26-07-2006 à 11:34:16
Reply

Marsh Posté le 26-07-2006 à 14:20:56    

background: url(monimage) repeat-y;
a tester mais des fois ie est si .... :o

Reply

Marsh Posté le 26-07-2006 à 14:54:40    

Un autre hack possible et qui marche normalement, tu mets a la place de height: auto;  _height: 500px;
 
Mais sinon tu n'a pas vraiment fais ce qu'a dit gebruik.
 

Reply

Marsh Posté le 26-07-2006 à 15:10:35    

Mets tout le code que j'ai indiqué, tu verras.
 

Reply

Marsh Posté le 26-07-2006 à 23:01:50    

Je rejoute ceci aussi dans le css?
 
* html .gauche  
{  
 height: 500px;  
}

Reply

Marsh Posté le 26-07-2006 à 23:29:47    

Ben c'est indiqué dans son message, c'est le hack pour que ca marche sur IE :D .

Reply

Marsh Posté le 27-07-2006 à 00:31:16    

gebruik avec ton hack quioi q'il soit le mnu de gauche sera toujours a 500 px, moi aurait aimé qui prennent toute l'espace pour aller jusqu'en bas en permenance. Pas avoir une veleur défini

Reply

Marsh Posté le 27-07-2006 à 02:29:57    

Tel que la page est construite actuellement ce n'est pas possible de rendre ca en CSS il me sembles, que ca soit sur IE ou FF avec ou sans min-height, sur FF actuellement si ton centre dépasse les 500px tu aura le même problème qu'avec IE.

Reply

Marsh Posté le 27-07-2006 à 02:29:57   

Reply

Marsh Posté le 27-07-2006 à 12:45:39    

de quel manière faudrai changer les calques?

Message cité 1 fois
Message édité par sff le 27-07-2006 à 12:46:10
Reply

Marsh Posté le 27-07-2006 à 13:02:07    

sff a écrit :

de quel manière faudrai changer les calques?


 
Le plus simple vu que ton design est de toute manière de largeur fixe c'est de mettre une image de background à ton conteneur.
Cette image prendrait toute la largeur du design avec, à gauche, le saumon pour le menu et à droite la bordure.
Tu peux donc supprimer ton div droite.
J'attire ton attention sur le problème que pose actuellement le fond strié avec ton footer: selon la hauteur du contenu les stries ne correspondent pas et c'est pas très joli.
D'autre part il serait plus judicieux d'attribuer un id et non un class à tes divs puisqu'ils sont uniques sur ta page.

Reply

Marsh Posté le 27-07-2006 à 14:12:51    

ok je vais tester, merci

Reply

Marsh Posté le 28-07-2006 à 02:18:23    

oui mais si je supprime le div de gauche (menu) et div de la bordure, je fais comment pour placer au bon endroit le texte du menu, et le texte du centrede la page?
 
Au fait une autre question, j'aurai aimé mettre une image d'arrière plan ( un perso par exmple) derrière le texte du centre de la page, sans l'intégrer à l'image du background principal (menu + bordure). Comment feriez vous?

Reply

Marsh Posté le 28-07-2006 à 13:03:37    

En gros ta structure devrait ressembler à ça (d'après ton screen):
 

<body>
 
  <div  id="conteneur">
 
    <div  id="header"> </div>
    <div  id="menu"> </div>
    <div  id="centre"> </div>
    <div  id="pied"> </div>
 
  </div>
 
</body>


 
Pour ton image d'arrière plan du texte tu peux la mettre comme image de fond du div "centre"

Reply

Marsh Posté le 29-07-2006 à 13:55:22    

j'ai fais comme ca:
 
 

Citation :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
<script language=JavaScript src="js_divers.js"></script>  
<title></title>  
<style type="text/css">  
<!--  
 /*  Partie conteneur du site */  
 
BODY {  
 PADDING-RIGHT: 0px;  
 PADDING-LEFT: 0px;  
 FONT-SIZE: 0.8em;  
 BACKGROUND-IMAGE: url(../images/principal/arriereplan.gif);  
 PADDING-BOTTOM: 0px; MARGIN: 0px;  
 PADDING-TOP: 0px;  
 FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;  
 TOP: 0px;  
 
}  
   
#conteneur {  
  width:767px;  
  margin-left:auto;  
  margin-right:auto;  
  border:0px solid #000000;  
  margin-top:20px;  
  margin-bottom:20px;  
 
}  
 
/*  Partie en-tête du site */  
 
#header {  
 
  width:767px;  
  height:102px;  
  background-image:url(entete.jpg);  
  background-repeat:no-repeat;  
}  
 
#flash {  
 
  width:767px;  
  height:46px;  
  background-color: #FFF9F1
}  
 
/*  Partie principal du site */  
 
#centre {  
        margin-bottom: 0px;  
  margin-left:0px;  
  float:left;  
  width: 767px;  
  padding:0px;  
 background-image:url(contenu.gif);  
}  
 
 
/*  Partie pied du site */  
 
#pied {  
        BACKGROUND-IMAGE: url(../images/principal/bas.gif);  
        padding-top:0px;  
        padding-bottom:0px;  
       clear:both;  
        width:767px;  
        height:26px;  
        text-align:right;  
}  
 
#menu{  
float:left;
 width: 175px;  
 margin-left:0px;  
}  
 
#contenu{  
float:left;
 width: 578px;  
 margin-left:0px;  
}  
 
 
-->  
</style></head>  
<body>  
 
<div  id="conteneur">  
 
  <div  id="header"> </div>  
   
   <div id="flash"><script type="text/javascript">Flash("../images/principal/entete8.swf", "767", "46", "", "banniere", "$mavariable" );</script></div>  
   
  <div>  
 
  <div  id="centre">
   
  <div  id="menu">menu</div>
  <div  id="contenu">contenu</div>
   
  </div>  
 
  </div>  
  <div  id="pied">  
   
  </div>  
 
</body>  
</html>


 
Cela vous parrait il correct?
 
Sinon au nveau de la validation css on me dit: Ligne : 48 (Level : 1) Vous n'avez pas de couleur définie avec votre couleur de fond : #flash  
 
Pourtant j'ai bien une couleur de background dans #flash
 
 
Sinon dernière question, j'aimerai faire clignoter l'oeil du perso avec une image gif qu'il faudrai positionnner au dessus du calque header, comment feriez vous?


Message édité par sff le 29-07-2006 à 14:02:59
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed