Soucis de css

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

Résolu Soucis de css

Message par demeter1 le Jeu 25 Fév 2016 - 20:09

Bonjour à tous,
sur l'un de mes thèmes, il me faut changer l'image de cette séquence via css . j'ai tenté diverses imbrications mais en vain.

Code:
<div class="M14_px"><span class="M14_14px" title="Afficher le texte avec une taille de 14px"><a href="#"><img src="http://i68.servimg.com/u/f68/11/93/85/24/14px10.gif"></a></span>

Une idée pour me dépanner ??

Merci par avance pour votre aide.


Dernière édition par demeter1 le Dim 28 Fév 2016 - 12:48, édité 1 fois

demeter1
+ Hyperactif +

Masculin
Messages : 8107
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par R-max le Jeu 25 Fév 2016 - 23:08

bonsoir Stéphane ,
a tu tenter comme ceci >>

Code:
div.M14_px, span.M14_14px a img{background:url(.............);}

si les images sont intégré dans un js ou dans un Template , peut être ajouté la mention !important

Code:
div.M14_px, span.M14_14px a img{background:url(.............)!important;}

cdl,

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par demeter1 le Ven 26 Fév 2016 - 1:19

Bonsoir Chrystophe,
Merci pour cette aide.

La div englobe en fait un ensemble de span.

Voici la séquence en entier :
Code:
 <div class="M14_px">
        <span class="M14_14px" title=
        "Afficher le texte avec une taille de 14px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/14px10.gif"></a></span>
        <span class="M14_16px" title=
        "Afficher le texte avec une taille de 16px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/16_px10.gif"></a></span>
        <span class="M14_18px" title=
        "Afficher le texte avec une taille de 18px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/18px10.gif"></a></span>
        <span class="M14_20px" title=
        "Afficher le texte avec une taille de 20px"><a href="#"><img src=
        "http://i68.servimg.com/u/f68/11/93/85/24/20px10.gif"></a></span>
    </div>

Code:
div.M14_px, span.M14_14px a img{background:url(background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
)!important;}
Positionne l'image en fond de div mais ne modifie pas l'image d'origine

J'ai tenté
1
Code:
span.M14_14px {
background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}
Aucune action

2
Code:
span.M14_14px a img{
background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}
Aucune action

3
Code:
span.M14_14px a :link {
  background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}
Aucune action
et
4
Code:
span.M14_14px a {
  background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
}
Superposition des deux images.L'image d'origine se retrouve en avant plan.
j'ai tenté un z-index histoire de voir si j'allais arriver à modifier l'ordre de superposition mais, rien à faire.

au niveau js, voici celui qui gère la taille des écritures
Code:
/* taille des écrits par le biais des boutons sur editeur*/
$(document).ready(function(){$.cookie("tropic")&&$("body,.altitude_encadrement,.sceditor-container textarea , .sceditor-container .postbody,.postbody,.quote,.cont_code,.spoiler_content,.altitude_encadrement .genmed b,td.pany,table.dany,.post-options").addClass($.cookie("tropic")),$(".M14_px a").click(function(){var t=$(this).parent().attr("class");return $("body,.altitude_encadrement,.sceditor-container textarea , .sceditor-container .postbody,.postbody,.quote,.cont_code,.spoiler_content,.altitude_encadrement .genmed b,td.pany,table.dany,.post-options").removeClass("M14_14px M14_16px M14_18px M14_20px").addClass(t),$.cookie("tropic",t,{path:"/",expires:1e4}),!1})});

demeter1
+ Hyperactif +

Masculin
Messages : 8107
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par Neptunia le Ven 26 Fév 2016 - 3:58

Bonjour ^^

Le CSS ne peut pas changer d'images, il peut uniquement installer des images de fond.

Code:
span.M14_14px:hover a img {
  display:none;
  }
span.M14_14px:hover {
  background-image: url("http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif")!important;
  }
On supprime d'abord l'image "fixe" avant d'en remettre une en tant qu'image de fond.

Code non testé.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par demeter1 le Ven 26 Fév 2016 - 21:41

Bonjour Neptunia,
le css agit mais d'une maniére assez bizarre.
l'image initiale est bien supprimée mais et remplacée par l'image du span suivant. Il s'en suit un clignotement au hover qui passe de l'image du deuxième span à l'ancienne image. Par contre l'image de remplacement n'apparait absolument pas.

demeter1
+ Hyperactif +

Masculin
Messages : 8107
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par Neptunia le Ven 26 Fév 2016 - 22:10

Je pense avoir compris ce qu'il se passe.

Le span prend la taille de l'image, si on supprime l'image 14px, le span se rétrécit.

Je pense qu'un visibility: hidden à la place du display:none résoudrait le souci. Ou sinon imposer une largeur à chaque span.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par Scoubifitz le Ven 26 Fév 2016 - 23:13

Bonsoir,

En supprimant l'image par un display:none et en plaçant une autre image avec le pseudo élément ::before ?

Code:
div.M14_px span.M14_14px img{display:none}
div.M14_px span.M14_14px::before{content:url(http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif)}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par demeter1 le Sam 27 Fév 2016 - 17:31

Bonjour Scoubifitz,
la solution fonctionne à merveille mais le before place l'image avant le a href="#" et, rend le lien inopérant.

Je n'ai pas encore testé la solution de Neptunia avec le soucis de chargement que nous avons en ce moment.

demeter1
+ Hyperactif +

Masculin
Messages : 8107
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par Scoubifitz le Sam 27 Fév 2016 - 18:02

Il suffit donc de rajouter le "a" dans le chemin CSS ...

Code:
    div.M14_px span.M14_14px img{display:none}
    div.M14_px span.M14_14px a::before{content:url(http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif)}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par Neptunia le Dim 28 Fév 2016 - 2:45

@scoubifitz

Ca ne devrait rien changer. Before = avant

L'image est dans le lien, c'est sa taille qui définit la zone cliquable du lien. Si on masque l'image, on masque aussi le lien et l'image rajoutée sera toujours devant le lien.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css

Message par Scoubifitz le Dim 28 Fév 2016 - 3:36

before = au début ... after = à la fin ...

le "content" créé une image au début de la balise "a" ...

display:none supprime donc l'ancienne image , et le pseudo-élément "before" place une nouvelle image au début de la balise "a" ...

Hi

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Soucis de css

Message par Neptunia le Dim 28 Fév 2016 - 4:12

J'ai rien dit, cette fois ma connaissance de l'anglais m'a joué un sale tour vu que before et after veulent dire en anglais respectivement avant et après.

Je me demande quels sont les andouilles qui ont utilisé ça comme pseudo élément à la place de :begin et :end par exemple. Sûrement pas des anglais ! A mon avis ya que des étasuniens pour autant maltraiter la langue de Shakespeare

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Soucis de css

Message par demeter1 le Dim 28 Fév 2016 - 12:47

@Scoubifitz a écrit:Il suffit donc de rajouter le "a" dans le chemin CSS ...

Code:
    div.M14_px span.M14_14px img{display:none}
    div.M14_px span.M14_14px a::before{content:url(http://i84.servimg.com/u/f84/11/93/85/24/14px_c10.gif)}

Bonjour à tous,
scoubifitz, le css fonctionne à merveille. Merci pour cette aide ok


Un grand merci également aux autres intervenants de ce sujet.

demeter1
+ Hyperactif +

Masculin
Messages : 8107
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

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


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