[résolu] Images popup CSS et positionnement absolu

[Kazé]

Bonjour,

j'essaye de faire une présentation "graphique" des fonctionnalités d'une extension Nvu sur mon site web. Pour cela j'utilise :
* une image de fond : le screenshot d'une fenêtre Nvu
* des images "vides" (un affreux spacer.gif) dans un lien pour définir des zones de survol du pointeur de la souris
* pour chaque zone de survol, une image apparaît (genre popup-menu), et deux zones de texte sont affichées à droite (une pour les explications en anglais, un pour le français).

Pour avoir un aperçu : http://fabiwan.kenobi.free.fr/Nvu/features/
Code CSS :

Code : Tout sélectionner

  a { text-decoration: none; }
  a span { display: none; }
  a:hover { background: none; }
  a:hover span { display: block; }

  span.info-fr, span.info-en { border: 2pt double ;
    position: absolute;
    z-index: 100;
    width: 240px;
    height: 240px;
    color: black;
    }

Code HTML d'une zone de survol :

Code : Tout sélectionner

	<span id="preview" style="position: absolute; top: 58px; left: 150px;">
	<a href="#"><img src="spacer.gif" alt="preview" width="32px" height="32px" /> 
	  <span class="popup"><img src="preview.png" alt="preview" /></span>
	  <span class="info-en" style="top: 0; left: 556px;">HTML Preview:<br /><br />
	  view current page in external web browsers</span>
	  <span class="info-fr" style="top: 250px; left: 556px;">Aperçu HTML :<br /><br />
	  visualiser la page courante dans des navigateurs externes</span>
	</a></span>

(HTML et CSS dans la même page)

Ca marchouille... mais je ne parviens pas à mettre les zones de texte en positionnement "absolu", ce qui me contraint à recalculer les coordonnées des zones de texte en fonction de l'emplacement de la zone de survol... c'est lourd et pas pratique à éditer avec un éditeur WYSIWYG tel que Nvu.

Je saurais le faire en JavaScript mais j'ai pô envie.
Quelqu'un a-t'il une idée ??
D'avance merci

[calimo]

Ah les joies des éditeurs WYSIWYG

1. Ça sort un code parfaitement illisible (la prochaine fois pense à l'indenter avant de nous le soumettre )

   Code : Tout sélectionner

   <span id="preview" style="position: absolute; top: 58px; left: 150px;">
   	<a href="#">
   		<img src="spacer.gif" alt="preview" width="32px" height="32px" />
   		<span class="popup">
   			<img src="preview.png" alt="preview" />
   		</span>
   		<span class="info-en" style="top: 0; left: 556px;">
   			HTML Preview:<br /><br />view current page in external web browsers
   		</span>
   		<span class="info-fr" style="top: 250px; left: 556px;">
   			Aperçu HTML :<br /><br />visualiser la page courante dans des navigateurs externes
   		</span>
   	</a>
   </span>

2. Ça te permets de ne rien comprendre à ce que tu fais. Tu es sur d'avoir bien compris ce que tu as fait avec ce code ? Je ne crois pas (voir le dernier point)
3. Ça mélange styles en-ligne (style="...") et CSS externes, chose absurde, qui est en fait la meilleure manière de ne pas comprendre ce qui se passe.
4. Ça te laisse croire qu'en sortant totalement un bout de code de son contexte il reste compréhensible.
5. Ça te permets d'avoir bonne conscience en ne lisant pas les spécifications
6. Ça t'évite de te poser des questions sur des sujets pourtant ô combien importants : qu'est-ce qu'un balise ? Que signifie-t-elle ? Qu'est-ce qu'un positionnement ?

En l'occurence il y a deux spécifications que tu devrais lire : la définition de span et celle de la propriété css position. Tu verra qu'il y a une petite incohérence... mais qui a une importance capitale ! (pas forcément facile à trouver si on n'a pas réfléchi)

PS : avec tous ces indices c'est facile ! Et oublie les éditeurs WYSIWYG, c'est pas bon

[Kazé]

Ah les joies des éditeurs WYSIWYG [...]

<troll> Oui mais :

• pour faire des documentations longues c'est plus pratique que le bloc-notes
• rien n'empêche d'utiliser un éditeur de texte pour les parties de codes avancées ou "gadget"

</troll>

Cette page a été entièrement faite avec SciTE, mais je dois avouer que le placement / redimensionnement des zones de survol avec Nvu m'ont semblé bien trop efficaces pour que je m'en prive...
J'aurais dû passer un coup de Tidy dessus avant de poster le code

Ça te laisse croire qu'en sortant totalement un bout de code de son contexte il reste compréhensible.
Ça te permets de ne rien comprendre à ce que tu fais. Tu es sur d'avoir bien compris ce que tu as fait avec ce code ? Je ne crois pas (voir le dernier point)
Ça mélange styles en-ligne (style="...") et CSS externes, chose absurde, qui est en fait la meilleure manière de ne pas comprendre ce qui se passe.

Je pensais que la manip du span dans le lien "à la Eric Meyer" était connue comme un cas d'école, désolé. Le code classique "à la Eric Meyer" ne fonctionne pas avec :

Code : Tout sélectionner

  a { text-decoration: none; }
  a span { display: none; }
  a:hover { background: none; }
  a:hover span { display: block; }

  span.info-fr, span.info-en { border: 2pt double ;
    position: absolute;
    z-index: 100;
    width: 240px;
    height: 240px;
    color: black;
    }
  
  span.info-en {
    top: 50px;
    left: 750px;
  }
  
  span.info-fr {
    top: 350px;
    left: 750px;
  }
  
  a img { border: 2pt solid;
    color: red;
    }
    
  a span img { border: none ; }

et

Code : Tout sélectionner

<!-- HTML Preview -->
<span id="preview" style="position: absolute; top: 58px; left: 150px;">
	<a href="#">
	  <img src="spacer.gif" alt="preview" width="32px" height="32px" /> 
	  <span class="popup">
	    <img src="preview.png" alt="preview" />
	  </span>
	  <span class="info-en">
	    HTML Preview:<br /><br />
	    view current page in external web browsers
	  </span>
	  <span class="info-fr">
	    Aperçu HTML :<br /><br />
	    visualiser la page courante dans des navigateurs externes
	  </span>
	</a>
</span>

Les boites "infos-en" et "infos-fr" se retrouvent avec une position relative au conteneur.
Tu sais probablement pourquoi, mais moi pas

Si j'utilise "position: fixed;" à la place de "position: absolute;" dans la feuille de style, ça marche sous Firefox mais évidemment pas sous IE : http://fabiwan.kenobi.free.fr/Nvu/features/test.html
Je pourrais utiliser du code à la IE7 pour contourner le problème mais le but c'était justement de ne pas utiliser de JavaScript...

Donc avec des styles en ligne pour chaque boite "info-XX", ça marchouille (sous Firefox et IE), mais c'est innommable à éditer. Je me dis que le cas doit être tellement classique qu'il y aura bien quelqu'un pour me renseigner ?

Je n'ai pas trouvé d'information qui me renseigne davantage dans les références de SPAN et Position...

PS1: je ne comprends pas grand-chose aux recommandations W3C, mais je suis allé voir sur le site d'Alsacréations (cet article et celui-là), avant de créer ce sujet. C'est un chouille plus clair mais pas assez pour que je comprenne ce cas-là...

PS2: calimo, y a-t'il une autre méthode que celle-là ou dois-je recourir à JavaScript pour IE ?

[EDIT: orthographe et post-scriptum]

[calimo]

D'un coup je crois que je n'avais pas tout à fait saisi le problème...

Edition : je ne comprend rien au code, tout est emmêlé, imbriqué... pourquoi un <span id="preview" alors que c'est un bloc ? Pourquoi pas un div ? Et puis pourquoi ces images spacers ? à quoi sert le <div id="features"> ? Pourquoi tu mets des listes dans tes span ? C'est même pas valide. En plus jEdit refuse d'indenter le code comme il faut vu que c'est une page HTML

[Kazé]

pourquoi un <span id="preview" alors que c'est un bloc ? Pourquoi pas un div ?

Les deux ne servent à rien, de toutes façons. Le tout c'est que l'ensemble du code soit à l'intérieur de la balise <a>, pour pouvoir utiliser le ":hover" (div:hover n'est pas compris par IE).

Pourquoi tu mets des listes dans tes span ? C'est même pas valide

C'est pas valide mais c'est plus joli ça reste parsable en XML et ça passe sous IE et Firefox...

Ceci dit, si tu veux vérifier avec un code valide XHTML 1.0 Strict et indenté : http://fabiwan.kenobi.free.fr/Nvu/features/test2.html

Code : Tout sélectionner

      <!-- HTML Preview -->
      <a href="#" id="preview" style="position: absolute; top: 58px; left: 150px;" >
		<img src="spacer.gif" alt="preview" width="32px" height="32px" /> 
		<span class="popup">
		  <img src="preview.png" alt="preview" />
		</span>
		<span style="position: absolute; top: -58px; left: 570px;">
		  <span class="info-en">
			HTML Preview:<br /><br />
			view current page in external web browsers
		  </span>
		  <span class="info-fr">
			Aperçu HTML :<br /><br />
			visualiser la page courante dans des navigateurs externes
		  </span>
		</span>
      </a>

et le CSS devient :

Code : Tout sélectionner

  a { text-decoration: none; }
  a span { display: none; }
  a:hover { background: none; }
  a:hover span { display: block; }

  .info-fr, .info-en { border: 2pt double ;
    position: absolute;
    z-index: 100;
    width: 240px;
    height: 240px;
    color: black;
    }
  
  .info-en {
    top: 50px;
  }
  
  .info-fr {
    top: 320px;
  }

mais le problème reste exactement le même. En regroupant les boites "info-XX" dans un même span, ça augmente encore l'imbrication (désolé !) mais ça simplifie le calcul des coordonnées...

Et puis pourquoi ces images spacers ?

Parce que j'ai toujours fait comme ça pour définir des zones de survol
Il y a sûrement moyen de faire la même chose autrement mais ça ne change rien au problème de positionnement CSS...

à quoi sert le <div id="features"> ?

à être inséré plus tard dans une autre page HTML... et peut-être aussi à corriger le décalage de positionnement de l'image entre Firefox et IE.
Pareil, on peut s'en passer mais ça n'aura aucune incidence sur le problème du positionnement.


Ben à moins que quelqu'un puisse me donner un coup de main, je pense que je vais laisser tomber l'affaire...
ou utiliser un sélecteur div:hover pour Firefox, émulé avec un "onmouseover" pour IE...
ou utiliser un positionnement fixe (position: fixed;) pour Firefox, émulé avec un code JavaScript pour IE...
ou me garder mon code HTML/CSS, même s'il est pénible à maintenir

[Kazé]

Je suis en train de mettre en route ma page "NsmConText", les liens que j'ai passés dans ce sujet ont été déplacés.

• page du départ : http://fabiwan.kenobi.free.fr/NsmConText/features/
• page xhtml-strict : http://fabiwan.kenobi.free.fr/NsmConTex ... trict.html

Petit mémo personnel sur le positionnement CSS :

• "static" (défaut) : les choses apparaissent dans leur ordre et position d'écriture (pas de z-index)
• "relative" : positionnement par rapport au bloc précédent et celui qui le contient
• "absolute" : positionnement par rapport au conteneur (ne dérange pas le reste de la mise en page)
• "fixed" : comme absolute mais positionnement par rapport à l'écran.

Les précisions sur la question du positionnement de mes popups "info" sont toujours les bienvenues

[calimo]

Je crois que j'avais eu un souci du même genre avec un menu une fois... je me demande si ce n'est pas parce qu'un bloc parent est positionné en absolu...
Je ne sais plus trop comment je l'avais résolu

[Kazé]

Ayé j'ai trouvé une solution acceptable :

• l'affichage de l'image popup reste le même, avec un <span /> dans le lien (manip à la Eric Meyer)
• les boites "info-fr" et "info-en" sont désormais dans des conteneurs <div> (code valide XHTML-strict, donc)
• on utilise le sélecteur "div:hover" pour faire apparaître les boites "info-**"
• sous IE, on utilise un script pour émuler le "div:hover" avec des "onmouseover" et "onmouseout"

Autrement dit, c'est une solution 100% CSS pour tous les navigateurs modernes, mais sous IE il faut un patch JavaScript.
Corollaire : si on utilise IE sans JavaScript ça ne marche pas... mais bon ça ne doit pas concerner trop de monde (il faudrait un <noscript /> pour bien faire).

Donc le code d'un bloc devient :

Code : Tout sélectionner

<div class="info" id="preview">
	<a href="#" style="position: absolute; top: 58px; left: 150px;">
	  <img src="spacer.gif" alt="preview" width="32px" height="32px" /> 
	  <span class="popup">
	    <img src="preview.png" alt="preview" />
	  </span>
	</a>
	<div class="info-en">
	  <p>HTML Preview:</p>
	  <p>view current page in external web browsers</p>
	</div>
	<div class="info-fr">
	  <p>Aperçu HTML :</p>
	  <p>visualiser la page courante dans des navigateurs externes</p>
	</div>
</div>

et dans la feuille de style, on rajoute :

Code : Tout sélectionner

  div.info div { display: none; }
  div.info:hover div { display: block; }

Jusque-là, rien de nouveau : ça fonctionne sous Firefox mais pas sous IE.
Reste donc à inclure dans <head /> un bout de code spécifique à IE :

Code : Tout sélectionner

 <!--[if lt IE 7]>

  <style type="text/css">
  div.open div { display: block; }
  </style>

 <script type="text/javascript">
 function IEpatchNode(nodeName) {
    node = document.getElementById(nodeName);
    node.onmouseover = function() { this.className="open"; }
    node.onmouseout = function() { this.className="info"; }
 }
 function IEpatch() {
   IEpatchNode("preview");
   IEpatchNode("htmlSource");
   IEpatchNode("SiteManager");
 }
 window.onload = IEpatch;
 </script>

 <![endif]-->

Et là miracle, ça fonctionne. J'ai mis un exemple ici : http://fabiwan.kenobi.free.fr/NsmConTex ... trict.html
Chez moi ça fonctionne avec XP/IE6 et Firefox, je n'ai pas d'autres navigateurs sous la main pour faire le test.
Quelqu'un peut-il me dire si ça tourne sous Safari, Konqueror ou Opera SVP ?

Je pense qu'il doit y avoir moyen de remplacer toute la partie spécifique à IE par une simple feuille de style bricolée, ça serait le top.

[Kazé]

Différents utilisateurs m'ont dit que ça fonctionnait sous Safari, Konqueror et Opera, je les crois sur parole...
Je vais m'en tenir au code du précédent post.