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.
    avatar
    Hop80
    MasculinAge : 29Messages : 138

    le Dim 31 Juil 2016 - 17:31

    Merci, je veux bien voir
    Ryukaï
    Ryukaï
    MasculinAge : 21Messages : 628

    le Lun 1 Aoû 2016 - 12:29

    Merci :)



    Widget flottant - Bloc flottant sans survol - Page 41 15796010 Widget flottant - Bloc flottant sans survol - Page 41 14749110
    crash_
    crash_
    FémininAge : 24Messages : 50

    le Ven 5 Aoû 2016 - 17:02

    merci pour le code :lovebomb:
    Sachem
    Sachem
    FémininAge : 22Messages : 51

    le Dim 7 Aoû 2016 - 16:22

    Merci c:
    Sachem
    Sachem
    FémininAge : 22Messages : 51

    le Dim 7 Aoû 2016 - 16:28

    Merci beaucoup!
    Lucia-san
    Lucia-san
    FémininAge : 19Messages : 65

    le Ven 12 Aoû 2016 - 11:02

    Merci c: !
    avatar
    céleste callisto
    FémininAge : 27Messages : 55

    le Dim 14 Aoû 2016 - 23:55

    Merci
    missvodkadems
    missvodkadems
    FémininAge : 29Messages : 114

    le Mer 17 Aoû 2016 - 16:32

    merci



    Widget flottant - Bloc flottant sans survol - Page 41 Pub10
    Rinka
    Rinka
    FémininAge : 22Messages : 8

    le Ven 19 Aoû 2016 - 17:39

    merci!
    Anonymous
    Invité

    le Mar 23 Aoû 2016 - 15:43

    Merci du partage !
    Kovu
    Kovu
    FémininAge : 18Messages : 254

    le Mer 24 Aoû 2016 - 21:41

    merci !!



    Widget flottant - Bloc flottant sans survol - Page 41 I_folder_locked_bigWidget flottant - Bloc flottant sans survol - Page 41 Tumblr_ltgz337zP91qm6oc3o1_500Widget flottant - Bloc flottant sans survol - Page 41 I_folder_locked_big
    chocapiix59
    chocapiix59
    FémininAge : 26Messages : 23

    le Ven 26 Aoû 2016 - 19:22

    Merci du partage ;3
    Deveata
    Deveata
    MasculinAge : 23Messages : 23

    le Mar 30 Aoû 2016 - 3:21

    Merci
    Liumi
    Liumi
    MasculinAge : 18Messages : 9

    le Mar 30 Aoû 2016 - 10:39

    Merci !
    Meika
    Meika
    FémininAge : 18Messages : 12

    le Mer 31 Aoû 2016 - 23:41

    merci pour ce code !
    P'tite
    P'tite
    FémininAge : 21Messages : 26

    le Jeu 1 Sep 2016 - 4:17


    Cela me sera utilise, je te remercie ! (:
    dean winchester
    dean winchester
    MasculinAge : 24Messages : 85

    le Sam 3 Sep 2016 - 22:43

    merci
    Malf Claymore
    Malf Claymore
    FémininAge : 24Messages : 125

    le Mar 6 Sep 2016 - 12:10

    Merci
    HazelW
    HazelW
    FémininAge : 26Messages : 51

    le Lun 12 Sep 2016 - 13:55

    Merci !



    Widget flottant - Bloc flottant sans survol - Page 41 Wsld90Widget flottant - Bloc flottant sans survol - Page 41 GryffindorBaseWidget flottant - Bloc flottant sans survol - Page 41 Gryffindor-gryffindor-21480238-100-100
    Lighane
    Lighane
    FémininAge : 23Messages : 41

    le Jeu 15 Sep 2016 - 19:33

    Merci beaucoup w3
    Risa
    Risa
    FémininAge : 30Messages : 242

    le Lun 19 Sep 2016 - 11:17

    Merci !
    deeplies
    deeplies
    FémininAge : 24Messages : 11

    le Jeu 22 Sep 2016 - 17:24

    Merci!
    Soleilou
    Soleilou
    FémininAge : 18Messages : 49

    le Sam 24 Sep 2016 - 13:45

    Merci du partge ! Un widget a son utilité :3
    Meiywa
    Meiywa
    FémininAge : 27Messages : 79

    le Sam 24 Sep 2016 - 20:21

    Super !

    Merci :hug:
    ginl
    ginl
    FémininAge : 31Messages : 65

    le Ven 30 Sep 2016 - 15:32

    merci!
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Juin 2019 - 10:18