5603 sujets

Sémantique web et HTML

Doctype et rollover

Bonjour, j'ai fait un menu avec 4 liens, 2 images avec 4 zones. le menu fonctionne.. sauf quand je déclare une doctype ! voici mes sources (ça doit être pas grand chose.. c'est ça qui énerve d'ailleurs) 
                                                                                                                                                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<title><title>Couleur d'Afrique</title></title>

 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="conteneur">

         <ul id="menu">
          <li id="menu1"><a href="#">1</a></li>
          <li id="menu2"><a href="#">2</a></li>
          <li id="menu3"><a href="#">3</a></li>
          <li id="menu4"><a href="#">4</a></li>
         </ul>

</div>

</body>
</html>
et voici la feuille de style 
  body {
margin: 0;          /* ie5 centrage, pour éviter les marges */
text-align: center; /* centrage (#1), pour corriger le bug de centrage IE */
/*margin-top:10px; décalage du bord haut*/
     /* background-color:silver;*/
}
#conteneur {
margin-left: auto;    /* centrage, pour éviter les marges */
margin-right: auto;   /* centrage, pour éviter les marges */
text-align: left;     /* #1 centrage, on rétablit l'alignement normal du texte */
width:640px;          /* important donner une largeur pour centrage*/

}

#menu{
position: relative;
width:640;
height:480;
margin:0;
padding:0;
background:url(img/syl1.jpg);
}
#menu ul {
        position:absolute;
        display:block;
      }
#menu li {
        position:absolute;
        list-style: none;
        margin:0;
        padding:0;
}
#menu a {display:block;}

#menu1{left:0px; top:0px; width:320px; height:240px;}
#menu2{left:320px; top:0px; width:320px; height:240px;}
#menu3{left:0px; top:240px; width:320px; height:240px;}
#menu4{left:320px; top:240px; width:320px; height:240px;}

#menu1 a{height:240px;}
#menu2 a{height:240px;}
#menu3 a{height:240px;}
#menu4 a{height:240px;}

#menu1 a:hover{background: url(img/syl2.jpg) 0px 0px no-repeat;}
#menu2 a:hover{background: url(img/syl2.jpg) -320px 0px no-repeat;}
#menu3 a:hover{background: url(img/syl2.jpg) 0px -240px no-repeat;}
#menu4 a:hover{background: url(img/syl2.jpg) -320px -240px no-repeat;}
Egalement dispo en ligne ICIhttp://barthsyl.free.fr J'ai retiré l'entête doctype et ça fonctionne. Merci d'avance
Bonjour,
pour le doctype je te conseil de faire une recherche sur Mode Quirks.

Le mode de rendu Quirks (appelé aussi mode de compatibilité descendante) déclenché par l'absence de doctype
a en partie pour effet une interprétation plus permissive de la syntaxe CSS.

Ce qui fait que dans ce mode, les déclarations width:640 et height:480 de #menu sont interprétées comme
width:640px et height:480px contrairement au mode standard qui n'appliquera pas des valeurs sans unité excepté la valeur 0.
Sujet clos
Aller à