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 - 16: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
    Invité

    le Dim 5 Juin - 8:40

    Merci, c'est sympa je trouve =)
    avatar
    Seth Nagareboshi
    FémininAge : 23Messages : 9

    le Dim 5 Juin - 10:12

    J'ai toujours chercher comment faire ça =3
    Merci !
    avatar
    Dydy
    FémininAge : 26Messages : 490

    le Dim 5 Juin - 10:14

    Ah c'est sympa. Merci pour ce tuto =)



    avatar
    Invité

    le Sam 11 Juin - 22:28

    Je veux voir Very Happy
    avatar
    aecan
    FémininAge : 25Messages : 6

    le Mer 15 Juin - 13:58

    Intéressant !

    Merci pour le tuto !
    avatar
    Little Pon
    FémininAge : 21Messages : 45

    le Jeu 16 Juin - 13:25

    C'est original comme astuce ! ♥



    avatar
    Romantic_Lucky
    FémininAge : 22Messages : 13

    le Ven 17 Juin - 17:52

    Merci beaucoup Very Happy



    BlueLife
    avatar
    Malizia.
    FémininAge : 21Messages : 78

    le Lun 20 Juin - 20:49

    J'veux voir ! (;

    avatar
    Yosuke
    MasculinAge : 23Messages : 2664

    le Lun 20 Juin - 21:57

    Merci à toi Very Happy




    Kit by Yosuke
    avatar
    Kendall
    FémininAge : 25Messages : 117

    le Mar 21 Juin - 19:23

    Merci d'avoir créer ce tuto ♥




    avatar
    Emy
    FémininAge : 25Messages : 17

    le Mar 21 Juin - 22:03

    Ca m'intéresse! ^^
    avatar
    Misery Mind™
    FémininAge : 26Messages : 151

    le Jeu 23 Juin - 13:56

    Veut voir ^^
    avatar
    pblv-forum
    MasculinAge : 25Messages : 3

    le Jeu 23 Juin - 14:37

    Merci de ton astuce cela m'est très utile !
    avatar
    hollister.
    FémininAge : 21Messages : 12

    le Jeu 23 Juin - 17:33

    Merci du partage :3
    avatar
    Shuu-Shuu
    FémininAge : 20Messages : 196

    le Sam 25 Juin - 6:54

    merci pour le Widget Flottant Wink
    avatar
    MissBelphegor
    FémininAge : 20Messages : 6

    le Sam 25 Juin - 16:45

    Je veux voir *w* Ca gère, merci Wink


    Dernière édition par MissBelphegor le Sam 25 Juin - 16:46, édité 1 fois
    avatar
    Doc
    MasculinAge : 30Messages : 595

    le Sam 25 Juin - 16:46

    Merci pour l'astuce ^^



    avatar
    SPF
    MasculinAge : 24Messages : 10

    le Sam 25 Juin - 17:03

    Je demande à voir ! :)
    avatar
    Croc de Loup
    FémininAge : 19Messages : 30

    le Dim 26 Juin - 10:13

      Ça peut servir, merci pour le tuto' ♥




    avatar
    Kittaby
    FémininAge : 21Messages : 2

    le Lun 27 Juin - 18:11

    Plop, je veux voir. \o/
    avatar
    Pixie
    FémininAge : 20Messages : 4

    le Dim 3 Juil - 11:51

    Je veux voir aussi :) merci du partage!
    avatar
    Reiõ
    MasculinAge : 23Messages : 200

    le Lun 4 Juil - 1:35

    Merci
    avatar
    Swiff
    FémininAge : 22Messages : 24

    le Lun 4 Juil - 19:44


      Merci :)
    avatar
    Arawen
    FémininAge : 25Messages : 126

    le Mar 5 Juil - 8:55

    Merci beauocup, d'avance



    avatar
    Honey
    FémininAge : 25Messages : 57

    le Mar 5 Juil - 12:11

    Merci pour ce petit tuto :)
    Il me servira Wink
    Contenu sponsorisé


      La date/heure actuelle est Dim 26 Mar - 18:48