• Résolu Un peu de CSS ?


    Mercredi 4 Octobre à 14:01
    vadou

    Bonjour les amis, j'aimerais soumettre aux initiés un problème de compatibilité avec un code inscrit dans le HTML de l'interface de création d'article.

    Voici le code :

    <style><!--
    .px{position:absolute; width:4vw; height:2.4vw; border:none background:transparent;}

    Voici le résultat dans l'interface.  .px représente le petit rectangle blanc qui devrait être transparent.


    Et voici le résultat en enregistrant l'article. Toujours pas de transparence. En cliquant sur le petit rectangle qui est devenu bleu clair je change d'image mais je voudrais voir le "CLIC" du dessous.


    Quelqu'un pourrait-il m'aider ? Merci d'avance.

     

    Mercredi 4 Octobre à 21:35
    stormalo

    bonsoir,

    vers la fin du thème il y a une petite modification à faire qui va probablement résoudre le problème. (ça fonctionne en simulation partielle sur la page du blog)

    Voir cette copie d'écran:

    Jeudi 5 Octobre à 10:47
    vadou

    Merci Stormalo, dans l'interface ça marche bien mais lorsque j'enregistre l'article le rectangle bleu clair revient sans être transparent. C'est ça qui m'embête.

    Jeudi 5 Octobre à 14:11
    stormalo

    Penser que dans l'affichage réel ça doit être comme dans celui de l'interface de l'éditeur est une erreur. C'est cela qui est embêtant.

    La saisie dans l'interface n'est  soumise à la totalité du css du blog que lorsqu'elle est injectée dans la page web ; sinon elle est hors contexte global, et donc son apparence peut être différente.

    Avec Firefiox et Google (ou d'autres) un clic droit permet d'examiner un élément et de connaitre les règles appliquées et leurs sources. Ce qui est à l'origine de ma proposition.

    Ça ne coute rien d'essayer, après tu indiqueras si ça a fonctionné ou non.

    Dimanche 8 Octobre à 17:20
    Colette95

    Bonjour vadou, coucou stormalo, smile

    @stormalo : j'ai fait un essai avec ce que tu préconisais mais ça ne fonctionnait pas. sarcastic

    @vadou,
    J'ai réussi à appliquer ce que tu cherchais à faire en ajoutant dans le html ce qui est en rouge afin que ce ne soit pas le paramétrage du blog qui soit pris en compte.

    <div style="width: 56vw; height: 37vw; margin: 2vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/NtqCfZMALun40G--Lk-SiD4nak0.jpg'); background-size: 56vw 37vw;"><input id="px1" class="px" style="background: transparent;" type="text" /><input id="px2" class="px" style="background: transparent;" type="text" /><input id="px3" class="px" style="background: transparent;" type="text" /><input id="px4" class="px" style="background: transparent;" type="text" /><input id="px5" class="px" style="background: transparent;" type="text" /><input id="px6" class="px" style="background: transparent;" type="text" /><input id="px7" class="px" style="background: transparent;" type="text" />
    <p id="px0">Clic</p>
    <p id="yx1" class="yx">&nbsp;</p>
    <p id="yx2" class="yx">&nbsp;</p>
    <p id="yx3" class="yx">&nbsp;</p>
    <p id="yx4" class="yx">&nbsp;</p>
    <p id="yx5" class="yx">&nbsp;</p>
    <p id="yx6" class="yx">&nbsp;</p>
    </div>

    et en supprimant dans cette ligne de code du css ce qui est en bleu et qui ne sert à rien :

    <style><!--
    .px{position:absolute; width:4vw; height:2.4vw; border:none; background:transparent;}

    Bonne fin de week-end à vous 2. yes

    Dimanche 8 Octobre à 18:26
    stormalo

    Bonjour Colette95,    comment ça, on conteste !   he

    Lors de mon comm du 05/10 je ne pouvais pas accéder à tout le css de la page affichée, mais uniquement sur la partie concernant l'élément concerné. A l'instant j'ai pu accéder normalement et tester en agissant sur le thème global.
    Résultat OK (voir copies d'écran ci-dessous)


        



    Par ailleurs, j'ai rencontré des situations similaires ou pour modifier la valeur d'une propriété, cela devait être fait en utilisant la même syntaxe que la précédente
    Ainsi un background-color: devait être modifié que par un autre background-color: (et pas avec une écriture backgroud:). Cependant je n'affirme pas que c'est une règle.

    Peut être que si vadou remplace son background: transparent; par un background-color: transparent ; ça fonctionnerait aussi, et sans retoucher le thème.

    A suivre ...

    Dimanche 8 Octobre à 20:28
    Colette95

    Oui, oui, je suis la contestataire yes 

    J'avais fait des essais et en essayant ce que tu avais indiqué, cela modifiait le paramétrage du blog. Il n'y a qu'en incluant le code directement dans le html que l'on obtient le résultat souhaité. 

    Bon, je pense que vadou nous tiendra au courant et en attendant la suite, je te souhaite une excellente soirée. smile

    Lundi 9 Octobre à 10:30
    stormalo

    @Colette95,

    OK, je n'ai pas fait attention a cet aspect "sélecteur existant".  erf

    Cependant, ma dernière phrase du post précédent est peut être pertinente :

    "remplacer son background: transparent; par un background-color: transparent ;"

     

    Lundi 9 Octobre à 10:48
    Colette95

    @stormalo 

    Me serais-je mal exprimée ?... he alors je confirme que même en suivant ce que tu indiques dans ta dernière phrase, ça ne fonctionne pas. no

     

    Lundi 9 Octobre à 11:10
    vadou

    Merci Colette et Stormalo, Je vais essayer la version de Colette.

    Pour Stormalo, voilà ce que j'ai introduit mais à chaque fois sans résultat :

    Background-color: transparent;]

    Background-color:rgba(255,255,255,0);]

    A plus, cordialement




    Vous devez être membre pour poster un message.