28220 sujets

CSS et mise en forme, CSS3

[Résolu]Divers problèmes, bug de IE, positionnement div, et javascript

Bonjour,
j'ai quelques problèmes avec une page

1) les 3 premières zônes ne sont pas reconnues par IE
2) les descriptions s'affichent toutes lors du chargement de la page (or j'aimerais qu'on les voit uniquement lorsqu'on passe la souris sur les 9 zones réactives)
3) comment positionner mon paragraphe de description sans utiliser un padding (a cause des problèmes de compatibilité entre IE et FF...)

voilà, j crois que pour le moment c'est tout... maintenant si vous voyez des trucs "bizarres" dans mon code n'hésitez pas à me le faire remarquer... j suis débutante...
merci d'avance pour votre aide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
 <title>Ecole de Musique de Rolle et Environs</title>
  <link rel="stylesheet" type="text/css" href="../../css/instrum.css" />
 <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
</head>

<body>

      <script type="text/javascript">

              <!--
                  function montre(id) {
                  var d = document.getElementById(id);
                      for (var i = 1; i<=10; i++) {
                           if (document.getElementById('description'+i)) {document.getElementById('description'+i).style.display='none';}
                           }
                           if (d) {d.style.display='block';}
                           }
              //-->

      </script>

                  <ul>
                      <li><a  onmouseover="javascript:montre('description1');" onmouseout="javascript:montre('');" id="instrum1" title="instrum1" href="http://www.fanfaredeperroy.ch"  </a></li>


                                         <div id="description" >

                                           <p id="description1">  description 1 </p>

                                        </div>
                      </ul

                  </div>
</body>

</html> 

 

ul{

  position:relative;    
  list-style:none;       
  padding: 0px;                           
  margin: 0px;
  width: 400px;        
  height:400px;
  background: url("../formations/vents/instrum/instruments.jpg") no-repeat;     

}

/a{

  position:absolute;       
  display:block;    
  width:40px;
  height:40px;
  text-decoration:none;    
  font: bold 9px Verdana,Arial,Helvetica,sans-serif;
  color:#000000;
}


a:hover{

  font-size:10px;
  color:#660000;
  }

#instrum1{

  top: 40px;    
  left: 32px;  /
  padding: 0px 0px 0px 0px;   
  }

#description{
        padding: 108px;
        font: 80% Veranda, arial, sans-serif;
        width: 150px;
        }

Modifié par p_tite_jo (14 Nov 2005 - 12:54)
Pour commencer tu peux mettre 0 à la place des 0px, ensuite je ne vois pas d'ou viens le problème... mais je m'y plonge !
Dans le body met un montre('') pour cacher tout. Dans le code html tes balises a des premiers éléments ne sont pas fermés.
Corrige déjà tout ça et ça ira mieux ;oD
Modifié par mamat- (07 Oct 2005 - 15:14)
tout d'abrd merci de m'aider...
j'ai corrigé ma page et j'ai rajouté un montre(")dans mon body. mais comme tu le dis si bien, ça cache tout... comment je fais pr que ça réapparaisse ?
Modifié par p_tite_jo (09 Oct 2005 - 16:00)
Sujet clos
Aller à