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 : -62%
DODO Oreiller Grand luxe Quallofil Allerban ...
Voir le deal
14.99 €

    Widget flottant - Bloc flottant sans survol

    Coriolis
    Coriolis
    FémininAge : 31Messages : 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.
    Kyoraku Shunsui
    Kyoraku Shunsui
    MasculinAge : 27Messages : 864

    Ven 30 Juil 2010 - 11:40

    j'arrive pas à le faire marcher --'
    Kyoraku Shunsui
    Kyoraku Shunsui
    MasculinAge : 27Messages : 864

    Mar 3 Aoû 2010 - 12:31

    C'est bon, il fallait juste le mettre en bas du message sur la page d'accueil, voici le résultat :
    http://onepiece-rpg.pro-forum.fr/forum.htm
    T0M!
    T0M!
    MasculinAge : 25Messages : 373

    Jeu 5 Aoû 2010 - 19:09

    Merci d'avance j'ai hâte de savoir.
    Bang
    Bang
    MasculinAge : 25Messages : 2434

    Jeu 5 Aoû 2010 - 21:19

    Merci du partage, depuis le temps que je cherchais à en faire ^^






    OHANA
    Grunt
    Grunt
    MasculinAge : 27Messages : 62

    Ven 6 Aoû 2010 - 11:58

    Merci du Partage =D
    Minimoy28
    Minimoy28
    MasculinAge : 27Messages : 59

    Jeu 12 Aoû 2010 - 22:00

    Franchement, j'adore ce principe.
    J'ai longtemps cherché ^^

    merci beaucoup
    Shiryuu
    Shiryuu
    MasculinAge : 25Messages : 105

    Ven 13 Aoû 2010 - 21:58

    Merci bien





    [img][/img]

    Neko-Girl
    Neko-Girl
    FémininAge : 27Messages : 6

    Lun 16 Aoû 2010 - 19:46

    Un tuto qui peu donner un rendu simpa.
    Merci du partage ^^
    gohan59750
    gohan59750
    MasculinAge : 27Messages : 148

    Mer 18 Aoû 2010 - 15:06

    Merci =)
    Given
    Given
    MasculinAge : 28Messages : 156

    Ven 20 Aoû 2010 - 18:19

    Merci
    noussa
    noussa
    FémininAge : 27Messages : 49

    Ven 20 Aoû 2010 - 22:49

    Merci!!
    Kuro'
    Kuro'
    MasculinAge : 26Messages : 438

    Lun 23 Aoû 2010 - 18:03

    Thanks =3




    Widget flottant - Bloc flottant sans survol - Page 2 Raichu_loupay-3edc2d8276
    Merci Didi-senpai ! :)
    Yekais
    Yekais
    MasculinAge : 29Messages : 61

    Dim 29 Aoû 2010 - 0:47

    Merci du partage ^^



    Widget flottant - Bloc flottant sans survol - Page 2 628543sign
    K@no
    K@no
    MasculinAge : 30Messages : 43

    Dim 29 Aoû 2010 - 10:23

    Parfait merci. =)



    Widget flottant - Bloc flottant sans survol - Page 2 00creatioonbaattleh
    La décadence fait partie de ma vie.
    Kita
    Kita
    MasculinAge : 28Messages : 57

    Dim 19 Sep 2010 - 13:45

    Merci merci !!!
    Miyashi
    Miyashi
    MasculinAge : 35Messages : 750

    Dim 19 Sep 2010 - 16:40

    Merci du partage



    Widget flottant - Bloc flottant sans survol - Page 2 Sans_t11
    avatar
    bossy
    MasculinAge : 26Messages : 118

    Dim 24 Oct 2010 - 13:10

    merci



    Widget flottant - Bloc flottant sans survol - Page 2 Natsu_10
    Hiruma Yoichi
    Hiruma Yoichi
    MasculinAge : 23Messages : 110

    Dim 24 Oct 2010 - 14:14

    Merci
    Anonymous
    Invité

    Dim 24 Oct 2010 - 14:42

    Je cherche ce truc depuis un loonnnng moment ><
    Grif
    Grif
    MasculinAge : 27Messages : 37

    Jeu 11 Nov 2010 - 9:51

    Merci
    Daft Kakashi
    Daft Kakashi
    MasculinAge : 28Messages : 1628

    Jeu 11 Nov 2010 - 20:57

    Thank's You! :face:



    Widget flottant - Bloc flottant sans survol - Page 2 Frankysignecopie
    Widget flottant - Bloc flottant sans survol - Page 2 4aa8c91ab2e59logo
    Yuu
    Yuu
    FémininAge : 31Messages : 9

    Jeu 11 Nov 2010 - 22:01

    Merci beaucoup pour ce partage.
    Porata
    Porata
    MasculinAge : 24Messages : 8

    Dim 21 Nov 2010 - 19:57

    Merci pour le tutoriel ^^
    âme
    âme
    FémininAge : 55Messages : 154

    Mar 30 Nov 2010 - 12:56

    Bonjour Coriolis,
    Merci pour ce code qui me sera très utile !
    Bonne journée :)



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    âme
    âme
    FémininAge : 55Messages : 154

    Mar 30 Nov 2010 - 19:31

    Je me permet de revenir sur le post car j'ai un souçis...
    Ce code est parfait sous Google Chrome, le seul navigateur dont je me sert mais afin de vérifier si le rendu était le même sur d'autres navigateurs et bien seul IE laisse apparaître le widget alors que Mozilla et Opéra ne donne absolument rien, comme si le widget n'avait jamais été placé.
    Est-ce normal ?
    Normalement, un codage reste un codage et doit donc être compatible à tous navigateurs non ?
    En tout cas, je suis très heureuse du résultat sur Google Chrome (widget en bas de forum à droite) mais si je pouvais avoir une solution pour les autres navigateurs.... Merci :))
    Spoiler:
    http://www.color-avenue.net/forum.htm
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Juin 2021 - 2:21