Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1597 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème calques/css sous ie

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème calques/css sous ie

n°1413343
sff
Posté le 25-07-2006 à 18:46:35  profilanswer
 

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>

mood
Publicité
Posté le 25-07-2006 à 18:46:35  profilanswer
 

n°1413365
gebruik
Posté le 25-07-2006 à 19:50:02  profilanswer
 

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;
}

n°1413686
sff
Posté le 26-07-2006 à 11:32:18  profilanswer
 

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
n°1413856
mIRROR
Chevreuillobolchévik
Posté le 26-07-2006 à 14:20:56  profilanswer
 

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

n°1413899
Cheinz
Posté le 26-07-2006 à 14:54:40  profilanswer
 

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.
 

n°1413917
gebruik
Posté le 26-07-2006 à 15:10:35  profilanswer
 

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

n°1414179
sff
Posté le 26-07-2006 à 23:01:50  profilanswer
 

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

n°1414196
Cheinz
Posté le 26-07-2006 à 23:29:47  profilanswer
 

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

n°1414214
sff
Posté le 27-07-2006 à 00:31:16  profilanswer
 

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

n°1414222
Cheinz
Posté le 27-07-2006 à 02:29:57  profilanswer
 

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.

mood
Publicité
Posté le 27-07-2006 à 02:29:57  profilanswer
 

n°1414429
sff
Posté le 27-07-2006 à 12:45:39  profilanswer
 

de quel manière faudrai changer les calques?

Message cité 1 fois
Message édité par sff le 27-07-2006 à 12:46:10
n°1414448
Pitsy
Posté le 27-07-2006 à 13:02:07  profilanswer
 

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.

n°1414521
sff
Posté le 27-07-2006 à 14:12:51  profilanswer
 

ok je vais tester, merci

n°1415010
sff
Posté le 28-07-2006 à 02:18:23  profilanswer
 

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?

n°1415192
Pitsy
Posté le 28-07-2006 à 13:03:37  profilanswer
 

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"

n°1415735
sff
Posté le 29-07-2006 à 13:55:22  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème calques/css sous ie

 

Sujets relatifs
Probleme Css IE /FireFoxProbléme avec les pointeurs
Problème librairie gd[ Problème] Récuperer une valeur
probleme graphiquepetit problème de mois
petit problème avec sommeProbleme de disposition des calques quand redimensionnement de fenetre
Probléme de calquesprobleme de calques
Plus de sujets relatifs à : Problème calques/css sous ie


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR