Problème calques/css sous ie

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">

</style></head>
<body>

<div class="conteneur">

<div class="header">
</div>
<div class="flash">
<script type="text/javascript">Flash("../images/principal/entete8.swf", "767", "46", "", "banniere", "$mavariable" );</script>
</div>

<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 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:

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 ....

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 .

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):

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">

</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

Problème calques/css sous ie

Sujets relatifs:

Leave a Replay