Bonjour,
Merci d'accorder un peu de ton temps à mon problème.
OMFG... j'ai fait une erreur, les codes sont en effet inversés, mais j'ai fait cette erreur en remplaçant les vraies valeurs par ces "1petit" et autres "2grand" histoire de simplifier la lecture du code.
Le problème n'est donc pas là, et par ailleurs, pourrais-je juste savoir pourquoi le code n'est pas valide ? Tu parles bien des normes W3C ?
En tout cas voici la page complète, attention ça fait peur... et je n'ose pas imaginer les erreurs d'invalidité, je ne l'ai encore jamais passé au validator...
Le fichier .html en intégralité :
<!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" />
<link rel="stylesheet" type="text/css" href="zen.css" title="Zen" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="rubrique.js"></script>
<script type="text/javascript" src="afficher_photos.js"></script>
<script type="text/javascript" src="commentaires.js"></script>
<title>Mon CV interactif</title>
</head>
<body>
<div id="haut">
<div id="logo"></div>
</div>
<div id="ligne"></div>
<div id="accueil">
<div class="menu">
<div class="menu_ouverture"></div>
<div class="menu_contenu">
<!-- sous-menu 1 -->
<span>
<div class="ferme"></div><span class="menu">site web</span>
<hr size="1px" noshade />
<ul class="sous-menu">
<li><a href="animxtasy.jpg" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
<li><a href="jeyjeysheaven.jpg" title="jeyjey's heaven"><img src="jeyjeysheaven.ico" alt="jeyjey's heaven" /></a></li>
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li> <!-- Je précise que les liens google c'est uniquement pour bénéficier du style donné aux liens dans la feuille de style, ça sera remplacé bien entendu. -->
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
</ul>
</span>
<!-- sous-menu 2 -->
<span>
<div class="ferme"></div><span class="menu">création graphique</span>
<hr size="1px" noshade />
<ul class="sous-menu">
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
</ul>
</span>
<!-- sous-menu 3 -->
<span>
<div class="ferme"></div><span class="menu">retouche photo</span>
<hr class="derniere" size="1px" noshade />
<ul class="derniere">
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
<li><a href="http://www.google.fr/" title="animxtasy"><img src="animxtasy.ico" alt="animxtasy" /></a></li>
</ul>
</span>
</div>
<div class="menu_fermeture"></div>
</div>
<div class="contenu">
<div class="rubrique">
<div class="titre">p o r t f o l i o</div>
<div class="icones">
<div class="accueil"></div>
<div class="cv"></div>
<div class="portfolio"></div>
<div class="contact"></div>
</div>
<div class="indication">
<span class="1">accueil</span>
<span class="2">cv</span>
<span class="3">portfolio</span>
<span class="4">contact</span>
</div>
</div>
<div id="debut_cadre">
<div id="affichage"><img id="photo" src="animxtasy.jpg" alt="animxtasy" /></div>
<div id="fin_cadre">
<div id="afficher_commentaires"></div>
</div>
</div>
<div class="commentaires">
<div id="cacher_commentaires"></div>
</div>
</div>
</div>
<div id="bande-verticale"></div>
</body>
</html>
Le fichier .css en intégralité (au cas où...) :
html {
font-size: 100%
}
body {
margin: 0;
padding: 0;
background-color: #ccc;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
}
div#haut {
height: 195px;
background-color: #000;
border-style: solid;
border-width: 0 0 5px 0;
border-color: #69c;
}
div#logo {
height: 50px;
width: 200px;
position: absolute;
left: 50%;
margin-top: 145px;
margin-left: -100px;
background: url(logo.png) no-repeat;
}
div#ligne {
height: 50px;
background: url(ligne.png) repeat-x;
}
div#accueil {
width: 900px;
position : absolute;
top: 252px;
margin-left: 50%;
left: -450px;
}
div.menu {
width: 200px;
float: left;
margin: 52px 0 0 0;
font-weight: bold;
font-variant: small-caps;
}
div.menu_ouverture {
height: 25px;
background: url(menu_ouverture.png) no-repeat;
}
div.menu_contenu {
margin: 0;
padding: 0 10px;
background: url(menu_contenu.png) repeat-y;
}
div.menu_contenu ul {
margin: 0 0 6px 0;
padding: 0;
list-style-type: none;
text-align: center;
}
div.menu_contenu ul.derniere {
margin: 6px 0 0 0;
}
div.menu_contenu li {
display: inline;
margin: 0 2px 0 0;
}
div.menu_contenu a {
color: #000;
text-decoration: none;
cursor: default;
}
div.menu_contenu a:hover {
color: #fff;
}
div.menu_fermeture {
height: 25px;
background: url(menu_fermeture.png) no-repeat;
}
div.contenu {
width: 700px;
float: right;
}
div.rubrique {
height: 75px;
width: 700px;
background: url(rubrique.png) no-repeat;
}
div.titre {
height: 24px;
width: 320px;
float: left;
margin: 25px 0 0 30px;
color: #fff;
font-weight: bold;
font-variant: small-caps;
}
div.icones {
height: 25px;
width: 175px;
float: right;
margin: 5px 5px 0 0;
}
div.indication {
height: 25px;
width: 130px;
float: right;
margin: 40px -25px 0 0;
color: #c96;
text-align: center;
font-weight: bold;
font-variant: small-caps;
}
div.indication span {
display: none;
}
div#debut_cadre {
width: 500px;
margin: 25px 0 0 25px;
background: url(debut_cadre.png) no-repeat;
}
div#affichage {
width: 448px;
margin-left: 50px;
padding: 60px 0 0 0;
border-style: solid;
border-width: 0 2px 0 0;
border-color: #333;
}
div#fin_cadre {
height: 52px;
width: 500px;
background: url(fin_cadre.png) no-repeat;
}
div#afficher_commentaires {
height: 52px;
width: 52px;
float: right;
background: url(afficher_commentaires.png) no-repeat;
}
div#afficher_commentaires:hover {
background: url(afficher_commentaires-hover.png) no-repeat;
}
div.commentaires {
height: 200px;
width: 200px;
position: relative;
top: -200px;
left: 325px;
background: url(commentaires.png) no-repeat;
display: none;
}
div#cacher_commentaires {
height: 52px;
width: 52px;
float: left;
background: url(cacher_commentaires.png) no-repeat;
}
div#cacher_commentaires:hover {
background: url(cacher_commentaires-hover.png) no-repeat;
}
div#bande-verticale {
height: 900px;
width: 600px;
margin: 0 auto 50px;
background: url(setoan.jpg) left bottom no-repeat;
background-color: #fff;
border: 2px solid #000;
z-index: -1;
}
hr {
margin: 6px 0;
color: #fff;
}
hr.derniere {
margin: 6px 0 0 0;
}
p {
text-align: justify;
margin-top: 0;
margin-bottom: 0;
}
.ferme {
height: 16px;
width: 16px;
float: right;
background: url(ferme.png) no-repeat;
}
.ouvert {
height: 16px;
width: 16px;
float: right;
background: url(ouvert.png) no-repeat;
}
.accueil {
height: 25px;
width: 25px;
position: relative;
right: 105px;
background: url(accueil.png) no-repeat;
}
.cv {
height: 25px;
width: 25px;
position: relative;
right: 70px;
top: -25px;
background: url(cv.png) no-repeat;
}
.portfolio {
height: 25px;
width: 25px;
position: relative;
right: 35px;
top: -50px;
background: url(portfolio.png) no-repeat;
}
.contact {
height: 25px;
width: 25px;
position: relative;
top: -75px;
background: url(contact.png) no-repeat;
}
Quant au script, c'est le même qu'au-dessus !
Voilà tout y est, pardon pour la longueur du post...
[/i] 
). (Il y a aussi le fait qu'une page peut faire appel à des ressources externes, images ou scripts JS par exemple, qui peuvent jouer un rôle dans le problème.)