[Besoin d'aide] element.style.opacity

Bonsoir à tous,

Je viens vers vous car j'ai un petit problème assez gênant.

Mon problème provient d'un "element.style" (.opacity) qui fait des siennes. En effet, je viens de créer un bouton en CSS3 tout beau tout neuf à la place d'un bouton déjà existant, celui-ci fonctionne impeccablement, seulement, quand je passe ma souris sur mon nouveau bouton je constate une légère opacité. Quand je vérifie avec Firebug je constate effectivement que ma div (qui existait déjà donc) contient bien cet element.style, seulement, quand je bascule dans mon éditeur, je constate que je n'ai absolument rien dans mon code HTML. Donc impossible de l'enlever. Alors forcement quand je souhaite mettre un effet de hover sur mon bouton à travers ma feuille de style, c'est l'element.style qui est pris en compte. Ce n'est pas très gênant au final, mais esthétiquement ce n'est pas très sexy. Quelqu'un aurait donc une solution ?

La div en question :

<div class="button">
<input class="btn" type="submit" onclick="document.feedburner_subscribe.submit();" title="You will receive a daily email with new content from our website." value="Souscrire" style="opacity: 1;">
</div>

Merci à vous,

L'asticode

Bonsoir,
Avez-vous testé ça :
Ctrl+F5 (pour vider le cache du navigateur), des fois ça fait des miracles!

Bonsoir,

Moi je verrais bien un javascript antérieur à la modif' et qui n'aurait pas été supprimé : il ciblerait le bouton et lui appliquerait le style décrié... mais ce n'est qu'une supposition.
Modifié par Olivier C (07 Jan 2013 - 23:24)

Premièrement, merci à vous deux pour vos réponses.

@Sylverdragon : Sachant que l'element.type n'apparait pas sous mon éditeur, je ne l'ai pas modifié. Donc le vide du cache n'y change pas grand chose. (De plus, je vide celui-ci pratiquement après chaque modification. )

@Olivier C : Effectivement, c'était bien ça ! en fait, la fameuse ligne en question pour pouvoir modifier ou virer l'opacité, se trouvait dans le fichier "custom.JS" de mon dossier JS.

La ligne en question :

jQuery(this).stop().animate({opacity:none},300)},function(){jQuery(this).stop().animate({opacity:none}

Par contre, tu penses que je peux simplement mettre un "opacity:none" ?

L'asticode a écrit :
Effectivement, c'était bien ça !

Quand vous avez un élément qui s'affiche dans votre inspecteur Firebug ou chrome et que vous n'avez pas ce même élément dans le code source :
- soit il s'agit d'un javascript,
- soit il s'agit d'une compensation du navigateur utilisé qui cherche à palier à un bug de la structure du site (l'oubli de la fermeture d'une div par exemple).

L'asticode a écrit :
Par contre, tu penses que je peux simplement mettre un "opacity:none" ?

Et pourquoi ne pas tenter de supprimer toute la ligne js ? quitte à la remettre si problèmes rencontrés. Après tout vous cherchez à mettre du css3 à la place... autant faire "full css".

Par exemple :

.btn:hover,.btn:focus,.btn:active {opacity: .5}

Une astuce : pour cibler tous les boutons imput du site par défaut :

input[type=submit]:hover,input[type=submit]:focus,input[type=submit]:active {/* mon code */}

Encore une astuce : la transition en css3. Ici on cherche à mettre progressivement un lien en blanc sur un menu :

.nav-menu a:hover, .nav-menu a:focus, .nav-menu a:active {
    color: #fff;
    -webkit-transition: .5s;
       -moz-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}

Modifié par Olivier C (08 Jan 2013 - 03:00)

a écrit :

Quand vous avez un élément qui s'affiche dans votre inspecteur Firebug ou chrome et que vous n'avez pas ce même élément dans le code source :
- soit il s'agit d'un javascript,
- soit il s'agit d'une compensation du navigateur utilisé qui cherche à palier à un bug de la structure du site (l'oubli de la fermeture d'une div par exemple).

Parfait. Je retiens pour la prochaine fois.

a écrit :
Et pourquoi ne pas tenter de supprimer toute la ligne js ? quitte à la remettre si problèmes rencontrés. Après tout vous cherchez à mettre du css3 à la place... autant faire "full css".

Par exemple :

.btn:hover,.btn:focus,.btn:active {opacity: .5}

Le problème est que le code CSS qui se trouve dans le "custom.js" ne tient que sur une seule ligne.

Exemple :

stop().animate({opacity:none},300)},function(){jQuery(this).stop().animate({opacity:none},300)})}

Je peux t'assurer que je ne sais pas où commence et finit la ligne en question.

a écrit :
Une astuce : pour cibler tous les boutons imput du site par défaut :

input[type=submit]:hover,input[type=submit]:focus,input[type=submit]:active {/* mon code */}

a écrit :
Encore une astuce : la transition en css3. Ici on cherche à mettre progressivement un lien en blanc sur un menu :

.nav-menu a:hover, .nav-menu a:focus, .nav-menu a:active {
    color: #fff;
    -webkit-transition: .5s;
       -moz-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}

Un grand merci pour ces quelques astuces. Je note ça.


Du coup, j'ai un autre petit soucis. Par défaut, le bouton de base était collé au cadre (email-wrapper) de ma newsletter. Via mon éditeur, je constate que mon bout de code qui concerne les bordures n'a rien d'anormal :

{overflow:hidden;height:28px;border:1px solid #232323;background:#0A0A0A;width:170px;padding:0px 0px 0px 4px;float:left;border-right:4px;-moz-border-radius-topleft: 4px;border-radius:4px;-moz-border-radius-bottomleft: 4px;border-bottom-left-radius: 4px;}

Hors, avec Firebug, je constate que j'ai un code bien différent :

-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #0A0A0A;
    border-color: #232323 -moz-use-text-color #232323 #232323;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid none solid solid;
    border-width: 1px 4px 1px 1px;
    float: left;
    height: 28px;
    overflow: hidden;
    padding: 0 0 0 4px;
    width: 170px;

Ce qui fait que j’obtiens ceci :

http://nsa30.casimages.com/img/2013/01/08/13010809165881491.png


Je m'acharne dessus depuis hier. Si tu avais donc une solution.

L'asticode a écrit :
Du coup, j'ai un autre petit soucis. Par défaut, le bouton de base était collé au cadre (email-wrapper) de ma newsletter. Via mon éditeur, je constate que mon bout de code qui concerne les bordures n'a rien d'anormal :

{overflow:hidden;height:28px;border:1px solid #232323;background:#0A0A0A;width:170px;padding:0px 0px 0px 4px;float:left;border-right:4px;-moz-border-radius-topleft: 4px;border-radius:4px;-moz-border-radius-bottomleft: 4px;border-bottom-left-radius: 4px;}

Hors, avec Firebug, je constate que j'ai un code bien différent :

-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #0A0A0A;
    border-color: #232323 -moz-use-text-color #232323 #232323;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid none solid solid;
    border-width: 1px 4px 1px 1px;
    float: left;
    height: 28px;
    overflow: hidden;
    padding: 0 0 0 4px;
    width: 170px;

En fait les inspecteurs des navigateurs réorganisent le code. Ce qui soit dit en passant est plus lisible. A première vue (mais je ne suis pas allé voir dans le détail) il s'agit bien du même code... sauf que l'inspecteur optimise en affichant des raccourcis css.

Bien sûr, s'il y a une erreur de code, le navigateur va là encore essayer de compenser avec plus ou moins de bonheur. Et enfin, la valeur la plus universelle va prendre le pas sur les autres valeur, comme c'est le cas ici des border-radius.

Pour le code js, moi je le supprimerais purement et simplement, et j'ajouterais si besoin une déclaration opacity dans la feuille css :

.button {opacity: ... }

Modifié par Olivier C (09 Jan 2013 - 00:57)

Olivier C a écrit :

En fait les inspecteurs des navigateurs réorganisent le code. Ce qui soit dit en passant est plus lisible. A première vue (mais je ne suis pas allé voir dans le détail) il s'agit bien du même code... sauf que l'inspecteur optimise en affichant des raccourcis css.

Bien sûr, s'il y a une erreur de code, le navigateur va là encore essayer de compenser avec plus ou moins de bonheur. Et enfin, la valeur la plus universelle va prendre le pas sur les autres valeur, comme c'est le cas ici des border-radius.

Pour le code js, moi je le supprimerais purement et simplement, et j'ajouterais si besoin une déclaration opacity dans la feuille css :

.button {opacity: ... }

Salut,

D'abord, désolé de répondre aussi tardivement.
Ensuite, merci pour ta réponse. Je vois ça le plus tôt possible. (Sachant que je bosse en parallèle sur un autre thème que je revois de fond en comble pour la première version de mon site.)

Du coup, j'ai un soucis avec ce thème.

Je t'explique :

J'ai une div qui se nomme :

<div class="container casing"> 

dans celle-ci, j'ai mes classes :

<div class="container">
<div class="container home-widget">
<div class="container ">
<div class="clear"></div>

Via le CSS j'ai ça :

.casing {
background: url("images/bodybg.png") repeat scroll 0 0 transparent;
padding-top: 20px !important;

et via un fichier "responsive-style.css" j'ai :

.container {
margin: 0 auto;
padding: 0;
position: relative;
width: 960px;

Mon but serait de mettre un "margin-top" pour décaler vers le bas mon container (le wrapper), mais uniquement dans un article. Quand j'applique le changement, ça fonctionne, mais étant donné que ma page d'accueil et en quelque sorte reliée avec les articles, mon changement s'applique aussi à ma page d'accueil. (Tu arrives à suivre ? ) Ce que je ne veux pas. Je veux simplement que ma modification s’applique dans mes articles.

Tu serais comment faire ?

J-erman