5568 sujets

Sémantique web et HTML

Bonjour,

J'ai essayé de valider cette page sur le validateur w3c.

Je ne comprend pas vraiment mes 7 fautes fautes qui sont dues au <div> es ce que quelqu'un pourrait m'expliquer ?

Merci d'avance
Modifié par Tidus_6_9_2 (18 Jan 2008 - 13:05)
Y'a personne pour me donner un coup de pied ou un coup de main ??? Je demande pas grand chose j'éspère ... Smiley langue parce que en ce moment avec toutes les fautes que j'ai la seul chose que j'ai envie de faire c'est à peux pres ca Smiley crash
Salut Tidus Smiley cligne ,

comme expliqué sur cet article de pompage Les listes de définitions :
a écrit :
Vous ne pouvez pas utiliser d'éléments de type bloc dans un terme de définition [ dt ].
Ce qui exclut les <div> Smiley langue !

Cela dit les <div> en question ne servent qu'à donner un line-height qu'il suffirait de mettre directement au niveau du <dt>.

D'autre part je t'invite à relire les tutos indispensables ainsi que la FAQ pour corriger notamment :
- le DOCTYPE qui est incomplet,
- les <div align="center"> inutiles
- les onMouseOver et onMouseOut qu'il vaut mieux prendre l'habitude d'écrire en minuscules
- etc... Smiley smile

A+
En faite le problème c'est que c'est un menu déroulant en js avec de l'html (voir cette page) donc si je change un des dt et que je lui met un line-height, il s'appliquera à tout le menu, alors que je veux qu'il ne s'applique qu'a 3 objets du menu.

Pour ce qui est du doctype est-il vraiment faux ? Car j'ai repris celui d'une page qui est "sans fautes" (voir ici)

Pour ce qui est du reste je m'en vais les corriger ^^
Modifié par Tidus_6_9_2 (18 Jan 2008 - 12:45)
pour appliquer du style seulement sur 3 élement tu peur les marquer par des attribure
class=" " 
et leur affecter les style que tu veux ^^
Smiley mur je suis trop con haha j'avais pas penssé... Mais je vois pas trop comment l'utiliser sur mon texte en faite Smiley confus

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) { 
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<script language="JavaScript" type="text/JavaScript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
</script>
<style type="text/css" media="screen">
body {
	font-family: Arial, Helvetica, sans-serif;
}
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	position: absolute;
	width: 90.5%;
	left: 5.6%;
	z-index: 100;
}
#centrer_verticalement{
	line-height: 30px;
}
#menu dl {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: small;
	width: 14%;
	line-height: 15px;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	border: 1px solid #990000;
	height: 30px;
	background-color: #F5E8E2;
	font-family: Arial, Helvetica, sans-serif;
	margin: 1px;
}
#menu dd {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #E4E4E4;
	font-size: 12px;
	vertical-align: middle;
	width: 100%;
	margin-top: -1px;
}
#menu li {
	text-align: left;
	width: 100%;
}
#menu li a, #menu dt a {
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	color: #000000;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #990000;
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
}
.Style1 {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
</style>
</head>
<body>
<div id="menu"> 
  <div align="center"> 
    <dl>
      <dt class="Style1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre();"> 
        <div id="centrer_verticalement"><a href="#">Home</a></div>
      </dt>
      <dd id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre();"> 
        <ul>
          <li><a href="../home/index.php">Bienvenue</a></li>
          <li><a href="../home/valeurs.php">Nos valeurs</a></li>
          <li><a href="../home/conseil.php">Conseil-Concept</a></li>
          <li><a href="../home/news.php">News</a></li>
          <li><a href="../home/plansite.php">Plan du site</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt class="Style1" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();"><div id="centrer_verticalement"><a href="#">Prevoyance</a></div></dt>
      <dd id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();"> 
        <ul>
          <li><a href="../prevo/conseil.php">Conseil global</a></li>
          <li><a href="../prevo/offres.php">Comparatif d'offres</a></li>
          <li><a href="../prevo/lpp.php">Gestion LPP</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt class="Style1" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre();"><a href="#">Planification<br>
        patrimoniale</a></dt>
      <dd id="smenu3" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre();"> 
        <ul>
          <li><a href="../planif/etapes.php">Etapes de la planification</a></li>
          <li><a href="../planif/fiscalite.php">Fiscalit&eacute; et croissance</a></li>
          <li><a href="../planif/gestion.php">Gestion du patrimoine</a></li>
          <li><a href="../planif/retraite.php">La retraite &agrave; la carte</a></li>
          <li><a href="../planif/patrimoine.php">H&eacute;ritages et successions</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt class="Style1" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();"> 
        <div id="centrer_verticalement"><a href="#">Immobilier</a></div>
      </dt>
      <dd id="smenu4" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();"> 
        <ul>
          <li><a href="../immo/conseil.php">Conseils immobiliers</a></li>
          <li><a href="../immo/financement.php">Financements</a></li>
          <li><a href="../immo/hypoch.php">Achats sur Suisse</a></li>
          <li><a href="../immo/hypof.php">Achats sur France</a></li>
          <li><a href="../immo/taux.php">Taux hypoth&eacute;caires</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt class="Style1" onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre();"> 
        <a href="#">Analyse<br>
        financi&egrave;re </a> 
      <dd id="smenu5" onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre();"> 
        <ul>
          <li><a href="../finanz/profil.php">Analyse de votre profil</a></li>
          <li><a href="../finanz/orientation.php">Orientation financi&egrave;re</a></li>
          <li><a href="../finanz/portefeuille.php">Ad&eacute;quation du portefeuille</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt class="Style1" onMouseOver="javascript:montre('smenu6');" onMouseOut="javascript:montre();"> 
        <a href="#">Produits<br>
        sp&eacute;cialis&eacute;s</a> 
      <dd id="smenu6" onMouseOver="javascript:montre('smenu6');" onMouseOut="javascript:montre();"> 
        <ul>
          <li><a href="../prod/pee.php">Plan cadres PEE</a></li>
          <li><a href="../prod/perenity.php">Perenity&reg; gestion dedi&eacute;e</a></li>
          <li><a href="../prod/mal.php">Gestion des franchises</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt class="Style1" onMouseOver="javascript:montre('smenu7');" onMouseOut="javascript:montre();"> 
        <div id="centrer_verticalement"><a href="#">Contact</a></div>
      </dt>
      <dd id="smenu7" onMouseOver="javascript:montre('smenu7');" onMouseOut="javascript:montre();"> 
        <ul>
          <li><a href="../corp/coll.php">Vos interlocuteurs</a></li>
          <li><a href="../corp/plan.php">Plan d'acc&egrave;s</a></li>
          <li><a href="../corp/contact.php">Demande de contact</a></li>
          <li><a href="../corp/jobs.php">Jobs</a></li>
          <li><a href="../corp/liens.php">Liens utiles</a></li>
        </ul>
      </dd>
    </dl>
  </div>
</div>
</body>
</html>


(Je sias que c'est ennuyeux quand on met du code comme ca désolé ^^)
Pourais-tu m'expliquer ou le mettre pour que cela reste pareil ?
Modifié par Tidus_6_9_2 (18 Jan 2008 - 12:54)
Tidus_6_9_2 a écrit :
si je change un des dt et que je lui met un line-height, il s'appliquera à tout le menu, alors que je veux qu'il ne s'applique qu'a 3 objets du menu.


cf. la réponse de hakkou...

En passant tous les <dt> ont déjà une même class Style1 : tu pourrais donc inclure tous les attributs de cette class directement au niveau du <dt>

Tidus_6_9_2 a écrit :
Pour ce qui est du doctype est-il vraiment faux ? Car j'ai repris celui d'une page qui est "sans fautes" (voir ici)
Je n'ai pas dit qu'il était faux mais incomplet Smiley cligne . D'ailleurs dans le lien que tu donnes il est comme ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
C'est tout bon, ma page est correcte désormais ^^ Merci pour votre aide les gars, bisous lol Smiley langue
Modifié par Tidus_6_9_2 (18 Jan 2008 - 13:04)