AccueilRechercherS'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 : 31Messages : 288

    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.
    Wizzard
    Wizzard
    MasculinAge : 22Messages : 5

    Ven 30 Sep 2016 - 20:40

    Merci pour ce tutoriel !
    Nerria
    Nerria
    FémininAge : 23Messages : 44

    Ven 30 Sep 2016 - 21:43

    Pile ce que je cherchais, merci !
    Nightbird
    Nightbird
    MasculinAge : 29Messages : 81

    Ven 30 Sep 2016 - 23:42

    Merci beaucoup !
    Edward Speleers
    Edward Speleers
    MasculinAge : 32Messages : 460

    Jeu 13 Oct 2016 - 14:07

    Franchement top, merci



    Widget flottant - Bloc flottant sans survol - Page 42 Edkidd11
    Dacina moe
    Dacina moe
    FémininAge : 42Messages : 171

    Jeu 13 Oct 2016 - 16:39

    Merci <3 j'en cherchais un Razz
    Hyuna
    Hyuna
    FémininAge : 23Messages : 98

    Sam 15 Oct 2016 - 17:04

    Merci beaucoup!
    Wolf Valley
    Wolf Valley
    FémininAge : 20Messages : 71

    Sam 15 Oct 2016 - 18:46

    Merci
    Vixen.
    Vixen.
    FémininAge : 22Messages : 11

    Sam 15 Oct 2016 - 18:50

    Merci
    Wolf Valley
    Wolf Valley
    FémininAge : 20Messages : 71

    Sam 15 Oct 2016 - 20:44

    Merci
    Kanra
    Kanra
    FémininAge : 20Messages : 113

    Mar 18 Oct 2016 - 13:14

    merci !
    FROSTendoloris
    FROSTendoloris
    FémininAge : 27Messages : 190

    Jeu 20 Oct 2016 - 20:11

    merci !



    Widget flottant - Bloc flottant sans survol - Page 42 3oov
    Likau
    Likau
    MasculinAge : 26Messages : 353

    Sam 22 Oct 2016 - 11:57

    Exactement ce que je recherchais, merci beaucoup ! Cookie ? Very Happy
    Jane Bingum
    Jane Bingum
    FémininAge : 22Messages : 83

    Dim 23 Oct 2016 - 22:31

    Merci!
    îra
    îra
    FémininAge : 24Messages : 2

    Lun 7 Nov 2016 - 1:07

    Merci !
    Lovelymp
    Lovelymp
    FémininAge : 41Messages : 60

    Mar 8 Nov 2016 - 14:47

    sa m’intéresse ^^ merci
    Nekrofyre
    Nekrofyre
    MasculinAge : 21Messages : 33

    Mar 8 Nov 2016 - 23:21

    Nice !
    Froufy
    Froufy
    FémininAge : 20Messages : 59

    Dim 20 Nov 2016 - 11:54

    Merci^^



    1+1= 4
          2
    3
    Eime
    Eime
    FémininAge : 24Messages : 15

    Mar 22 Nov 2016 - 16:35

    Je regarde, merci du partage !
    Lyxiae
    Lyxiae
    FémininAge : 27Messages : 44

    Dim 11 Déc 2016 - 11:25

    Merci !
    wiise
    wiise
    FémininAge : 27Messages : 50

    Sam 17 Déc 2016 - 19:14

    Merci beaucoup !



    Widget flottant - Bloc flottant sans survol - Page 42 140051NUban
    QuickLittleBastard
    QuickLittleBastard
    MasculinAge : 27Messages : 10

    Dim 18 Déc 2016 - 4:17

    Merci!!
    Hawk Lowell
    Hawk Lowell
    FémininAge : 24Messages : 134

    Mer 21 Déc 2016 - 19:07

    Merci
    Inwë
    Inwë
    FémininAge : 22Messages : 36

    Mar 27 Déc 2016 - 14:56

    merci !
    double-face
    double-face
    FémininAge : 31Messages : 18

    Mar 27 Déc 2016 - 22:43

    merci =)
    Opaline
    Opaline
    FémininAge : 21Messages : 86

    Mer 28 Déc 2016 - 22:16

    Merci !



    Widget flottant - Bloc flottant sans survol - Page 42 140502022634448028
    Contenu sponsorisé


      La date/heure actuelle est Sam 6 Mar 2021 - 12:50