Écriture en italique dans l'infobulle.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Écriture en italique dans l'infobulle.

Message par softbreath Ven 30 Mar 2012 - 15:36

Bonjour à vous !

Voilà mon problème.
Ça fait longtemps que j'utilise le même code pour mes infobulles, mais je n'ai encore jamais trouvé pourquoi l'écriture se met en italique toute seule, car je n'ai mit aucun code pour que ce soit ainsi. J'aimerais pouvoir supprimer cela. Je viens donc vous demander votre aide. Voici mes codes :

CSS :
Code:
a.info {
  position: relative;
  color: black;
  text-decoration: none;
  display: inline;
}
a.info span {
  display: none; /* on masque l'infobulle */
}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  width: 200px;

  white-space: normal; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 100px; /* on positionne notre infobulle */
  left: -35px;

  background: white;

  color: #947852;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  border: 3px solid slategray;
  border-left: 7px solid slategray;
  text-transform: none;
  font-family: Times New Roman;
}

HTML de la PA :
Code:
        <div id="accordeon-pa" class="accordion">
            <ol>
                <li>
                    <h2><span>Bienvenue {USER&amp;#8288;NAME}!</span></h2>
                    <div>
                      <figure>
                        <center><div style="font-variant:small-caps; text-shadow: 2px 2px 2px black; font-size: 45px; font-family: Times New Roman;">UNDERCO.</div></center>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>L'équipe de ouf !</span></h2>
                    <div>
                      <figure>
                        <center><div style="font-variant:small-caps; text-shadow: 2px 2px 2px black; font-size: 45px; font-family: Times New Roman, serif;">Le Staff</div><br><br><br><br><table style="width:310px;margin-left:20px;"><tr><td><a href="#" class="info"><div style="z-index:1; -moz-box-shadow: 2px 2px 2px black; border:white 4px solid; width:100px; height:100px; background-image: url(http://desmond.imageshack.us/Himg715/scaled.php?server=715&filename=leehyori13.png&res=medium); -moz-border-radius: 50px;"></div><span>Ayumee Moon<br><span style="font-size: 9px; line-height: normal">Alexie J. Castle</span><br>MP - Profil - Liens - Sujets</span></a></td><td><a href="#" class="info"><div style="z-index:2; margin-left:-20px; -moz-box-shadow: 2px 2px 2px black; border:white 4px solid; width:100px; height:100px; background-image: url(http://images5.fanpop.com/image/photos/30100000/Morgana-morgana-30140821-100-100.png); -moz-border-radius: 50px;"></div><span>Alyss Jacobs<br><br>MP - Profil - Liens - Sujets</span></a></td><td><a href="#" class="info"><div style="z-indez:1;margin-left:-20px;-moz-box-shadow: 2px 2px 2px black; border:white 4px solid; width:100px; height:100px; background-image: url(http://images2.fanpop.com/image/photos/9300000/Kellan-L-3-kellan-lutz-9374331-100-100.jpg); -moz-border-radius: 50px;"></div><span>Jason Kyle<br><br>MP - Profil - Liens - Sujets</span></a></td></tr></table></center>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Avis de recherches</span></h2>
                    <div>
                      <figure>
                        <center><div style="font-variant:small-caps; text-shadow: 2px 2px 2px black; font-size: 45px; font-family: Times New Roman;">UNDERCO.</div></center>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Nouveautés / Informations</span></h2>
                    <div>
                      <figure>
                        <center><div style="font-variant:small-caps; text-shadow: 2px 2px 2px black; font-size: 45px; font-family: Times New Roman;">UNDERCO.</div></center>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Navigation rapide</span></h2>
                    <div>
                      <figure>
                        <center><div style="font-variant:small-caps; text-shadow: 2px 2px 2px black; font-size: 45px; font-family: Times New Roman;">UNDERCO.</div></center>
                      </figure>
                    </div>
                </li>
            </ol>
        </div>

Mes infobulles sont dans un accordéon en javascript. Voici donc le code de l'accordéon en javascript que j'ai. Si jamais le problème vient de là, ce serait normal que je ne l'aie pas vu puisque je ne suis pas experte en javascript.
Code:
$(document).ready(function() {
          $("#accordeon-pa").each(function(){
            $(this).liteAccordion({
              autoPlay:true,
              pauseOnHover:true,
              rounded:true,
              enumerateSlides:true,
              containerWidth: 750,
              containerHeight: 320
            })
          });
        });
        /*************************************************!
        *
        *  project:    liteAccordion - a horizontal accordion plugin for jQuery
        *  author:    Nicola Hibbert
        *  url:        http://nicolahibbert.com/liteaccordion-v2/
        *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
        *
        *  Version:    2.0.2
        *  Copyright:  (c) 2010-2011 Nicola Hibbert
        *  Licence:    MIT
        *
        **************************************************/
        (function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

Si vous pouviez trouver le problème, ce serait merveilleux. De mon coté, je vais continuer de vérifier.


Dernière édition par softbreath le Lun 2 Avr 2012 - 1:09, édité 1 fois
softbreath

softbreath
**

Féminin
Messages : 86
Inscrit(e) le : 26/07/2011

https://resurrectionhp.forumactif.com/
softbreath a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Écriture en italique dans l'infobulle.

Message par Anzu Ven 30 Mar 2012 - 16:48


Bonjour,

Dans votre css, dans la première class, rajoutez:

Code:
font-style: normal !important;

Comme ceci:

Code:
        a.info {
          position: relative;
          color: black;
          text-decoration: none;
          display: inline;
          font-style: normal !important; 
        }

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Écriture en italique dans l'infobulle.

Message par softbreath Lun 2 Avr 2012 - 1:09

C'est merveilleux, ça fonctionne !
Merci beaucoup ! ^^
softbreath

softbreath
**

Féminin
Messages : 86
Inscrit(e) le : 26/07/2011

https://resurrectionhp.forumactif.com/
softbreath a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum