Soucis multiples et divers ...

[MoiMM]

Salut à tous !

Je suis en train de faire mon nouveau site qui sera mon portfolio !

Je vais le propulsé avec wordpress ... mais ce n'est pas vraiment d'importance ... du moins je suppose !

Après moultes périples et incompréhensions ma mise en page commence à prendre forme mais voilà ... j'ai quelques "bug" dont je 'arrive pas à résoudre !!

1 / J'ai une bande sombre contenant ma première barre de menu qui devrai être collée en haut ... mais depuis que j'ai inséré mes boutons et rollovers ... cette "barre" est descendue d'une ch'tite dixaine de pixels ... et je n'arrive pas à la faire remonter !!

2/ Pour les rollovers je me suis inspiré de cet article ... mais le rollover sur le mot "Photos" ne fonctionne pas !! ... J'ai tout essayé sans succès !!

Pour voir ma page en construction c'est par là !!

HELP ! ... Merci d'avance !

[Dan]

Tu t'es mélangé les pinceaux entre tes <ul> et <li>

line 35 column 2 - Warning: missing <li>

line 34 column 2 - Warning: missing </ul> before </div>

line 42 column 2 - Warning: discarding unexpected </div>

line 65 column 5 - Warning: replacing <p> by <br>

line 65 column 5 - Warning: inserting implicit <br>

line 65 column 5 - Warning: <br> element not empty or not closed

line 78 column 2 - Warning: missing </div> before <li>

line 79 column 4 - Warning: inserting implicit <ul>

En fait, si tu veux imbriquer 2 <ul> il faut que le second soit précédé d'un <li>

<ul>
  <li>
    <ul>
       <li>...</li>
       <li>...</li>
    </ul>
  </li>
  <li>...</li>
</ul>

[MoiMM]

Merci Dan !

...

Je vais aller me nourir un peu et je me plonge dans cette histoire de lu et de li !!

Bon' app' !

[MoiMM]

Bon ... ça avance ... un peu ... mais c'est pas encore ça !!

Mon résultat n'est pas encore au top ... et puis les rollovers n'ont pas suivi ...

... enfin bon ... c'est déjà mieux que si c'était pire !!

[jeanpierre949]

tu as mis margin:0; padding:0; pour #nav_bg ul ?

[Julien L.]

<li id="nav_bg">

<ul 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=&quot;http://www.graphikandsound.com" title="Go to Graphik'n'sound">graphikandsound.com</a></li>

</ul>

</li>

Pourquoi ce <li> ?

Modifié 6 Mai 2006 par Julien L.

[MoiMM]

Pourquoi ce <li> ?

<{POST_SNAPBACK}>

Pour être sincère ... je sais pas trop ! ... je fais plus de la bidouille qu'autre chose !

C'est un theme wordpress que j'ai coplètement refait ... et j'ai gardé (et modifié) la structure

"nav_bg" contient l'image de l'entête et la couleur grise pour du fond

"nav" mes rollovers du menu

?!?

**bon c'est good pour les rollover d'ailleurs ... j'ai juste retaper ma ligne "li#photo a:hover, li#photo a:focus" dans BBedit et maintenant ça marche correctement !

Jusqu'a présent je faisait les modif' avec CSSEdit mais on dirait que la ligne n'était pas prise en compte !

[MoiMM]

Bon ... alors y a du mieux ... mais ... c'est pas encore ça !

Disons que tout va pas trop mal sous Firefox ... mais il y a tjs un ch'tit décalage du menu sous Safari !!

Quelqu'un peut il me dire comment cela s'affiche t'il sous PC !?

-->> La page en question !

HELP !!

[MoiMM]

Personne ne peut m'aider !???

[Dan]

Sous PC avec Firefox, ça s'affiche correctement.

Mais tu as encore des problèmes avec tes <ul> et <li>

<li id="nav_bg">
	<ul 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>
</ul>
</li>

Il n'y a pas de <ul> avant ton premier <li>

[MoiMM]

Tout ce que j'essaye ne marche pas ! ... ou en tout cas c'est pire !

...

Le <ul> je le mets où et comment !?

J'ai testé de le mettre tout seul sous le <div id="header"> mais ça marche pas !

En tout cas merci encore merci Dan pour le renseignement concernant l'affichage de Firefox sous PC !

[NorSeb]

Bonjour,

Le <ul> je le mets où et comment !? 

Il faut mettre le <ul> avant la liste des <li>. Tu peux faire ca aisément avec un éditeur de sites ou un simple éditeur de texte.

Je conseille vivement de réviser l'HTML. Pour cela tu as tout un tas de sites bien utiles (au hasard : allhtml.com)

[MoiMM]

J'ai essayé de mettre le <ul> avant le <li> ... c'est a dire comme ça :

	<div id="header">
	<ul>
	<li id="nav_bg">
	<ul 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>
</ul>
</li>

Mais ça détraque tout ! ... (voir la page ... je l'ai lassée avec le <ul> pour que vous voyez ce que ça donne !

[Dudu]

Bonjour

J'ai essayé de mettre le <ul> avant le <li> [...] Mais ça détraque tout !

Çà me semble parfaitement logique

Tu n'es pas sans ignorer qu'une balise ouvrante appelle une balise fermante, en (X)HTML.

Alors, elle est où ta balise fermante </ul> ?

Ton plus gros problème sur cette page, c'est globalement l'imbrication des balises. Rappelle-toi toujours que ça fonctionne comme les parenthèses, ou comme les poupées russes si tu préfères; et qu'il faut toujours une balise fermante à une balise ouvrante.

Je rappelle aussi que Firefox, comme tout logiciel qui se veut multi-plateforme a un rendu identique sur chaque plateforme. Donc ce que tu vois avec Firefox Mac est ce que tu verras avec Firefox Windows (+ Linux + autres etc..).

NB: bien sûr ceci n'est valable qu'à versions égales.

Pour t'y retrouver n'hésites pas à utiliser les "commentaires HTML".

Ils sont sous la forme <!-- ici le commentaire, qui ne sera jamais interprété -->

Exemple

<div id="toto">
<div id="tata">
</div> <!-- tata -->
</div> <!-- toto -->

La différence d'affichage entre plusieurs navigateurs (Firefox, Safari, IE Win, IE Mac ..) tient à la particularité de chaque navigateur de corriger les erreurs, notamment dans l'imbrication des balises.

PS: Internet Explorer n'est pas un logiciel multi-plateforme. Il existe une version Mac et une version PC, et elles n'ont en commun que le nom (contrairement à Firefox ou Opera par exemple)

PPS: Pour les puristes, oui certaines anciennes normes HTML (3.2, 4.01 Transitional) n'obligent pas à fermer les balises. Mais je simplifie mon discours..

[Julien L.]

<ul 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>
</ul>

..suffirait, modifie également ta feuille de style.

Bouge simplement ce contenu dans ul#nav.

#nav_bg {

height: 30px;

background: url(images/bg_haut.gif) no-repeat left #5c5c5c;

margin: 0px;

padding: 0px;

}

Modifié 11 Mai 2006 par Julien L.

[MoiMM]

Bon ... y a du mieux dans le pire !

Logiquement ma barre du haut devrait être corect dans tous les navigateurs maintenant !

J'ai modifié de cette façon :

	<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>
</ul>

Mais le drame dans cette histoire ... c'est que j'ai perdu mes menu avec les rollovers !!

J'ai modifié dans mon CSS pour pour modifier les ul#nav en li#nav pour voir ... mais nada ... !

>> Julien L.

J'ai tenté ta proposition ... mais je ne suis arrivé à rien ... je n'avais plus l'image de fond ... juste mes 3 menu qui flottaient !! dommage !

PPPfff ... j'aimerai bien régler cette histoire pour pouvoir finir l'aspect mise en page graphique !!

Je sent que je suis pas loin mais mon cerveau commence à rentrer en ébullition !!

En tout cas merci à tous !

[MoiMM]

AUUUU SEEECOOUUURRR !! ...

J'ai beau tout essayer, je n'arrive pas à retrouver mon menu et mes rollovers !!

...

Personne à une idée !?

...

C'est assez frustrant d'être bloquer comme ça ! ...

[Dan]

On t'a donné des idées, mais tu n'arrives pas à les mettre en place correctement.

Où ferme cette balise dans ton exemple: "<li id="nav">" ???

Ce serait moins frustrant si tu te donnais la peine d'ouvrir une documentation et que tu essayais de comprendre. On n'est pas là pour écrire ton code à ta place.

Une balise <li> doit être fermée par </li>

Un groupe de balises <li>...</li> DOIT de trouver dans une balise <ul>...</ul> (ou <ol>...</ol>)

Je t'ai mis un exemple d'imbrication dans mon post précédent.

[MoiMM]

J'ai bien lu vos messages et conseils ... et cela m'a aidé puisque c'est grace à eux que j'ai résolu mon problème d'affichage dans les navigateurs (enfin il me semble). ... Et je vous en remercis !

Effectivement il manquait un </li> dans le dernier code que j'ai posté ... mais cela a était corrigé tout de suite après et le code est depuis :

<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>

Mais cela n'a rien changé ... et mon menu avec les rollovers n'apparaissait (et n'apparaît) tjs pas !

J'ai posté ce message le 12 mai ... et depuis j'ai essayé de me renseigner, de trouver comment refaire apparaître ce menu correctement ... je n'ai pas attendu sans rien faire en me disant que quelqu'un ferai mon site à ma place !?! ... j'essayes des tas de choses pour le corriger moi même mais effectivement le html et le CSS sont loin d'être mon point fort ... malgrès mes tentatives ... même si je suis sûr que mon problème doit être une erreure de base ... même si mon soucis peut paraître une évidence pour bcp d'entre vous ... il reste introuvable pour moi ... donc mon site n'avance pas et c'est pour cela que j'espérais à nouveau que quelqu'un veuille bien regarder d'un peu plus prêt mes soucis et bien vouloir m'expliquer mes erreurs qui a mon avis cette fois viennent du CSS mais malgrès toutes mes tentatives de modifications rien n'a changé.

[Dudu]

Salut

Relis le premier message de Dan dans cette discussion (message #2 en haut de la page):

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>

<ul>
  <li>
    <ul>
       <li>...</li>
       <li>...</li>
    </ul>
  </li>
  <li>...</li>
</ul>

La réponse à tes questions y est :!:

Si on regarde ton code:

<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

h1#blogname {text-indent: -9999px}

C'est une astuce pour 'masquer' le texte en le mettant hors du champ de vue.

Continuons:

<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" )

<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

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+

[MoiMM]

Merci Dudu et Dan pour votre patience !

...

Grace en autre à tous les détails du dernier message de Dudu et quelques corrections, je suis enfin arrivé à ce que le code de ma page soit au moins valide (donc au moins une base saine ) et surtout, j'ai retrouvé mon menu et mes rollovers !

Tout est impec sous Firefox et ça c'est déjà un grand soulagement ... mais j'ai denouveau un soucis à l'afichage sous Safari ! Mon menu a un léger décalage vers le bas (env. 15/20px) !!?!