Je me promène sur plusieurs forums de webmasters (souvent sous le pseudo de SIBELIUS). J'aime y apprendre des choses mais également essayer de donner des coups de main aux webmasters en difficulté avec leurs codes HTML ou CSS.
Parfois, ce n'est pas toujours facile...
Un membre de forum en difficulté vient d'exposer un problème de positionnement de son menu déroulant.
Après quelques explications, le problème semble s'enliser dans l'incompréhension. Je me décide alors de regarder le code source de sa page. C'est assez sidérant et je comprends pourquoi la communication passe mal.
Je vous livre le code en ayant pris soin de censurer certaines parties afin de préserver l'anonymat de cette personne car il ne sert à rien de la blâmer. Ce n'est pas de la moquerie gratuite, c'est vraiment... un code HTML stupéfiant.
C'est à se demander comment un navigateur peut réussir à afficher correctement un tel document dont le code va à l'encontre de toutes les règles du HTML. Il s'affiche pourtant assez convenablement sur IE et Firefox.
Voici le code source du document :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>(censuré)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" border="1">
<tr>
<td colspan="2"><img src="images/logo.jpg" width="152" height="125">(censuré)</td>
</tr>
<tr>
<td height="23" colspan="2">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script 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">
<!--
/* CSS issu des tutoriels Alsacreations */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 0;
left: 0;
z-index:100;
width: 100%;
}
etc.
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
</ul>
</dd>
</dl>
<dl> (etc.) </dl>
</div>
</body>
</html> </td>
</tr>
<tr>
<style type="text/css">
#menuheader{
position: relative;
z-index: 1;
}
</style>
<td width="15%">
Menu </td>
<td width="85%" rowspan="2"> </td>
</tr>
<tr>
<td>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
Menu 2
</body>
</html>
</td>
</tr>
<tr>
<td colspan="2">
<html>
<body>
Envoyez un courrier électronique à (censuré)</body>
</html>
</td>
</tr>
</table>
</body>
</html>
Commentaires
Je suis pas allé vérifier, mais ça ressemble bien à du Site du zéro - style :D
Gagné ?
Perdu
Dans le même genre :
www.fontaine38.fr/index.p...
Là je me peux mettre le nom en clair, c'est le site de ma commune (donc payé avec mes sous) et j'ai signalé l'erreur il y a 2 ans (enfin pas que celle-ci, le site en est bourré) en leur proposant meme un coup de main... jamais eu de réponse.
Ce site a été développé par une grosse agence qui est tout à fait capable de faire les choses proprement mais là ils avaient dû y coller un stagiaire.
Joli... en plus, avoir plein de <body> ça peut être vachement pratique quand on doit aller à plein d'endroits en même temps, dommage qu'il n'y ait pas autant de têtes! Pour son problème, je suis sûre qu'il peut le résoudre avec quelques iframes ;)
Ou simplement en rendant son code lisible (en l'écrivant à la main par exemple)...
Il y a trop de tête, c'est chimèrique !
la recherche du coupable est inutile, car La moquerie est un vilain défaut...
En tout cas, cela prouve qu'il est important d'avoir le code source en lien, tout du moins un extrait!
Le plus étonnant, c'est que cela fonctionne quand même??!! :o
JE saais que dans une seul page, y avait plusieurs <html> et body ^^
Eh ben... ça m'était déjà arrivé de voir plusieurs <head> et <body> dans une page, mais c'était du à des includes...
La c'est carrément incroyable. Même le pire des WYSIWYG ne serait pas capable de faire un truc pareil. On dirait une concaténation de plusieurs bouts de pages découpés :D
Rien que quand on voit qu'il y 4 balises <html></html>, et autant pour <head></head> et <body></body>, le CSS en millieu de page, c'est sur qu'on se demande comment sa page peyut être affichée. Sinon il ne faut pas se moquer de lui mais plutôt l'aidé, car l'erreur est humaine, donc evitons que ça dégénére comme avec l'histoire de Cliranet...
Ils sont bien gentils les navigateurs d'interpréter tout ça ...
Ouais respect aux gentil navigateurs ^^
Enfin juste pour dire que ce genre de code est vraiment tres courant, je traine souvent dans des forums de webmaster tres tres debutant et c'est une chose que je leur explique souvent...
Il doit trainer sur le web un tuto qui explique mal cette technique, et les debutants s'en serve.
"Il doit trainer sur le web un tuto qui explique mal cette technique, et les debutants s'en serve."
Je dirais plutôt que les débutants veulent aller trop vite et apprendre le PHP en même temps que le HTML/CSS. C'est aussi parce que les gens utilisent le terme pseudo-frame et bonjour la confusion. Ouais voilà, je l'ai dis ! :)