28220 sujets

CSS et mise en forme, CSS3

[résolu] un <div> superposé à un float ds FF (no pb ds IE

Bonjour,

Je consulte régulièrement le forum depuis pas mal de temps mais pour la première fois je n'ai pas trouvé la solution de mon problème avec mon ami le search.

La première version du site ne posait aucun problème jusqu'à ce que mette une image fixe en fond de div#content et div#text pour obtenir un effet de tranparence (merci meyerweb et sa complexspiral.com).

Pour l'affichage du menu sous IE, j'utilise le patch IE7 de dean.edwards.

Depuis, dans firefox, le fond et les bordures du div#text contenant les paragraphes s'affichent par dessus mes images floatées. Les paragraphes sont repoussés normalement par les éléments floatés. L'affichage se fait normalement dans IE.

J'ai essayé d'utiliser des z-index mais cela ne fonctionne pas.

Le client ne veut pas voir le nom du site j'ai donc remplacé tout les contenus par bla (ou blabla Smiley cligne ).

Voici le code html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="content-language" content="fr" />
    <!-- compliance patch for microsoft browsers -->
    <!--[if lt IE 7]><script src="IE7/ie7-standard-p.js" type="text/javascript"></script><![endif ]-->
    <link href="./css/bla.css" rel="stylesheet" type="text/css" />
    <title>
      blabla.com
    </title>
    <object type="image/jpeg" data="./images/interface/bla.jpg"></object>
  </head>
  <body>

    <div id="menu">
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
      <a href="./index.php?contenu=bla">bla</a>
    </div>
    <div id="content">
      <div id="bandeau">
        <img src="images/interface/bla.png" alt="blabla.com" />
        <h1>
          L'esprit des lieux
        </h1>
      </div>
      <img class="right" src="images/esprit/bla.jpg" alt="bla"/>
      <img class="left"src="images/esprit/bla.jpg" alt="bla"/>
      <div class="text">
        <p>
          blabla
        </p>
        <p>
          blabla
        </p>
      </div>
      <div class="spacer">&nbsp;</div>
      <img class="left"src="images/esprit/bla.jpg" alt="bla"/>
      <img class="right" src="images/esprit/bla.jpg" alt="bla"/>
      <div class="text">
        <p>
          blabla
        </p>
        <p>
          blabla
        </p>
      </div>
      <div id="bottom">
        Conception et r&eacute;alisation <a href="mailto:FoW">FoW</a> pour blabla.com
      </div>
    </div>
  </body>
</html>


et voici la css

* { font-family: "Times New Roman", Verdana, Geneva, Arial, Helvetica, sans-serif;}


body {
  background: transparent url("../images/interface/bla.jpg") 0px 0px no-repeat fixed;
  background-color: #191007;
  text: #000000;
  text-align: center;
  margin: 0;
  padding: 0;}

div#content {
  background: #FFFEE2 url("../images/interface/bla.jpg") 58% 100% no-repeat fixed;
  border: none;
  color: #663C31;
  font: bold 17px Verdana, sans-serif;
  position: absolute;
  top: 0px;
  left: 200px;
  right: 25px;
  margin: 0;
  padding: 0;}

div#bandeau {
  background: transparent url("../images/interface/bla.jpg") repeat;
  clear: both;
  height: 250px;}

div#bandeau img {
  border: none;
  clear: both;
  margin: 30px 0 50px;
  padding: 0;}

div#bandeau h1 {
  color: #FFFEE2;
  font-size: 2.5em;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.5em;
  vertical-align: middle;
  text-align: center;
  margin: 0 0 20px 0;
  padding: 10px 0 25px;}

h2 {
  font-size: 2em;}

h3 {
  font-size: 1.5em;}
 
.spacer {
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;}

.spacerleft {
  clear: left;
  height: 0;
  margin: 0;
  padding: 0;}

.spacerright {
  clear: right;
  height: 0;
  margin: 0;
  padding: 0;}

img.right {
  float: right;
  display: block;
  border: solid 1px #630100;
  margin: 1em;}

img.left {
  float: left;
  border: solid 1px #630100;
  margin: 1em;
  padding: 0;}

.news {
  background-color: #FFFEE2;
  border: solid 4px #660000;
  font-size: 1.2em;
  text-align: center;
  clear: left;
  width: 370px;
  margin: 2em;
  padding: 0 0 1em;}

.news h1 {
  background: transparent url("../images/interface/bla.jpg") repeat;
  color: #FFFECC;
  font: italic 25px "Times New Roman";
  letter-spacing: 0.5em;
  text-align: center;
  vertical-align: middle;
  height: 90px;
  margin-top: 0;
  padding: 15px 0 5px;}

.text {
  background: #FFFECC url("../images/interface/bla.jpg") 58% 100% no-repeat fixed;
  border: none;
  border-top: solid 1px #663C31;
  border-bottom: solid 1px #663C31;
  margin: 2em 0;
  padding: 0.5em;}

.text li {
  list-style: none;}

div#content a {
  color: #8E5344;}

div#content a:hover {
  color: #D47B43;}

div#menu {
  font: 14px Verdana, sans-serif;
  position: fixed;
  top: 158px;
  left: 0px;
  width: 200px;
  height: 700px;}

div#menu a {
  display: block;
  background: transparent url("../images/interface/bla.jpg") 0px 0px no-repeat fixed;
  border: none;
  color: #FFFEE2;
  font: bold 1em sans-serif;
  text-decoration: none;
  text-align: center;
  margin: 0px;
  padding: 5px 10px;}

div#menu a:hover {
  background: transparent url("../images/interface/bla.jpg") 0px 0px no-repeat fixed;
  color: #990000;}

div#bottom {
  background-color: #630000;
  border: none;
  color: #FFFFCC;
  font-size: 0.7em;
  text-align: center;
  clear: both;
  margin: 30px 0 0 0;
  padding: 0em;}

div#bottom a {
  color: #FFFFB3;}


Si d'aventure vous voyez une incohérence dans le code html ou la css, n'hésitez pas à me faire une remarque.

Je vous remercie par avance si vous trouvez une solution à mon prolème.


FoW
Modifié par FoW (28 Mar 2005 - 03:16)
Alors,

J'ai fait pas mal d'essais pour identifier l'origine de mon problème.

Dans :
.text
{
background: #FFFECC url("../images/interface/bla.jpg") 58% 100% no-repeat fixed;
border: none;
border-top: solid 1px #663C31;
border-bottom: solid 1px #663C31;
margin: 2em 0;
padding: 0.5em;
}


Lorsque j'enlève la propriété fixed du background, mon div s'affiche à nouveau en dessous des images floatées. Par contre, bien sur, dans le div on ne vois plus la photo de fond.

D'où vient ce bug d'affichage. FF est conforme au spécification, j'ai donc fait une erreur quelque part mais où???

SVP aidez moi, merci d'avance.

FoW
Modifié par FoW (25 Mar 2005 - 18:11)
Salut,


J'ai simplifier le code et la css, j'ai donc mis à jour mes deux posts précedents.

upload/1284-bugFFIE.png

Je vous ai fait un petit dessin pour être plus clair :

body : noir,
menu: jaune;
content: blanc cassé,
text: vert,
img flottées: bleu.

En haut le rendu que je souhaite (dans IE), en bas le résultat obtenu dans FF.

J'espère quand même avoir une réponse, si un gourou du css pouvait passer ici et me dire d'où peut venir le problème, je serais trop heureux.

FoW
Modifié par FoW (25 Mar 2005 - 19:15)
Je veux bien chercher, mais pas jouer au devinettes. Un code problématique sur des images, mais sans les images, avec IE7, mais sans IE7, le tout n'étant pas en ligne... Franchement, ça ne se résoud pas (du moins, dans le temps qu'on peut y accorder ici) sur le papier.

Je comprends l'envie de confidentialité du client, mais tu devrais tout de même pouvoir mettre une simili-page en ligne et fournir une url.
Ok je vais essayer de mettre une simili page quelquepart.

EDIT : j'ai pu l'héberger sur un site malheureusement c'est un site multimania donc ils rajoutent pas mal de trucs (frame pop-up ...) mais on peux bien voir la différence entre ie et ff.

c'est ici

Comme vous pourrez le voir si vous utilisez les outils de dévelloppement de FF, si on retire le fixed dans le .text, les images passent à nouveau par dessus les div.text.

D'avance merci


FoW
Modifié par FoW (27 Mar 2005 - 16:09)
Si j'ai bien saisi, le but du jeu est d'avoir les images par-dessus le texte, c'est ça ?

Auquel cas, il semble bien y avoir un bug de FireFox.

Dans l'immédiat, l'affichage recherché peut être apparemment rétabli avec :


img.right {
  float: right;
  display: block;
  border: solid 1px #630100;
  margin: 1em;
	position: relative;
	z-index: 1;
  }

img.left {
  float: left;
  border: solid 1px #630100;
  margin: 1em;
  padding: 0;
	position: relative;
	z-index: 1;
  }
.text {
  background: #FFFECC url("blafond1.jpg") 58% 100% no-repeat fixed;
  border: none;
  border-top: solid 1px #663C31;
  border-bottom: solid 1px #663C31;
  margin: 2em 0;
  padding: 0.5em;
  }
Tu as bien compris! Smiley cligne

Un grand merci Smiley biggrin , ta technique a fonctionnée. J'avais essayé avec des z-index mais sans mettre de :

position: relative;

Faut-il obligatoirement mettre ça pour que les z-index fonctionne.
FoW a écrit :

Faut-il obligatoirement mettre ça pour que les z-index fonctionne.

Pour appliquer z-index à un élément, celui-ci doit être positionné.
Recommandation CSS2 du W3C a écrit :

'z-index'
Valeur : auto | <entier> | inherit
Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : sans objet
Médias : visuel

Pour une boîte positionnée, la propriété 'z-index' spécifie :

1. Le niveau dans l'empilement pour une boîte dans un contexte d'empilement donné ;
2. L'établissement par une boîte d'un contexte d'empilement local.

http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-z-index
Sujet clos
Aller à