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 - Bloc flottant sans survol

    Coriolis
    Coriolis
    FémininAge : 29Messages : 288

    le Ven 4 Juin 2010 - 18:37



    Créer un bloc flottant

    Le bloc 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 bloc 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="bloc_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 \\"bloc_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:
    .bloc_flottant
    {
    width: 150px;
    height: 100px;
    }
    Note : Mon bloc 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 bloc 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 overhall_header.

    Pour placer le bloc sur la page, on utilise la position:fixed. Le bloc restera présent à l'écran au même endroit même si le visiteur descend ou remonte sur la page.
    Code:
    .bloc_flottant
    {
    width: 150px;
    height: 100px;
    position:fixed;
    top: 50px;
    right: 10px;
    }
    Note : "top" signifie que j'ai placé mon bloc à 50 pixels du haut de ma page (entre le bloc et le haut de page il y aura 50px de marge). "right" signifie que j'ai placé mon bloc à 10pixels du bord droit de ma page.

    Testez, vous verrez le bloc existe, le bloc flotte, mais le bloc 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.
    Sui'
    Sui'
    MasculinAge : 27Messages : 1865

    le Ven 4 Juin 2010 - 18:47

    Sa peut être utile merci du partage Coriolis.



    Merci beaucoup Woo pour ce kit *-*
    Widget flottant - Bloc flottant sans survol 657955SignatureSuicopie
    Sui' Art's
    Coriolis
    Coriolis
    FémininAge : 29Messages : 288

    le Ven 4 Juin 2010 - 19:04

    S'il y a des questions, posez les moi par mp (car je risque de ne pas surveiller ce sujet), à moins qu'un autre codeur soit en mesure de vous répondre ici ou dans la section 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.
    naruto-seikô
    naruto-seikô
    MasculinAge : 24Messages : 178

    le Ven 4 Juin 2010 - 20:52

    Merci !



    Widget flottant - Bloc flottant sans survol 184950Prince_persia

    Kit By Me
    Slash
    Slash
    MasculinAge : 25Messages : 80

    le Dim 6 Juin 2010 - 18:49

    Merci du partage =)



    Widget flottant - Bloc flottant sans survol Bird10
    Coriolis
    Coriolis
    FémininAge : 29Messages : 288

    le Dim 6 Juin 2010 - 20:38

    Je souhaite vous signaler que cet objet fixe sur votre page peut parfaitement être utiliser pour d'autres choses.
    Pour ma part j'ai fais un "up down" (lien vers le haut et vers le bas de mon forum), vous pourriez proposer des annonces, votre staff, vos crédits.. Bref, j'ai donné une base, à vous d'améliorer selon vos idées.



    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.
    Lilith0601
    Lilith0601
    FémininAge : 29Messages : 16

    le Lun 7 Juin 2010 - 11:48

    jvais tester merci =D
    Elimona
    Elimona
    FémininAge : 23Messages : 892

    le Mar 8 Juin 2010 - 18:50

    Merci ! =)
    Valar Morghulis
    Valar Morghulis
    MasculinAge : 24Messages : 872

    le Mer 9 Juin 2010 - 21:23

    Super intéressant, merci =D



    Widget flottant - Bloc flottant sans survol 962239linknever
    avatar
    fascicularia
    MasculinAge : 51Messages : 187

    le Ven 11 Juin 2010 - 8:03

    Intéressant comme tuto. J'aurai juste une petie question :
    Est il possible de rendre invisible ce widget et de l'activer avec un clic droit.?
    Coriolis
    Coriolis
    FémininAge : 29Messages : 288

    le Ven 11 Juin 2010 - 20:56

    Tu remarqueras que c'est juste du bidouillage html et de l'ajout de css pour le côté esthétique... Je suis une quiche dans tous les autres langages, alors, ça doit être possible pour quelqu'un qui s'en sort en php,java ou autre.
    Si tu trouves la solution, n'hésite pas à partager !



    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.
    D3NZL
    D3NZL
    Age : 25Messages : 62

    le Dim 13 Juin 2010 - 15:36

    Merci pour le tuto Very Happy
    L0ok
    L0ok
    FémininAge : 23Messages : 31

    le Dim 13 Juin 2010 - 19:29

      Meerci du tuto Very Happy
      Ca va me servir Very Happy



    Widget flottant - Bloc flottant sans survol 040037444bb7c3380566d
    Yujoba
    Yujoba
    MasculinAge : 24Messages : 1576

    le Mer 16 Juin 2010 - 18:19

    Merci du partage.



    Widget flottant - Bloc flottant sans survol Yujoba10

    Sign by Yosumi
    bmbslave4u
    bmbslave4u
    MasculinAge : 39Messages : 9

    le Ven 18 Juin 2010 - 18:52

    Merci pour le tuto!
    Sparda
    Sparda
    MasculinAge : 26Messages : 3

    le Sam 19 Juin 2010 - 22:47

    Merci Widget flottant - Bloc flottant sans survol Icon_cool
    Ichii
    Ichii
    MasculinAge : 25Messages : 12

    le Mer 30 Juin 2010 - 0:55

    Merci d'avance...
    Shin'/Smoke
    Shin'/Smoke
    FémininAge : 26Messages : 276

    le Mer 30 Juin 2010 - 9:35

    Merci pour le partage =D




    Widget flottant - Bloc flottant sans survol 091001094109104576
    ~ Kit par Opium :3
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 27Messages : 76

    le Mer 30 Juin 2010 - 11:34

    Merci bien!



    Widget flottant - Bloc flottant sans survol Bannol1xj5
    Beenia
    Beenia
    FémininAge : 27Messages : 2

    le Sam 3 Juil 2010 - 10:55

    Merci =)
    Tina
    Tina
    FémininAge : 34Messages : 70

    le Lun 19 Juil 2010 - 22:24

    Merci pour le code Wink



      Widget flottant - Bloc flottant sans survol 84 Widget flottant - Bloc flottant sans survol AIZENIC02 Widget flottant - Bloc flottant sans survol 77 Widget flottant - Bloc flottant sans survol AIZENIC03
      Soi Fong & Aizen Sosuke fan :3
    GogoZ
    GogoZ
    MasculinAge : 23Messages : 236

    le Ven 23 Juil 2010 - 20:28

    Merci =D !



    " l'expérience, c'est le nom que chacun donne à ses erreurs. "
    Widget flottant - Bloc flottant sans survol Signat10
    MY LIFE IS PURE
    Liven
    Liven
    MasculinAge : 24Messages : 1099

    le Dim 25 Juil 2010 - 18:49

    Merci du partage !




    Widget flottant - Bloc flottant sans survol Sign10

    ‡ Le Retour ‡ :2124:
    Kyoraku Shunsui
    Kyoraku Shunsui
    MasculinAge : 25Messages : 864

    le Jeu 29 Juil 2010 - 22:04

    j'espère que je vais réussir le tuto, en tout cas, merci de le fournir xD.
    XXB
    XXB
    MasculinAge : 25Messages : 34

    le Jeu 29 Juil 2010 - 22:56

    Très utile , merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 20 Juin 2019 - 9:20