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

    Partagez
    avatar
    Coriolis
    FémininAge : 27Messages : 288

    le Ven 4 Juin 2010 - 18:37

    Rappel du premier message :



    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.
    avatar
    Eshon
    FémininAge : 36Messages : 191

    le Mar 23 Fév 2016 - 14:06

    Merci !
    avatar
    KTMiz
    MasculinAge : 18Messages : 47

    le Mer 24 Fév 2016 - 0:15

    merci



    avatar
    o.dream
    FémininAge : 29Messages : 11

    le Mer 24 Fév 2016 - 12:20

    Merci beaucoup !
    avatar
    EmYasmina
    FémininAge : 17Messages : 73

    le Sam 27 Fév 2016 - 0:16

    Chup, merci ! Very Happy
    avatar
    LOUVE ☽
    FémininAge : 27Messages : 53

    le Dim 28 Fév 2016 - 9:54

    merci, c'est très utile
    avatar
    Choubakawa
    MasculinAge : 23Messages : 77

    le Dim 28 Fév 2016 - 15:45

    Merci ! :)



    avatar
    Vintage Phonic
    FémininAge : 27Messages : 19

    le Lun 29 Fév 2016 - 16:32

    Merci à toi Wink
    avatar
    Waize
    FémininAge : 19Messages : 34

    le Lun 29 Fév 2016 - 21:18

    Merci Very Happy
    avatar
    Magico
    MasculinAge : 24Messages : 41

    le Ven 4 Mar 2016 - 20:47

    merci
    avatar
    Smikyou
    FémininAge : 23Messages : 85

    le Jeu 10 Mar 2016 - 10:24

    ty
    avatar
    MLD
    FémininAge : 24Messages : 84

    le Ven 18 Mar 2016 - 9:35

    Merci du partage !
    avatar
    fraumali
    FémininAge : 37Messages : 114

    le Lun 21 Mar 2016 - 9:10

    Bonjour et merci de ce partage.
    Depuis que je cherche cela lol
    avatar
    .pinkrocks
    FémininAge : 26Messages : 41

    le Ven 25 Mar 2016 - 23:59

    Super! Merci beaucoup pour le partage. :love:
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 147

    le Sam 26 Mar 2016 - 2:30

    Merci
    avatar
    MARLEY SMITH.
    FémininAge : 23Messages : 152

    le Dim 27 Mar 2016 - 11:18

    Merci pour ce tutoriel :love:
    avatar
    Liia
    FémininAge : 21Messages : 91

    le Mar 29 Mar 2016 - 16:22

    Merci o/
    avatar
    CHi1565456
    MasculinAge : 17Messages : 56

    le Ven 1 Avr 2016 - 19:42

    Merci !
    avatar
    Zelena
    FémininAge : 29Messages : 54

    le Dim 3 Avr 2016 - 19:43

    Merci!
    avatar
    Madness of Wonderland
    FémininAge : 17Messages : 58

    le Dim 3 Avr 2016 - 21:36

    merci !
    avatar
    blomkvist
    FémininAge : 26Messages : 44

    le Dim 3 Avr 2016 - 22:21

    merci du partage cheers :pompom:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    avatar
    Camomille
    FémininAge : 17Messages : 48

    le Mar 5 Avr 2016 - 19:53

    Pressée de lire ! Un gentil merci de ma part !
    avatar
    .lovely
    FémininAge : 20Messages : 54

    le Jeu 7 Avr 2016 - 23:55

    merci !
    avatar
    Kai Parker
    FémininAge : 19Messages : 154

    le Lun 25 Avr 2016 - 15:13

    Merci du partage :joie:

    avatar
    Harmonia
    FémininAge : 19Messages : 109

    le Dim 1 Mai 2016 - 6:53

    Merci du partage =)
    avatar
    Rynkka
    FémininAge : 18Messages : 119

    le Dim 1 Mai 2016 - 12:58

    Merci



    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Juil 2017 - 2:43