Forum - En vrac ! - Bouton déroulants 2

56 membres

Connectés : ( personne )
Snif !!!

- La Charte du Forum

- Forum

- En vrac !

clos par JeanDenis le 26/03/2017 @ 08:21

Sujet n° 23

Bouton déroulants 2

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

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

Réponse n° 1
--------
le 06/03/2017 @ 06:15
par 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,

Réponse n° 2
--------
le 06/03/2017 @ 17:30
par philcharp

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

Réponse n° 3
--------
le 06/03/2017 @ 17:57
par 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é...