[Problème] Comment modifier l'opacité de figcaption??

[milou07]

Si un modérateur passe par là, serait-il possible de déplacer ce fichier dans la section "joomla 3.0", merci d'avance!

Bonjour à tous,

Bon, avant toute chose, je précise qu'il s'agit de mes tous premiers pas avec joomla, le html et le css... aussi, veuillez m'excuser de la naïveté de mes questions.

Pour l'heure, j'ai un problème avec une légende que j'ai rajouté sur une image.

A la base, le code est ainsi fait (il s'agit d'un slideshow):

<figure>
                <?php echo "<img src='".JURI::root()."$image3'>";?>  
                    <figcaption><?php echo $title3; ?></figcaption>
                </figure>  </a>

J'ai besoins de rajouter une description et mettre le titre plus gros; j'ai essayé:

<?php echo "<img src='".JURI::root()."$image3'>";?>  
                <figcaption>
         <h7><strong><?php echo $title3; ?></strong>.</h7>
         <p><h8><?php echo $description3; ?></h8></p>
                </figcaption> 
                </figure> </a>

puis j'ai créé des attributs pour h7 et h8 dans mon fichier css (taille, couleur de police)

Mon principale problème est que je voudrais diminuer l'opacité du background.

Avec Firebug, je trouve bien un élément:

figcaption {
padding: 10px 15px;
position: absolute;
bottom: 20px;
right: 30px;
margin-left:30px;
z-index: 3;
background: black;
background: rgba(0,0,0,0.7);
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px

Donc en ligne pas de soucis pour modifier l'opacité: mais ce css n'existe pas sur mon site... il apparaît "inline" dans firebug.
J'ai bien essayé de le créer dans mon fichier css mais ça ne fonctionne pas. J'avoue que j'ai beau chercher, je ne vois pas comment y remédier...

Dans le css du slideshow il ya un élément:

.ap-caption {
padding: 10px 15px;
position: absolute;
bottom: 20px;
right: 30px;
margin-left:30px;
z-index: 3;
background: black;
background: rgba(0,0,0,0.7);
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px

qui a donc les mêmes attributs que figcaption découvert dans firebug... mais pas d'effet en le modifiant, ni en le renommant, ni supprimant pour le remplacer par figcaption...

Pourquoi les attributs "inline" prennent le dessus sur ceux que je crée dans mon fichier css???

Tout ceci doit sans doute vous semblez très bête, vous les experts du code... mais pour ma part, je nage depuis des heures.Y aurait-il une âme charitable pour m'aider à y voir plus clair??

Vous remerciant par avance,

[milou07]

Re : Comment modifier l'opacité de figcaption??

Bonjour,


Pas de retour, c'est peut-être vraiment très bête comme question...

En fait, ce que je n'arrive pas à comprendre c'est que dans Firebug, le style de mon figcaption est attribués à un fichier "Inline: 176", qui n'existe pas sur mon site

Firebug reconnait bien la classe css "figcaption" que j'ai créé mais tous les attirbuts sont barrés, le fichier "inline" semble prendre le dessus...

J'ai lu sur le forum de rajouter la balise !important dans mon css mais ça ne change rien.

Pardonnez mon innocence mais c'est quoi ce fichier "Inline"??

Je précise que je fais des essais sur un site en local... donc désolé de ne pouvoir donner de lien.

En tous cas, merci d'avance à ceux qui voudront bien m'aider.

[milou07]

Re : Comment modifier l'opacité de figcaption??

Ohlala, mille excuses!!

ça marche avec la balise

!important

C'est juste que j'avais fait:

background: rgba(0,0,0,0.4); !important

au lieu de:

background: rgba(0,0,0,0.4) !important;

ça résoud mon problème même si je n'ai toujours pas compris ce que c'était que ce fichier inline qui prend le dessus sur mon css...

[milou07]

Re : Comment modifier l'opacité de figcaption??

Pour aller plus loin, j'ai essayé de séparer les deux blocs pour avoir quelque chose qui ressemble à ça:



J'ai essayé ce code:

<div><?php echo $slide2; ?></div>
            <div>
        <a class="<?php echo $display2; ?>" href="<?php echo $link2; ?>" target="<?php echo $target2; ?>">
                <figure>
        <?php echo "<img src='".JURI::root()."$image2'>";?>      
            <figcaption><h9><strong><?php echo $title1; ?></strong>.</h9></figcaption> 
                 <figcaption><h10><?php echo $description1; ?></h10></figcaption>
                 
                </figure> </a>
            </div>

et j'ai créer les attributs css pour h9 et h10,

exemple:

[CODE]h9 {
background: rgba(0,0,0,0.8) !important;
padding: 10px 15px;
position: relative;
bottom: 56px;
margin-left:0px;
z-index: 3;
font-size: 20px;
color: white;[CODE]


Je sais pas si c'est la bonne méthode mais ça marche presque... seul soucis, je n'arrive pas à aligner les blocs à gauche.

Quelqu'un pourrait-il me dépanner avec ça?

[milou07]

Re : Comment modifier l'opacité de figcaption??

Bon, dans ce cas là, figcaption ne sert à rien...

<div><?php echo $slide3; ?></div>
            <div>
      <a class="<?php echo $display3; ?>" href="<?php echo $link3; ?>" target="<?php echo $target3; ?>">
                <figure>
                <?php echo "<img src='".JURI::root()."$image3'>";?>  
                    <h9><?php echo $title1; ?></h9> 
                         <h10><?php echo $description1; ?></h10>
                </figure>  </a>
            </div>

C'est mieux comme ça et du coup pas de problème pour aligner mes deux blocks...

Si vous vouliez bien m'accorder un peu de votre temps, j'aimerais vous poser deux petites questions avant de passer en résolu.

1) Pour le css, position relative ou absolue?? je suis pas sûr d'avoir bien compris le principe...

h9 {
background: rgba(0,0,0,0.7);
padding: 10px 15px;
position: absolute;
left: 250px;
bottom: 57px;
font-family: "Source Sans Pro",Verdana,Geneva,Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
text-align: left;
color: #FFF;


2) J'imagine que l'utilisation de h9 et h10 n'est pas top... en quoi ça pourrait me poser des problèmes?

Désolé de mon ignorance, et merci à vous qui voudrez bien prendre une minute pour m'aider à y voir plus clair,

Bonne soirée

[lefabdu51]

Re : Comment modifier l'opacité de figcaption??

ce fichier "Inline"??

C'est le code inscrit directement dans le html.

Il correspond généralement au paramètrage de l'extension.
Tu le trouves a gauche dans firebug.

Donc avant de passer par des css, soit sur du paramètrage de ton extension.

Si tu n as pas de paramètres, alors regardes du coté de la mise en page associée.
Tu peut aussi en trouver une partie ici.
le !important est une des rares manières de contourner la precedence de ce code, mais c est a utiliser avec precaution.

[lefabdu51]

Re : Comment modifier l'opacité de figcaption??

a la place du h9, pourquoi pas du h3 avec une classe spécifique?

[ghazal]

Re : Comment modifier l'opacité de figcaption??

@milou07
Discussion déplacée à ta demande.