En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Forum » En vrac ! » Bouton déroulants 2
 
 
 
    Imprimer la page...
    Imprimer la section...

Forum - En vrac ! - Bouton déroulants 2


clos par JeanDenis le 26/03/2017 @ 08:21  Sujet n° 23

le 05/03/2017 @ 20:11
par philcharp

philcharp

1 message

Bonsoir Jean-Denis,
ma question porte sur ton tutoriel "bouton déroulants 2"
Est-ce que le code peut être aussi copier dans le fichier style-plus et est-ce qu'on peut mettre du code dans le déroulé du bouton?
(j'aimerais créer un bouton météo avec le code d'un widget qui s'afficherait au passage de la souris)
Merci d'avance@+Phil
Rectifié par philcharp le 05/03/2017 @ 20:11
sujet clos Haut  
Réponse n° 1
--------
le 06/03/2017 @ 06:15
par JeanDenis

JeanDenis

Administrateur
45 messages

Bonjour Phil,

Il est tout à fait possible de placer tout le style dans le fichier styleplus.css (il faut alors ne pas mettre les balises
<style type="text/css">
</style>
juste le contenu.... (je le signale à chaque fois. Là aussi, mais c'était dans la première partie du tutoriel... mille excuses...)

Pour l'intégration d'un widget, là aussi pas de souci et tu pourrais avoir quelquechose comme ( widget de tameteo.com... mais d'autres conviendraient...) :

 
Code : php
<div id="boite_deploiement">
<div class="deploiement">
<h5><a href="#">Météo</a></h5>
<div style="background:linear-gradient(rgba( 0, 64, 128, 0.6), rgba( 0, 64, 128, 1.0))">
<p>widget météo</p>
<div id="cont_fd317e4d8806b521c097b2b5eadb3745"><script type="text/javascript" async src="https://www.tameteo.com/wid_loader/fd317e4d8806b521c097b2b5eadb3745"></script></div>
</div>
</div>
</div>
 

Pour info, la boite-menu déroulante horizontale, peut permettre la même chose, voir le site de jaq83   (à qui j'adresse mes amitiés !) https://thorame-haute.fr/

Cordialement,

Site web JeanDenis
clos par JeanDenis le 26/03/2017 @ 08:21 Haut  
Réponse n° 2
--------
le 06/03/2017 @ 17:30
par philcharp

philcharp

2 messages

Re,
merci pour tout !
C'est en place ici: https://ecole-mailley.fr/ (colonne de droite)
Par contre:- je n'ai pas pu changer la taille du texte (les 1.6em)- je n'ai pas l'impression que le bold soit bien pris en compte (il a l'air de l'être uniquement sur le a:hover)- comment faire pour supprimer la marge à gauche (pas trouvé non plus...)
Merci d'avance pour tes réponses.
@+
Phil
clos par JeanDenis le 26/03/2017 @ 08:21 Haut  
Réponse n° 3
--------
le 06/03/2017 @ 17:57
par JeanDenis

JeanDenis

Administrateur
47 messages

Bonsoir,

Personnellement je modifierai dans ton styleplus (il n'y a qu'un bouton donc des éléments à modifier par rapport au tutoriel)
ligne 364 et suivantes
.deploiement { /*Bouton et Bandeau déroulant*/
width:96%; /*largeur du bouton et du bandeau déroulant*/
height:1px; /*IMPORTANT*/
float: left;
margin:0 auto; /*marges extérieures des boutons et bandeaux déroulants*/
}


je pense que cela règlera la marge...


font-size:1.6em; /*taille du texte*/
s'applique au texte du bandeau déroulant, mais tu n'as pas de texte dans celui-ci (c'est celui du widget)

pour le texte en gras sur le bouton (il n'y est effectivement que sur le survol) :
si tu veux l'appliquer au titre du bouton, il faut ajouter
font-weight:bold; /* ou bold */
à
#boite_deploiement h5 a { /*attributs des liens sur les boutons*/

Sinon, cela fonctionne très bien, bravo, belle utilisation du procédé... k

Cordialement,
Jean-Denis

Site web JeanDenis
clos par JeanDenis le 26/03/2017 @ 08:21 Haut  
Réponse n° 4
--------
le 06/03/2017 @ 18:17
par philcharp

philcharp

3 messages

Re,
nickel !Merci pour tout!J'en ai profité pour rajouter :
font-size:0.8em; /*taille du texte*/

dans:
#boite_deploiement h5 a { /*attributs des liens sur les boutons*/
Et ça fonctionne aussi!
A bientôt
Philippe

Rectifié par philcharp le 06/03/2017 @ 18:18
clos par JeanDenis le 26/03/2017 @ 08:21 Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter