Dudu
lundi 22 mai 2006 à 00:57
Salut
Relis le premier message de Dan dans cette discussion (message #2 en haut de la page):
CITATION(Dan @ vendredi 05 mai 2006, 18h53)
Tu t'es mélangé les pinceaux entre tes <ul> et <li>
En fait, si tu veux imbriquer 2 <ul> il faut que le second soit précédé d'un <li>
CODE
<ul>
<li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>...</li>
</ul>
La réponse à tes questions y est
Si on regarde ton code:
HTML
<body>
<div id="header">
<ul id="nav_bg">
<li id="nav">
<li id="photo"><a href="/photos" title="Portfolio photo">photos</a></li>
<li id="graphik"><a href="/graphik" title="Portfolio Graphik">graphik</a></li>
<li id="blog"><a href="http://www.graphikandsound.com" title="Go to Graphik'n'sound">graphikandsound.com</a></li>
</li>
</ul>
<h1 id="blogname" onclick="location.href='http://www.vendran.com/vendran';" style="cursor: pointer;"></h1>
</div>
</div>
Dans ce code, on part sur une erreur aux lignes 4 et 5. Un <li> ne peut contenir d'autres <li> tels quels.
En revanche un <li> peut contenir des <ul> qui eux contiendront des <li>.
De plus, la dernière ligne est une balise fermante </div>: où est la balise ouvrante qui va avec ?
Rien à voir mais tu devrais rajouter un texte dans ton <h1> ce n'est pas correct de le laisser vide (même si le validateur ferme les yeux là-dessus). Pour ne pas que ce texte se superpose à l'image d'arrière-plan, tu peux ajouter un code CSS tel que celui-ci
CODE
h1#blogname {text-indent: -9999px}
C'est une astuce pour 'masquer' le texte en le mettant hors du champ de vue.
Continuons:
HTML
<p>Site actuellement en pleine “rénovation” !<br />
Vous trouverai prochainement mes travaux en tant que graphiste mais aussi mes photos.<br />
En attendant vous pouvez quand même voir mes photos les plus récentes sur <a href="http://www.flickr.com/photos/vendranstock/sets">ma page Flickr.com</a> ou tous simplement vous diriger sur mon blog personnel <a href="http://www.graphikandsound.com">Graphikandsound.com</a>.
</p>
</p>
Idem: la dernière ligne est une balise fermante </p> où est la balise ouvrante qui va avec ?
(Psst, "Vous trouverez" )CODE
<div id="sidebar">
<li>
<ul>
<li><a href="http://www.vendran.com/vendran/category/news/" title="Voir tous les articles classés dans News">News</a> (1)
</li>
</ul>
</li>
</ul>
</div>
Un <li> doit
obligatoirement être contenu soit dans un <ul> soit dans un <ol>. Je vois bien un </ul> mais pas son équivalent <ul> (oserais-je dire 'encore une fois' ?)
En corrigeant ces erreurs (que le validateur aurait du t'indiquer en toute théorie) tu devrais avoir un affichage correct. Reste a adapter certains codes CSS (ceux de #nav_bg et #nav notamment) puisque pour l'instant tu as tenté de les associer à un code HTML incorrect.
Avant de tenter d'obtenir un "
affichage correct" (= présentation = CSS), il faut toujours d'abord être sûr et certain de la "
validité de son code" (= sémantique = HTML).
Dans l'absolu, il serait donc idéal d'avoir fini entièrement son code HTML avant de toucher à la feuille de style (c'est pas évident je te l'accorde).
En fait, ton cas constitue un parfait exemple à ceci "
Valider ? Pour quoi faire concrètement ?".
Notre chère Monique en avait d'ailleurs extrait
LA phrase la plus importante que je t'amène à lire et à re-lire
CITATION(LaurentDenis @ Alsacréations)
Les styles CSS, on l'ignore trop souvent, ne sont en effet pas appliqués au code HTML que vous avez écrit, mais au code tel qu'il a été interprété et corrigé par le navigateur, qui s'efforcera de rétablir un code valide et donc utilisable
En clair, ton problème d'affichage ne concerne pas les CSS, il est entièrement dû à une mauvaise imbrication des balises HTML.
Bon courage, A+
) et surtout, j'ai retrouvé mon menu et mes rollovers !