28172 sujets

CSS et mise en forme, CSS3

Bonjour,

En regardant le code d'un menu horizontal http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ , j'ai vu le css suivant:

 .lavaLamp li.back {
  background: url("../image/lava.gif") no-repeat right -30px;
 width: 9px; height: 30px;
 z-index: 8;
  position: absolute; 
}
 .lavaLamp li.back .left {
  background: url("../image/lava.gif") no-repeat top left;
  height: 30px;
  margin-right: 9px;
 }


Je ne comprend pas trop le li.back et .left qui n'apparaissent pas ailleurs que dans le css. Je ne vois pas comment on les appelle. Normalement je devrais les retrouver dans un .html.J'essaie de comprendre comment cela se passe Smiley ohwell .
Si quelqu'un a une idée.

Merci d'avance
Cordialement
Gildelau
Modifié par Igor (27 Sep 2011 - 11:54)
bonjour,

c' est écrit dans ton lien, je crois :

a écrit :

In the markup above, “ul” represents the menu, and each “li” represents a menu-item. At this point it is crucial to understand that we will be adding another artificial “li” to represent the background of the currently highlighted menu-item. Since the background itself is cosmetic and doesn’t represent a menu-item, we will be adding it from javascript.


donc ajouté à partir du script :


<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>

Modifié par FloydinBremen (23 Sep 2011 - 19:58)
Administrateur
Bonjour,

C'est exactement ça. Il n'existe pas dans le code source HTML envoyé par le serveur mais est présent dans le code source généré (puisqu'il a été ajouté par le script). On peut le visualiser avec un outil, sous Firefox, comme Firebug ou WDT/Voir source/Voir le code source généré.

La dernière fois que j'ai regardé (il y a 18 mois), l'exemple en ligne fonctionnait sous IE6 mais pas le script en téléchargement. Je te conseille donc de vérifier avec les versions d'IE que tu peux avoir.

Est-ce qu'il existe déjà avec plus ou moins de CSS3 ce script ? Ça fait 2 fois en une semaine que je retombe sur ce script, ça commence à me trotter dans la tête ... Smiley lol
Bonjour,

Merci beaucoup à vous deux pour vos réponses.
Bonne journée
Cordialement

Gildelau
Modifié par gildelau (26 Sep 2011 - 10:03)