css et logo

Général
1

Bonjour,

Je souhaiterai mettre sur les logos une bande grise transparente intégrant le titre de l'article
(exemple 1ère image sur http://www.sports.fr )
mais je ne sais comment procéder.
Pouvez-vous me donner des pistes ,

Merci

Dan

2

Bonjour,

Avec les filtres images peut-être ? http://www.spip.net/fr_article3327.ht

2009/2/6 Dan <dan.diaconu@noos.fr>

Bonjour,

Je souhaiterai mettre sur les logos une bande grise transparente intégrant le titre de l’article
(exemple 1ère image sur http://www.sports.fr )
mais je ne sais comment procéder.
Pouvez-vous me donner des pistes ,

3

Bonjour,

en utilisant un outil type Firebug tu peux inspecter la façon dont est réalisée l’affectation des styles à l’image. Ce devrait être un bon point de départ.

Patrice

Dan <dan.diaconu@noos.fr> a écrit sur 06/02/2009 17:10:04 :

> Bonjour,
>
> Je souhaiterai mettre sur les logos une bande grise transparente
> intégrant le titre de l'article
> (exemple 1ère image sur [http://www.sports.fr](http://www.sports.fr) )
> mais je ne sais comment procéder.
> Pouvez-vous me donner des pistes ,
>
> Merci
>
> Dan
>
> _______________________________________________
> liste spip
> spip@rezo.net - désabonnement : spip-off@rezo.net
>
> Infos et archives : [http://listes.rezo.net/mailman/listinfo/spip](http://listes.rezo.net/mailman/listinfo/spip)
>
> Documentation de SPIP : [http://www.spip.net/](http://www.spip.net/)
>
> irc://irc.freenode.net/spip ou [http://embed.mibbit.com/?server=irc](http://embed.mibbit.com/?server=irc).
> freenode.net&channel=%23spip

4

Dan a écrit :

Bonjour,

Je souhaiterai mettre sur les logos une bande grise transparente intégrant le titre de l'article
(exemple 1ère image sur http://www.sports.fr )
mais je ne sais comment procéder.
Pouvez-vous me donner des pistes ,

Comme déjà dit, FireBug est idéal pour aller comprendre :wink:
Principe (vu par un pas doué, dans le cadre d'un affichage sur 172px de large):
<div class="contientlogo" style="background-image: url([(#LOGO_ARTICLE||image_reduire{172,0}|extraire_attribut{src})]); height: [(#LOGO_ARTICLE||image_reduire{172,0}|extraire_attribut{height})]px;">
<div class="annonceurl">
                 <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"] class="afondtransp">[(#TITRE)]</a>
</div>
              </div>

css (l'image est remplie de noir transparent):
div.contientlogo {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}
div.annonceurl {
background-image:url(../IMG/noirtr-60.png);
background-repeat:repeat;
bottom:0;
margin:0;
position:absolute;
text-align:center;
width:100%;
}

Dans le cas du site cité, ça marche avec un span:
span { /* skin.css (ligne 18) */
background:transparent url(/includes/nav/images/dot50-000.png) repeat scroll left top;
color:#FFFFFF;
}

On peut aussi prévoir l'absence de logo:
[(#LOGO_ARTICLE||?{
       quoi faire si logo
,
       quoi faire si pas de logo
})]

--
hth,
FM