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.
    ~Li Mei
    ~Li Mei
    FémininAge : 28Messages : 21

    le Mer 6 Juil 2011 - 5:48

    Merci pour ce tutoriel !
    Ca fait un petit moment que je cherche comment faire ^__^
    Coralia
    Coralia
    FémininAge : 19Messages : 64

    le Mer 6 Juil 2011 - 13:58

    Merci !
    Vengryn
    Vengryn
    MasculinAge : 28Messages : 130

    le Mar 12 Juil 2011 - 17:20

    Merci du partage Wink
    Magiquest
    Magiquest
    MasculinAge : 23Messages : 224

    le Jeu 14 Juil 2011 - 15:38

    Poster :S



    Faut jamais dire que les autres sont des crétins car t'en un petit crétin, parce que tu lis ce message crétin O.o !
    Widget flottant - Bloc flottant sans survol - Page 6 Signature12
    Leam
    Leam
    FémininAge : 35Messages : 54

    le Sam 16 Juil 2011 - 19:27

    merci pour le tuto
    Saisyu Shirai
    Saisyu Shirai
    MasculinAge : 30Messages : 36

    le Mer 20 Juil 2011 - 19:56

    merci ^^
    monlucifer
    monlucifer
    FémininAge : 25Messages : 20

    le Jeu 21 Juil 2011 - 13:26

    Moi qui cherche ce tuto depuis au moins une heure, tu me sauves la vie ! cheers
    Piinkyuu
    Piinkyuu
    FémininAge : 24Messages : 27

    le Lun 25 Juil 2011 - 23:26

    Merci !
    Card ♥
    Card ♥
    FémininAge : 21Messages : 24

    le Mar 26 Juil 2011 - 12:52

    Merci pour ce code ! :3



    Widget flottant - Bloc flottant sans survol - Page 6 Card10
    Ectra
    Ectra
    MasculinAge : 27Messages : 29

    le Mer 27 Juil 2011 - 14:29

    Merci du tuto, ca va être très utile... =)
    Éternité
    Éternité
    FémininAge : 24Messages : 43

    le Jeu 28 Juil 2011 - 19:54

    Here we goooo!

    Merci :3
    Amera
    Amera
    FémininAge : 26Messages : 67

    le Sam 30 Juil 2011 - 19:33

    Merci !



    Widget flottant - Bloc flottant sans survol - Page 6 734690sign1
    br4nd0n
    br4nd0n
    Age : 25Messages : 50

    le Mar 2 Aoû 2011 - 5:36

    Code utile Very Happy



    Widget flottant - Bloc flottant sans survol - Page 6 Pourbrandonob6
    Kit by Adil94
    harmony Lightnight
    harmony Lightnight
    FémininAge : 23Messages : 30

    le Ven 5 Aoû 2011 - 17:09

    Merci beaucoup du partage *w*
    xElise
    xElise
    FémininAge : 23Messages : 10

    le Sam 6 Aoû 2011 - 22:53

    Merci du tuto :)
    avatar
    Baal
    MasculinAge : 30Messages : 57

    le Lun 8 Aoû 2011 - 16:56

    A tenter, merci Very Happy
    Kaendar
    Kaendar
    MasculinAge : 27Messages : 5

    le Lun 8 Aoû 2011 - 18:05

    Merci du partage x)
    avatar
    Pupuce17
    FémininAge : 22Messages : 28

    le Mar 9 Aoû 2011 - 11:01

    cela m’intéresse Wink merci



    Panda panda panda !! : P I love Panda x)
    Ziktaon
    Ziktaon
    MasculinAge : 26Messages : 843

    le Mer 10 Aoû 2011 - 1:37

    Merci du partage même si je l'avais déjà découvert mdr



    Widget flottant - Bloc flottant sans survol - Page 6 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Nell
    Nell
    FémininAge : 25Messages : 22

    le Mer 10 Aoû 2011 - 3:17

    Merci pour le partage !
    avatar
    Baal
    MasculinAge : 30Messages : 57

    le Mer 10 Aoû 2011 - 7:09

    Bonjour, et bien merci.
    Lula
    Lula
    FémininAge : 28Messages : 67

    le Mer 10 Aoû 2011 - 18:25

    pas mal ! :)
    Lunarfang Einzbern
    Lunarfang Einzbern
    MasculinAge : 26Messages : 30

    le Jeu 11 Aoû 2011 - 16:24

    I want to see and I thank u o/
    Doo
    Doo
    FémininAge : 28Messages : 42

    le Ven 12 Aoû 2011 - 14:05

      Merci Coriolis !
    Rizzoliandisles
    Rizzoliandisles
    FémininAge : 28Messages : 18

    le Ven 12 Aoû 2011 - 18:38

    Merci Wink
    Contenu sponsorisé


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