AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Widget flottant

    Partagez
    avatar
    Coriolis
    FémininAge : 27Messages : 288

    le Ven 4 Juin 2010 - 18:37

    Rappel du premier message :

    Créer un Widget flottant

    Le widget flottant, c'est un petit cadre qui se place sur votre page et qui accompagne le visiteur même s'il descend ou remonte sur cette même page. Sa position est fixe, ainsi, peu importe où vous vous situez sur la page il restera présent.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Avant tout chose, il faut créer le widget en lui-même.
    Pour ma part, j'ai choisi de créer une petite fenêtre avec, par exemple, mon partenaire (Never-utopia). Je crée une division, avec son contenu (le contenu ici est donc le logo de N-U, il est possible d'y mettre ce que l'on veut, une navigation, une liste de logo, des avatars, le copyright du forum).

    Code:
    <div class="widget_flottant"><a href="http://www.never-utopia.com" target="_blank"><img src="http://host.image.files.free.fr/host/49abfc8769e6cbouton-nu.png"></a></div>
    Note : la class de la division se nomme \\"widget_flottant\\", c'est elle qui va nous guider pour la suite.

    Placez ce code à la suite de votre page d'accueil (en-tête).
    Chemin sur Forumactif : Panneau d'administration > affichage > généralités.

    À présent le reste du travail concerne uniquement du code css.
    Dans la feuille de style du forum.
    Chemin sur Forumactif : Panneau d'administration > affichage> couleurs > feuille de style

    Il faut commencer par établir la taille de notre wiget.
    Code:
    .widget_flottant
    {
    width: 150px;
    height: 100px;
    }
    Note : Mon widget fera 150pixels de large et 100 de haut.

    Plaçons-le à présent sur la page.
    Attention : lorsqu'on a placé le premier code dans le cadre de l'en-tête, on a, implicitement, choisi de ne faire apparaitre ce widget que sur l'index du forum. Si vous souhaitez l'afficher sur l'intégralité du forum, il est possible de placer le code dans le template qui concerne la bannière du forum, ou encore, le footer.
    Pour placer le widget sur la page, on utilise la position:fixed. Le widget restera présent à l'écran au même endroit même si le visiteur descend ou remonte sur la page.

    Code:
    .widget_flottant
    {
    width: 150px;
    height: 100px;

    position:fixed;
    top: 50px;
    right: 10px;
    }
    Note : "top" signifie que j'ai placé mon widget à 50 pixels du haut de ma page (entre le widget et le haut de page il y aura 50px de marge). "right" signifie que j'ai placé mon widget à 10pixels du bord droit de ma page.

    Testez, vous verrez le widget existe, le widget flotte, mais le widget est encore un peu moche, là, non ? En ajoutant quelques propriétés css vous pourrez améliorer la présentation de ce petit objet. Quelques exemples.
    un couleur de fond, une image de fond avec la propriété background-color ou background-image. Une bordure (border), on peut l'arrondir (-moz-border-radius & cie) etc.


    (sachez que ce tutoriel est ma création et que je l'ai déjà proposé sur d'autres supports d'entraide.)



    C'est cela l'Entre-Monde, le carrefour de la vie et de toutes les possibilités, voyons au delà de la réalité puisque ce monde est irréel.
    avatar
    Sui'
    MasculinAge : 25Messages : 1865

    le Mar 30 Nov 2010 - 19:37

    Sa l'affiche mal sous IE? Sache que IE c'est le mal il est pas à jours au niveau de certaine propriété même si le codage sa reste du codage x).



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    âme
    FémininAge : 51Messages : 154

    le Mar 30 Nov 2010 - 20:38

    Ah non, au contraire !
    J'ai expliqué que le widget était parfait sous Google Chrome, que IE l'affichait très bien aussi mais que rien n'y faisait sous Mozilla et Opéra.
    Ces deux derniers navigateurs ne sont pourtant pas trop mal, bien que je ne les utilise pas mais étonnant que le widget flottant ne veuille pas s'afficher avec eux :crash:



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Sui'
    MasculinAge : 25Messages : 1865

    le Mar 30 Nov 2010 - 20:52

    Autant pour moi xD je pensais que tu t'étais mal exprimer (honte à moi ^^") c'est peut-être au niveau de la position qu'il y à un problème, pourrais-je avoir le code que tu as utiliser + css pour que je puisse tenter de voir d'ou vient le problème?



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    âme
    FémininAge : 51Messages : 154

    le Mar 30 Nov 2010 - 23:59

    Oh ne t'inquiète pas, ce n'est pas un problème, j'aurais pu expliquer plus simple :michi7:

    Voici mon code ccs.
    Code:
    .widget_flottant
    {
    width: 120px;
    height: 100px;

    position:fixed;
    top: 635px;
    right: 1px;
    }

    Puis mon code Page d'accueil.
    Code:
    <div class="widget_flottant"><a href="http://www.color-avenue.net/index.htm" target="_blank"><img src="http://nsm05.casimages.com/img/2010/11/30/101130041118760257220671.png"></a>

    En te donnant les codes je viens de penser à une chose !
    Peut-être que le widget est trop bas pour les autres navigateurs, qu'il est bien prit en compte mais qu'on ne le vois pas ?

    Merci pour ton aide Sui' :kay7:
    avatar
    Erwaan
    MasculinAge : 25Messages : 16

    le Dim 12 Déc 2010 - 22:08

    Ça peut être utile, merci!
    avatar
    Mélodrame
    FémininAge : 24Messages : 456

    le Lun 13 Déc 2010 - 16:23

    Merci pour le partage =)




    ★ Tu porte du Drame ? (J'porte du BâNg' ) J'suis chanceuse x) ☆
    Spoiler:
    avatar
    Egan
    MasculinAge : 25Messages : 58

    le Mar 21 Déc 2010 - 18:47

    Bonsoir,

    Merci pour le partage de ce tutoriel qui me manquait tellement.



    avatar
    Benjamin55
    MasculinAge : 19Messages : 11

    le Dim 30 Jan 2011 - 20:05

    Merci pour le tuto
    avatar
    Stranger
    MasculinAge : 21Messages : 4

    le Lun 14 Fév 2011 - 16:08

    Merci pour le partage
    avatar
    NAME'LESS
    MasculinAge : 21Messages : 8

    le Mar 22 Fév 2011 - 8:00

    Merci du partage =)
    avatar
    bouboucool
    MasculinAge : 37Messages : 10

    le Mar 22 Fév 2011 - 20:21

    Merci beaucoup
    avatar
    Soul
    MasculinAge : 21Messages : 1723

    le Jeu 24 Fév 2011 - 19:04

    Merci Merci !
    avatar
    Shinharu
    MasculinAge : 26Messages : 38

    le Mar 1 Mar 2011 - 19:05

    Merci !
    Rina
    FémininAge : 24Messages : 675

    le Jeu 3 Mar 2011 - 12:53

    Justement un tuto que je cherchais merci de l'avoir posté
    avatar
    Lipton
    FémininAge : 24Messages : 28

    le Jeu 10 Mar 2011 - 21:43

    Parfait ! Merci
    avatar
    Sasuke67420
    MasculinAge : 32Messages : 51

    le Sam 12 Mar 2011 - 12:56

    Merci , à tester
    avatar
    Solstice
    MasculinAge : 33Messages : 72

    le Dim 20 Mar 2011 - 14:41

    Ça m'a l'air fortement intéressant !
    avatar
    Aeilan
    FémininAge : 27Messages : 20

    le Mar 22 Mar 2011 - 16:51

    Merciii !! :§erre:
    avatar
    Byakuya Kuonki
    MasculinAge : 17Messages : 107

    le Mer 23 Mar 2011 - 15:02

    je suis curieux, alors je veux regarder !
    avatar
    Roule_Aspara
    MasculinAge : 20Messages : 255

    le Mar 29 Mar 2011 - 18:08

    Merci d'avance ^^



    [/center]
    avatar
    Ichigo25
    Age : 28Messages : 23

    le Sam 9 Avr 2011 - 18:56

    merci pour le tuto^^
    avatar
    Sparkling Sky
    FémininAge : 29Messages : 48

    le Sam 9 Avr 2011 - 21:12

    Je veux bien voir, merci. (:
    avatar
    Ryusuke
    MasculinAge : 23Messages : 83

    le Dim 10 Avr 2011 - 1:14

    Merci Very Happy



    avatar
    Linker22~
    MasculinAge : 18Messages : 215

    le Dim 10 Avr 2011 - 11:55

    Ça à l'aire cool



    avatar
    Kanu
    FémininAge : 26Messages : 56

    le Ven 15 Avr 2011 - 0:47


    Merci du partage ! Juste ce que je cherchais ! *O*
    Contenu sponsorisé


      La date/heure actuelle est Jeu 23 Mar 2017 - 7:06