Slogan du bandeau par-dessus une image .gif ?

Groupes Escal
1

Bjr,

Est-il possible de superposer le slogan sur un bandeau contenant une image .gif animé ?
ijnjhhniehmaclhj.png

Pour l’instant le slogan est dessous.

oifgnbfbnioehngd.png

2

Le 27/09/2019 à 13:57, andriant.sandy a écrit :

Bjr,

Est-il possible de superposer le slogan sur un bandeau contenant une image .gif animé ?

Pour l'instant le slogan est dessous.

Bonjour,
De passer par
/ecrire/?exec=configurer_escal&cfg=bandeau
Option 3 : affichage d’un bandeau personnalisé
et de dire que Nom du site présent "oui"
Ça marche ?
Bonne journée,
Yves

--
Sandy-Pascal Andriant
www.essaillon-sederon.net

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

3

La config est OK mais le slogan est tjs dessous au lieu d’être superposé à l’image.

koleackfmmgggjji.png

4

Le 27/09/2019 à 14:12, andriant.sandy a écrit :

La config est OK mais le slogan est tjs dessous au lieu d'être _*superposé*_ à l'image.

Sandy-Pascal Andriant
www.essaillon-sederon.net

C'est en ligne quelque part ?
Bonne journée,
Yves

5

Oups,

Je croyais avoir donné le lien.

https://ag-13.spipfactory.fr/

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 14:26, Yves_forums a écrit :

Le 27/09/2019 à 14:12, andriant.sandy a écrit :

La config est OK mais le slogan est tjs dessous au lieu d'être _*superposé*_ à l'image.

Sandy-Pascal Andriant
www.essaillon-sederon.net

C'est en ligne quelque part ?
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

6

Bon,

Je tâtonne à partir de ce tuto

Me manque juste comment modifier couleur et taille du titre du site dans styles/perso.css

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 14:26, Yves_forums a écrit :

Le 27/09/2019 à 14:12, andriant.sandy a écrit :

La config est OK mais le slogan est tjs dessous au lieu d'être _*superposé*_ à l'image.

Sandy-Pascal Andriant
www.essaillon-sederon.net

C'est en ligne quelque part ?
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

7

béé, moi je vois
Association généalogique des Bouches-du-Rhône
et noir, sur deux lignes, par-dessus un gif animé (??)
Ça c'est le nom du site, ok
Pour tester, affiche le slogan du site, là il est en display : none
J'ai testé sans et avec :
#slogan-site-spip {
     float: right;
     width: 200px;
     font-style: italic;
     padding-top: 100px;
     padding-right: 30px;
}
Faudrait encore le center et mettre une jolie couleur
virer le float right
mettre une couleur, ça c'est un peu plus chaud car il hérite de
#entete, nav.menu {
     color: #000000;
}
Donc, va falloir ruser... avec un Important ?
Bonne journée
Yves
PS le padding-right ne sert à rien dans ton cas.

Le 27/09/2019 à 14:29, andriant.sandy a écrit :

Oups,

Je croyais avoir donné le lien.

https://ag-13.spipfactory.fr/

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 14:26, Yves_forums a écrit :

Le 27/09/2019 à 14:12, andriant.sandy a écrit :

La config est OK mais le slogan est tjs dessous au lieu d'être _*superposé*_ à l'image.

Sandy-Pascal Andriant
www.essaillon-sederon.net

C'est en ligne quelque part ?
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

8

une chtite majuscule à "généalogie"
et un font-variant à
#nom-site-spip {
     float: left;
     width: 450px;
     font-style: italic;
     font-weight: bold;
     padding-top: 20px;
     font-variant: small-caps;
}
Ça fait plus mieux, d'après moi.
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

9

Beaucoup plus simple d’insérer ton slogan dans chaque image de ton gif animé et de supprimer l’affichage du slogan dans Escal …

10

Merci,

Voilà
https://ag-13.spipfactory.fr

#nom-site-spip {
width: 1200px;
font-style: italic;
font-weight: bold;
padding-top: 80px;
margin-left: -230px;
font-variant: small-caps;
text-align: left;
color: white;
}

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 15:23, Yves_forums a écrit :

une chtite majuscule à "généalogie"
et un font-variant à
#nom-site-spip {
float: left;
width: 450px;
font-style: italic;
font-weight: bold;
padding-top: 20px;
font-variant: small-caps;
}
Ça fait plus mieux, d'après moi.
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

11

C'est boooo !
Remarque : Si tu diminue la page, ça te cache une partie tu texte.
Solution: donner une taille à ton texte genre font-size: 1.5vw... Comme ça tu peux faire de l’accordéon avec ton texte... Vi, comme Verchuren :slight_smile:
Je sais avec le texte dans les images, ça serait déjà fait :wink:
Mais c'est moins sportif !
Bonne journée,
yves

Le 27/09/2019 à 16:59, andriant.sandy a écrit :

Merci,

Voilà
https://ag-13.spipfactory.fr

#nom-site-spip {
width: 1200px;
font-style: italic;
font-weight: bold;
padding-top: 80px;
margin-left: -230px;
font-variant: small-caps;
text-align: left;
color: white;
}

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 15:23, Yves_forums a écrit :

une chtite majuscule à "généalogie"
et un font-variant à
#nom-site-spip {
float: left;
width: 450px;
font-style: italic;
font-weight: bold;
padding-top: 20px;
font-variant: small-caps;
}
Ça fait plus mieux, d'après moi.
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

12

Super le vw !
Plus sportif certes mais du coup, je pense que ce n'est plus responsive ...

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 17:18, Yves_forums a écrit :

C'est boooo !
Remarque : Si tu diminue la page, ça te cache une partie tu texte.
Solution: donner une taille à ton texte genre font-size: 1.5vw... Comme ça tu peux faire de l’accordéon avec ton texte... Vi, comme Verchuren :slight_smile:
Je sais avec le texte dans les images, ça serait déjà fait :wink:
Mais c'est moins sportif !
Bonne journée,
yves

Le 27/09/2019 à 16:59, andriant.sandy a écrit :

Merci,

Voilà
https://ag-13.spipfactory.fr

#nom-site-spip {
width: 1200px;
font-style: italic;
font-weight: bold;
padding-top: 80px;
margin-left: -230px;
font-variant: small-caps;
text-align: left;
color: white;
}

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 15:23, Yves_forums a écrit :

une chtite majuscule à "généalogie"
et un font-variant à
#nom-site-spip {
float: left;
width: 450px;
font-style: italic;
font-weight: bold;
padding-top: 20px;
font-variant: small-caps;
}
Ça fait plus mieux, d'après moi.
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

13

De toutes façons, avec cette option, l'image n'est pas responsive puisqu'elle est en image de fond.

Le 27/09/2019 à 17:18, Yves_forums a écrit :

C'est boooo !
Remarque : Si tu diminue la page, ça te cache une partie tu texte.
Solution: donner une taille à ton texte genre font-size: 1.5vw... Comme ça tu peux faire de l’accordéon avec ton texte... Vi, comme Verchuren :slight_smile:
Je sais avec le texte dans les images, ça serait déjà fait :wink:
Mais c'est moins sportif !
Bonne journée,
yves

Le 27/09/2019 à 16:59, andriant.sandy a écrit :

Merci,

Voilà
https://ag-13.spipfactory.fr

#nom-site-spip {
width: 1200px;
font-style: italic;
font-weight: bold;
padding-top: 80px;
margin-left: -230px;
font-variant: small-caps;
text-align: left;
color: white;
}

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 15:23, Yves_forums a écrit :

une chtite majuscule à "généalogie"
et un font-variant à
#nom-site-spip {
float: left;
width: 450px;
font-style: italic;
font-weight: bold;
padding-top: 20px;
font-variant: small-caps;
}
Ça fait plus mieux, d'après moi.
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

14

Le 27/09/2019 à 17:26, andriant.sandy a écrit :

Super le vw !
Plus sportif certes mais du coup, je pense que ce n'est plus responsive ...

Bin... Pourquoi ?
Tant qu'on y est, après ton concert, au lieu d'aller dormir tu pourrais utiliser ton logo, ton gif et le blason comme images multiples dans le background, c'est (entre autres) là :
https://www.alsacreations.com/tuto/lire/814-css3-background-image-multiple.html
-> Gaffe aux tailles d'images avec les portables !
Bonne nuit ! :wink:
Yves

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 17:18, Yves_forums a écrit :

C'est boooo !
Remarque : Si tu diminue la page, ça te cache une partie tu texte.
Solution: donner une taille à ton texte genre font-size: 1.5vw... Comme ça tu peux faire de l’accordéon avec ton texte... Vi, comme Verchuren :slight_smile:
Je sais avec le texte dans les images, ça serait déjà fait :wink:
Mais c'est moins sportif !
Bonne journée,
yves

Le 27/09/2019 à 16:59, andriant.sandy a écrit :

Merci,

Voilà
https://ag-13.spipfactory.fr

#nom-site-spip {
width: 1200px;
font-style: italic;
font-weight: bold;
padding-top: 80px;
margin-left: -230px;
font-variant: small-caps;
text-align: left;
color: white;
}

Sandy-Pascal Andriant
www.essaillon-sederon.net

Le 27/09/2019 à 15:23, Yves_forums a écrit :

une chtite majuscule à "généalogie"
et un font-variant à
#nom-site-spip {
float: left;
width: 450px;
font-style: italic;
font-weight: bold;
padding-top: 20px;
font-variant: small-caps;
}
Ça fait plus mieux, d'après moi.
Bonne journée,
Yves

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

_______________________________________________
Spip-avec-escal@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-avec-escal

15

Le 27/09/2019 à 20:33, Yves_forums a écrit :

Tant qu'on y est, après ton concert, au lieu d'aller dormir tu pourrais utiliser ton logo, ton gif et le blason comme images multiples dans le background, c'est (entre autres) là :
Arrière-plans avec CSS3 Backgrounds - Alsacreations

Géniale cette méthode.

Je me demandais justement s'il existait un plugin qui permette de piocher des images dans un réservoir pour créer des bandeaux aléatoires.
Si t'as une idée.

Sandy-Pascal Andriant
www.essaillon-sederon.net