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 : 30Messages : 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.
    Jadesse
    Jadesse
    FémininAge : 20Messages : 30

    le Sam 31 Déc 2016 - 22:08

    Merci :heart:
    Liia
    Liia
    FémininAge : 24Messages : 91

    le Ven 6 Jan 2017 - 14:18

    Merci ♥
    1charlotte
    1charlotte
    FémininAge : 18Messages : 196

    le Sam 7 Jan 2017 - 15:56

    Tuto utile, mais on pourrait avoir un aperçu ? **
    mijako
    mijako
    FémininAge : 27Messages : 83

    le Dim 8 Jan 2017 - 1:04

    merci >-<
    Azzuen
    Azzuen
    FémininAge : 21Messages : 61

    le Ven 20 Jan 2017 - 6:17

    Merci!
    Irony
    Irony
    FémininAge : 22Messages : 102

    le Sam 21 Jan 2017 - 13:42

    Merci ! <3
    Nocturne
    Nocturne
    FémininAge : 29Messages : 24

    le Lun 6 Fév 2017 - 11:02

    Merci ! :]
    Maevis
    Maevis
    FémininAge : 18Messages : 27

    le Dim 12 Fév 2017 - 17:13

    Merci pour le code =)
    Lakia
    Lakia
    FémininAge : 21Messages : 114

    le Mer 15 Fév 2017 - 18:06

    Merci !
    Neffaly
    Neffaly
    MasculinAge : 24Messages : 47

    le Mer 22 Fév 2017 - 4:51

    merci
    Zayshin
    Zayshin
    FémininAge : 28Messages : 40

    le Sam 25 Fév 2017 - 4:45

    Un grand merci pour ton code ♥ ^^
    BlueBerry ♪
    BlueBerry ♪
    FémininAge : 22Messages : 138

    le Lun 27 Fév 2017 - 12:21

    merci !



    Widget flottant - Bloc flottant sans survol - Page 43 7310
    Aile de l'Ange
    Aile de l'Ange
    FémininAge : 21Messages : 110

    le Ven 10 Mar 2017 - 15:24

    Merci du partage
    Hybris
    Hybris
    MasculinAge : 32Messages : 308

    le Lun 13 Mar 2017 - 14:58

    merci !
    Calypso Luciano
    Calypso Luciano
    FémininAge : 28Messages : 333

    le Mer 2 Aoû 2017 - 10:56

    Merci ^^
    Nélie Reinart
    Nélie Reinart
    FémininAge : 20Messages : 42

    le Mer 8 Nov 2017 - 22:58

    merci :3
    Mariana Greyson
    Mariana Greyson
    FémininAge : 21Messages : 78

    le Dim 3 Déc 2017 - 16:55

    merci
    Lone wanderer
    Lone wanderer
    MasculinAge : 27Messages : 157

    le Dim 9 Sep 2018 - 13:51

    EXACTEMENT ce que je cherchais, merci beaucoup ! Very Happy
    Kaleidoscope
    Kaleidoscope
    FémininAge : 20Messages : 36

    le Lun 12 Aoû 2019 - 19:00

    Merci beaucoup ! Même si ça n'est plus obligatoire, comme c'est bien utile, je tenais à te remercier par un petit post. :)



    Widget flottant - Bloc flottant sans survol - Page 43 553970miku1
    Contenu sponsorisé


      La date/heure actuelle est Sam 7 Déc 2019 - 8:12