28220 sujets

CSS et mise en forme, CSS3

Images "popup" en CSS et positionnement absolu

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/NsmConText/features/
Code CSS :

  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 :
	<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 (j'ai lu cet article mais je persiste à vouloir le faire en CSS).

J'ai parcouru la FAQ, lu cet article et celui-là mais n'ai rien trouvé qui me permette de définir des positions "absolute" qui fonctionnent correctement.

Quelqu'un a-t'il une idée ??
D'avance merci Smiley cligne
Modifié par Kaze (01 Jul 2005 - 12:16)
Salut kaze
J'ai des bulles d'informations du même type que les tiens, mais j'ai abandonné la position absolute au profit de la position fixed. Depuis toutes mes panneaux d'information s'ouvrent au même endroit, quelque soit le niveau de la page qui les active.

Si tu n'y arrives pas je te met un exemple en ligne.
Je crois qu'il existe un moyen d'éviter les gifs transparents… par une combine que je vérifie immédiatement.
(ps) très sympa ton truc, on se croirait sur une vraie interface.
Merci Aureance.
Voilà ce que ça donne avec un "position: fixed;" :
http://fabiwan.kenobi.free.fr/Nvu/features/test.html
  a { text-decoration: none; }
  a span { display: none; }
  a div { display: none; }
  a:hover { background: none; }
  a:hover span { display: block; }
  a:hover div { display: block; }

  .info-fr, .info-en { border: 2pt double ;
    position: fixed;
    z-index: 100;
    width: 240px;
    height: 240px;
    color: black;
    }
  
  .info-en {
    top: 50px;
    left: 750px;
  }
  
  .info-fr {
    top: 350px;
    left: 750px;
  }
et 
      <!-- HTML Preview -->
      <span id="preview" style="position: fixed; 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>

Ca fonctionne nickel sous Firefox, mais malheureusement pas sous IE. Je pourrais utiliser du code à la IE7 pour contourner le problème mais le but c'était justement de ne pas utiliser de JavaScript...
As-tu une idée ? Je ne connais pas les finesses de CSS comme les attributs "position"...
Modifié par Kaze (27 Jun 2005 - 19:39)
Déjà, si tu vois quelque chose s'afficher avec IE qui ne supporte pas les hover autres que "link pur et dur" c'est déjà pas mal. Sinon la fonction hover ne fonctionne pas sur mon IE5 mac ( mais lui c'est une antiquité ). Ton truc position fixed va bien sur Mac avec : Camino, Opera, Safari, Moz, (pas ieMac mais on s'en fout, c'est une merde).

La "subtilité" des positions est très simple :
Quand on n'indique rien; c'est "static" par défaut, les choses apparaissent dans leur ordre et position d'écriture. (il est non positionné, les z-index ne jouent pas avec lui)
Puis vient "relative",il se met en place par rapport au bloc précédent et celui qui le contient.
Puis "absolute" les marges se font par rapport à son conteneur, il se fout de ce qu'il y a avant et se pose sans déranger le reste de la mise en page.
Puis "fixed" c'est comme absolute mais la position est par rapport à l'écran.
Aureance a écrit :
pas ieMac mais on s'en fout, c'est une merde


<hs>IE pour Mac n'est pas "une merde" (les IE, Nescape de toutes versions non plus), c'est un navigateur qui n'est plus maintenu et qui n'évoluera plus, c'est même un navigateur qui a à une époque plus que supporté la concurrence du côté css vis à vis des autres navigateurs du moment Smiley cligne .

Plus généralement arrêtons d'employer ce type de qualificatif aux outils qui sont -encore- utilisés pour visiter nos sites, les traiter de "merde" ne changera rien à leur support de telle ou telle propriété, comprendre qu'une petite partie (non-négligeable parfois) de ses visiteurs sera privée d'une partie essentielle du contenu est à mon sens plus interressant. Particulièrement dans le cas d'un tutoriel.
</hs>
Merci Aureance pour ces précisions, ton explication des positionnements CSS vient de trouver sa place dans mon mémento web Smiley smile

Je suis en train de mettre mon site web en route, la page dont on parle a été déplacée là : http://fabiwan.kenobi.free.fr/NsmConText/features/

Je continue à bosser dessus, bien que j'aie tendance à partager ton avis sur IE (que je n'utilise que pour vérifier que 90% du temps que je passe sur mes CSS ne sert à rien sous IE). Je serai vraiment soulagé le jour où IE supportera le même niveau de CSS que les navigateurs Gecko et KHTML... comme tout le monde j'imagine Smiley rolleyes
Modifié par Kaze (28 Jun 2005 - 10:49)
Oui Igor Il ne faut pas cracher dans la soupe d'Internet Explorer, tu fais bien de me rappeler qu'il fut un temps lointain... c'était le seul contre Netscape. Et il parait même que Microsoft est à l'origine des CSS et qu'il aurait déposé le projet pour "études" auprès du (M.I.C) W3C. Ceci dit : il a tout de même pas mal de retard ( pris à son propre piège ?)

Je re-poste pour souligner que le W3C a fêté son dixième anniversaire en décembre 2004, et que la première version des recommandations CSS2 date de 1998.
Modifié par Aureance (29 Jun 2005 - 01:25)
Ayé j'ai trouvé une solution acceptable :
* l'affichage de l'image popup reste le même, avec un <span /> dans le lien
* 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 :
<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 :
  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 :
 <!--[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/NsmConText/features/xhtml-strict.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.
Modifié par Kaze (01 Jul 2005 - 19:23)
Sujet clos
Aller à