AccueilDernières imagesRechercherS'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 :
Manga Chainsaw Man : où acheter le Tome 17 ...
Voir le deal
19.99 €

    Widget flottant - Bloc flottant sans survol

    Coriolis
    Coriolis
    FémininAge : 34Messages : 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.
    Shadow Reyson
    Shadow Reyson
    MasculinAge : 27Messages : 11

    Sam 11 Fév 2012 - 14:05

    Ca peut être très pratique ça
    objectif photo
    objectif photo
    MasculinAge : 43Messages : 54

    Mar 14 Fév 2012 - 19:24

    merci



    http://objectif-photo.forumgratuit.org/
    Elricka
    Elricka
    MasculinAge : 33Messages : 77

    Mar 14 Fév 2012 - 22:27

    Merci du partage.
    killer999
    killer999
    MasculinAge : 33Messages : 116

    Ven 17 Fév 2012 - 13:23

    Thanks!
    yukiyuki
    yukiyuki
    FémininAge : 29Messages : 89

    Ven 17 Fév 2012 - 20:15

    c'est un code que je cherche depuis longtemps, merci du partage x)
    Davy
    Davy
    MasculinAge : 27Messages : 25

    Ven 17 Fév 2012 - 20:55

    Veux voir

    Sophia
    Sophia
    FémininAge : 29Messages : 44

    Sam 18 Fév 2012 - 16:11

    Un tuto super utile =D
    Merci !
    Rutile
    Rutile
    FémininAge : 28Messages : 17

    Sam 18 Fév 2012 - 17:24

    Je veux bien moi aussi, please. :)
    phinolex
    phinolex
    MasculinAge : 24Messages : 63

    Sam 18 Fév 2012 - 19:25

    wesh , merci x]
    Jimmy
    Jimmy
    MasculinAge : 28Messages : 166

    Dim 19 Fév 2012 - 12:07

    WESH !!
    Strawberry-Swan
    Strawberry-Swan
    FémininAge : 32Messages : 195

    Dim 19 Fév 2012 - 12:37

    Je veux bien voir ce que c'est, merci du partage !



      Strawberry-Swan
      Strawberry-Swan
      FémininAge : 32Messages : 195

      Dim 19 Fév 2012 - 12:50

      Ah, ça ne marche pas de mon côté. Tout reste sur la PA. :s



        Kal57
        Kal57
        MasculinAge : 36Messages : 292

        Lun 20 Fév 2012 - 1:28

        Merci.



        Widget flottant - Bloc flottant sans survol - Page 12 Signat15
        fafa
        fafa
        MasculinAge : 33Messages : 34

        Lun 20 Fév 2012 - 16:13

        merci
        Light_kick
        Light_kick
        MasculinAge : 25Messages : 4

        Lun 20 Fév 2012 - 17:09

        Merci du partage :)
        Aly
        Aly
        FémininAge : 26Messages : 22

        Mar 21 Fév 2012 - 17:57

        Merci pour le tuto !



        Widget flottant - Bloc flottant sans survol - Page 12 Aly2_b10
        Pourquoi se contenter de survivre ?
        Moi j'ai préféré vivre...
        Anonymous
        Invité

        Mar 21 Fév 2012 - 18:42

        Merci d'avance ^^
        Wrung Jah
        Wrung Jah
        MasculinAge : 30Messages : 59

        Mar 28 Fév 2012 - 10:46

        Merci
        Anonymous
        Invité

        Mer 29 Fév 2012 - 18:41

        Merci
        Okoia
        Okoia
        FémininAge : 30Messages : 30

        Jeu 1 Mar 2012 - 1:05

        Merci beaucoup ^^
        Riû-hi
        Riû-hi
        MasculinAge : 23Messages : 5

        Jeu 1 Mar 2012 - 13:57

        Merci du partage.
        Kawel
        Kawel
        MasculinAge : 30Messages : 203

        Jeu 1 Mar 2012 - 16:13

        Merci cest ce que je cherchais =)



        Widget flottant - Bloc flottant sans survol - Page 12 Dream10
        Newlon
        Newlon
        FémininAge : 28Messages : 25

        Ven 2 Mar 2012 - 16:28

        Merci !



        Widget flottant - Bloc flottant sans survol - Page 12 Tumblr_lvf6h4LdCV1qm6oc3o1_500
        Lightmare
        Lightmare
        MasculinAge : 31Messages : 5

        Dim 4 Mar 2012 - 21:18

        Merci pour le partage :)
        Anonymous
        Invité

        Lun 5 Mar 2012 - 19:07

        thx for sharing !
        Contenu sponsorisé


          La date/heure actuelle est Ven 29 Mar 2024 - 1:37