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.

Le Deal du moment : -37%
Ecran PC Gamer Incurvé – ACER – ...
Voir le deal
179.99 €

    Widget flottant - Bloc flottant sans survol

    Coriolis
    Coriolis
    FémininAge : 32Messages : 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.
    Elorri
    Elorri
    FémininAge : 31Messages : 13

    Jeu 4 Avr 2013 - 19:30

    Merciii
    Noob's
    Noob's
    MasculinAge : 27Messages : 129

    Jeu 4 Avr 2013 - 20:40

    Merci, Thanks, Dankechun x) la dernier est surement mal écrite
    Cytrius
    Cytrius
    FémininAge : 21Messages : 233

    Ven 5 Avr 2013 - 14:17

    Merci
    Shangwi'
    Shangwi'
    FémininAge : 22Messages : 31

    Ven 5 Avr 2013 - 18:48

    Je suis curieuse de voir ça !



    Widget flottant - Bloc flottant sans survol - Page 22 130330112046640194
    miss69
    miss69
    FémininAge : 38Messages : 40

    Dim 7 Avr 2013 - 20:57

    Bonjour,

    Je vous remercie pour ce tuto.
    Toupimero
    Toupimero
    FémininAge : 61Messages : 56

    Dim 7 Avr 2013 - 21:21

    micii
    Jézabel
    Jézabel
    FémininAge : 36Messages : 42

    Lun 8 Avr 2013 - 15:24

    Merci =)

    Ça peut en effet être bien utile.



    Widget flottant - Bloc flottant sans survol - Page 22 Sign_j10
    Fallaha
    Fallaha
    FémininMessages : 80

    Mar 9 Avr 2013 - 3:57

    merci pour le partage Very Happy
    Lilie
    Lilie
    FémininAge : 38Messages : 190

    Mar 9 Avr 2013 - 12:27

    Merci :)
    Sunshine.
    Sunshine.
    FémininAge : 24Messages : 18

    Mar 9 Avr 2013 - 22:13

    merci :)
    Cola
    Cola
    FémininAge : 22Messages : 81

    Ven 12 Avr 2013 - 22:09

    Merci



    Widget flottant - Bloc flottant sans survol - Page 22 Signa_11
    Miyun
    Miyun
    FémininAge : 23Messages : 34

    Sam 13 Avr 2013 - 0:37

    Je vais tester, merci :)



    Widget flottant - Bloc flottant sans survol - Page 22 907096miu
    Nightbird83
    Nightbird83
    MasculinAge : 30Messages : 22

    Dim 14 Avr 2013 - 0:02

    Merci !
    Dellou
    Dellou
    FémininAge : 23Messages : 57

    Dim 14 Avr 2013 - 1:20

    Merci :3
    Nordri
    Nordri
    MasculinAge : 29Messages : 1

    Dim 14 Avr 2013 - 23:14

    Merci!
    Grande
    Grande
    FémininAge : 34Messages : 207

    Dim 14 Avr 2013 - 23:27

    Merci



    Widget flottant - Bloc flottant sans survol - Page 22 171074gwenj10
    Bloody Dreams
    Bloody Dreams
    MasculinAge : 26Messages : 25

    Mer 17 Avr 2013 - 13:20

    Merci tout pleins ♥
    Dellou
    Dellou
    FémininAge : 23Messages : 57

    Mer 17 Avr 2013 - 22:30

    Merci o/
    kitel
    kitel
    MasculinAge : 26Messages : 42

    Dim 21 Avr 2013 - 10:10

    Merci!!!
    Kiowa
    Kiowa
    FémininAge : 33Messages : 220

    Dim 21 Avr 2013 - 14:51

    merci
    Onigiri2a
    Onigiri2a
    FémininAge : 31Messages : 46

    Mar 23 Avr 2013 - 1:12

    Utile pour mettre ce que l'on veux dedans ! :)
    Merci ! :love:



    Dream Land School
    Dream Land School
    FémininAge : 33Messages : 93

    Mar 23 Avr 2013 - 12:22

    merci ^^
    mazonzon
    mazonzon
    FémininAge : 22Messages : 54

    Mar 23 Avr 2013 - 12:40

    C'est super ! Merci !
    Anonymous
    Invité

    Mer 1 Mai 2013 - 15:18

    Arigato, c'est pile ce que je recherchais :33
    Tortue
    Tortue
    MasculinAge : 24Messages : 33

    Sam 4 Mai 2013 - 17:28

    Et bien merci, même si nous n'avons pas le résultat avant...
    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Jan 2022 - 9:46