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

    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.
    Mawie62
    Mawie62
    FémininAge : 24Messages : 125

    le Lun 2 Mai 2016 - 12:01

    merci beaucoup :)



    Widget flottant - Bloc flottant sans survol - Page 40 Signat10
    Bully
    Bully
    FémininAge : 16Messages : 39

    le Mer 4 Mai 2016 - 15:16

    Merci !
    naah
    naah
    MasculinAge : 25Messages : 80

    le Mer 4 Mai 2016 - 17:42

    Très utile , merci !
    avatar
    Irisia Anderson
    FémininAge : 24Messages : 28

    le Dim 8 Mai 2016 - 20:23

    Merci du partage !
    Knobul
    Knobul
    MasculinAge : 21Messages : 28

    le Mer 11 Mai 2016 - 10:58

    Merci :)
    Heryon
    Heryon
    FémininAge : 24Messages : 23

    le Jeu 12 Mai 2016 - 17:48

    Merci !
    indian summer
    indian summer
    FémininAge : 19Messages : 6

    le Ven 13 Mai 2016 - 15:46

    Merci
    EAVENN
    EAVENN
    FémininAge : 23Messages : 162

    le Jeu 19 Mai 2016 - 20:30

    merci !
    Ariemm
    Ariemm
    FémininAge : 18Messages : 107

    le Sam 21 Mai 2016 - 16:25

    C'est ça que je cherchait! merci beaucoup ^^
    Discorde
    Discorde
    FémininAge : 19Messages : 58

    le Dim 5 Juin 2016 - 15:33

    Thanks :p
    effyi
    effyi
    FémininAge : 24Messages : 41

    le Jeu 9 Juin 2016 - 23:55

    merci mille fois ♥
    Tink ♥
    Tink ♥
    FémininAge : 26Messages : 66

    le Mer 15 Juin 2016 - 19:01

    Merci Coriolis c'est ce que je cherchais !
    Anonymous
    Invité

    le Jeu 23 Juin 2016 - 4:18

    Merci pour ce code, ça peut être super utile.
    Kingdom.
    Kingdom.
    FémininAge : 19Messages : 54

    le Lun 4 Juil 2016 - 21:32

    merchi
    Choucroute Mozzarella
    Choucroute Mozzarella
    FémininAge : 22Messages : 40

    le Dim 10 Juil 2016 - 14:56

    Merci !
    Sideris
    Sideris
    FémininAge : 24Messages : 112

    le Lun 11 Juil 2016 - 19:52

    Merci !









    Sorako
    Sorako
    FémininAge : 21Messages : 94

    le Mer 13 Juil 2016 - 15:40

    Merci =)
    Wolund
    Wolund
    MasculinAge : 21Messages : 53

    le Jeu 14 Juil 2016 - 18:05

    Merci ^-^
    Ausana
    Ausana
    FémininAge : 28Messages : 14

    le Sam 16 Juil 2016 - 12:26

    merci
    Vixinte
    Vixinte
    FémininAge : 21Messages : 90

    le Sam 16 Juil 2016 - 15:38

    Merci pour le partage !
    Lamire
    Lamire
    FémininAge : 25Messages : 96

    le Sam 16 Juil 2016 - 16:31

    Merci pour le tuto~
    Kitket
    Kitket
    FémininAge : 35Messages : 104

    le Ven 22 Juil 2016 - 10:16

    merci
    Furagu
    Furagu
    MasculinAge : 28Messages : 19

    le Mer 27 Juil 2016 - 17:03

    Merci pour le partage
    Nutty
    Nutty
    FémininAge : 21Messages : 17

    le Sam 30 Juil 2016 - 19:33

    Thanks a lot pour le partage blbl!



    Widget flottant - Bloc flottant sans survol - Page 40 Hw0rro
    .Lucifer.
    .Lucifer.
    MasculinAge : 46Messages : 179

    le Sam 30 Juil 2016 - 20:51

    Merci! Wink



    Widget flottant - Bloc flottant sans survol - Page 40 978358Divine
    Contenu sponsorisé


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