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.


    Bandeau de navigation vertical

    A-Lice
    A-Lice
    FémininAge : 25Messages : 4939

    le Jeu 31 Juil 2014 - 14:45

    Rappel du premier message :




    Bandeau de navigation vertical


    Suite à une demande de Narakye voici un bandeau de navigation vertical collé sur la droite.

    Je précise que l'arrière plan rose et jaune correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www


    Et le code :
    HTML :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes|Indie+Flower|Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css' />
    <div class="bandeau_fond"><span class="bandeau_titre" style="margin-top:30px; font-family: 'Great Vibes', cursive; font-size:30px">Bienvenue</span>
    <div class="bandeau_image1"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt="" /></div>
    <span class="bandeau_titre">Liens utiles</span>
    <div class="bandeau_lien"><div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
    <div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
    <div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
    </div>
    <span class="bandeau_titre">Les news</span>
    <div class="bandeau_news">blablabla
    blablablabla
    </div>
    <span class="bandeau_titre">Interphone</span>
    <div class="bandeau_interphone1"><marquee direction="up" scrollamount="2" onMouseOver="this.stop();" onMouseOut="this.start();"><span class="bandeau_interphone2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lectus ultricies nisl vulputate molestie a sed lorem. Nullam consequat pulvinar quam, vel semper orci blandit quis. In id eros massa. Duis eget gravida mi. Aenean pellentesque, purus eget suscipit bibendum, justo lorem fermentum leo.</span></marquee></div>
    <span class="bandeau_titre">Nos héros</span>
    <div class="bandeau_image2" style="margin-left:30px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><div class="bandeau_image2" style="margin-left:5px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><br />
    <a href="http://www.never-utopia.com/" class="ALice_credit">© By A-Lice</a>
    </div>

    Il faut placer ce dernier dans le template index-body, sur la deuxième ligne juste après ceci :
    Code:
    {JAVASCRIPT}

    CSS :
    Code:
    .bandeau_fond {
    width:175px;
    padding:5px;
    position:fixed;
    background-image:url(http://imagesup.org/images12/1406735258-bordure.png);
    height:100%;
    right:0px;
    top:0px;
    z-index:100;
    }

    .bandeau_titre {
    font-size:20px;
    color:white;
    display:block;
    text-indent:45px;
    margin-top:10px;
    font-family: 'Love Ya Like A Sister', cursive;
    }

    .bandeau_image1 {
    width:135px;
    height:92px;
    margin-left:30px;
    overflow:hidden;
    }

    .bandeau_lien {
    width:135px;
    padding:5px;
    height:11%;
    overflow:hidden;
    margin-left:25px;
    font-family: 'Indie Flower', cursive;
    }

    .bandeau_lien_zoom {
    font-size:12px;
    opacity:0.8;
    text-align:center;
    }

    .bandeau_lien_zoom:hover {
    font-size:14px;
    opacity:1;
    text-align:center;
    }

    .bandeau_news {
    background-color:white;
    width:125px;
    padding:5px;
    height:15%;
    margin-left:30px;
    font-size:12px;
    color:black;
    text-align:justify;
    overflow:auto;
    border-radius:15px;
    font-family: 'Indie Flower', cursive;
    }

    .bandeau_interphone1 {
    width:135px;
    padding:5px;
    height:7%;
    overflow:hidden;
    margin-left:25px;
    }

    .bandeau_interphone2 {
    text-align:justify;
    font-size:12px;
    color:black;
    display:block;
    font-family: 'Indie Flower', cursive;
    }

    .bandeau_image2 {
    display:inline-block;
    width:68px;
    height:67px;
    border-radius:100px;
    overflow:hidden;
    margin-top:5px;
    }

    a.ALice_credit {
    font-size:12px;
    text-decoration:none;
    display:block;
    text-align:center;
    color:white;
    margin-top:5px;
    }


    /!\ En cas de problème, c'est ici que ça ce passe.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par A-Lice le Lun 16 Fév 2015 - 11:03, édité 1 fois

    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 22Messages : 83

    le Sam 8 Nov 2014 - 11:21

    Merci beaucoup :)
    .SaKou.
    .SaKou.
    FémininAge : 23Messages : 57

    le Sam 8 Nov 2014 - 18:43

    Merci



    Bandeau de navigation vertical - Page 3 1351184429-smile
    Spike
    Spike
    MasculinAge : 24Messages : 64

    le Sam 15 Nov 2014 - 23:21

    Merci beaucoup !
    avatar
    Njut
    FémininAge : 19Messages : 43

    le Dim 16 Nov 2014 - 13:41

    Merci !
    SEVAN
    SEVAN
    FémininAge : 27Messages : 46

    le Lun 17 Nov 2014 - 0:09

    merci
    Clémentine
    Clémentine
    FémininAge : 27Messages : 223

    le Mer 19 Nov 2014 - 17:56

    Merciiii ^^



    Bandeau de navigation vertical - Page 3 9w9t
    Harleen Quinzel
    Harleen Quinzel
    FémininAge : 23Messages : 65

    le Sam 22 Nov 2014 - 12:04

    Bien envie de voir ce que ça donnerait sur mon bébé forum, merci beaucoup A-Lice !
    Toupimero
    Toupimero
    FémininAge : 58Messages : 56

    le Dim 23 Nov 2014 - 2:19

    Je vais tenter ce tuto, merci beaucoup :)
    Reishi
    Reishi
    MasculinAge : 25Messages : 146

    le Jeu 4 Déc 2014 - 20:36

    hey, merci !
    erika02
    erika02
    FémininAge : 23Messages : 264

    le Jeu 4 Déc 2014 - 21:34

    Merchi ♥



    Bandeau de navigation vertical - Page 3 45054210
    Bambi's logic
    Bambi's logic
    FémininAge : 22Messages : 25

    le Dim 7 Déc 2014 - 22:23

    Merci du partage :)
    webs
    webs
    MasculinAge : 26Messages : 1097

    le Lun 8 Déc 2014 - 20:44

    merci



    Bandeau de navigation vertical - Page 3 Img-0107360bb1h
    Thelma
    Thelma
    FémininAge : 28Messages : 32

    le Dim 14 Déc 2014 - 0:36

    Merci beaucoup !
    Jacoon
    Jacoon
    FémininAge : 22Messages : 147

    le Mar 16 Déc 2014 - 13:25

    j'adore, merci !
    Callisto
    Callisto
    FémininAge : 22Messages : 44

    le Mer 17 Déc 2014 - 13:23

    Merci du partage !
    Adèle
    Adèle
    FémininAge : 27Messages : 96

    le Ven 19 Déc 2014 - 13:01

    Merci ♥
    Niortais
    Niortais
    MasculinAge : 34Messages : 27

    le Lun 22 Déc 2014 - 8:10

    Merci pour ce code
    Filou
    Filou
    FémininAge : 28Messages : 139

    le Mar 23 Déc 2014 - 19:23

    il est possible que je l'utilise un jour
    Merci de ce partage :3
    1charlotte
    1charlotte
    FémininAge : 18Messages : 196

    le Mer 24 Déc 2014 - 21:39

    Owah ! Merci !
    avatar
    Garunzo
    MasculinAge : 20Messages : 38

    le Jeu 25 Déc 2014 - 23:45

    merci
    Xenala
    Xenala
    FémininAge : 36Messages : 28

    le Ven 26 Déc 2014 - 16:04

    Merci ^^
    Eleania Madena
    Eleania Madena
    FémininAge : 22Messages : 88

    le Lun 29 Déc 2014 - 11:33

    C'est génial, je cherchais quelque chose comme ça justement !




    avatar
    N3m0
    FémininAge : 27Messages : 303

    le Mar 6 Jan 2015 - 19:21

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

    le Jeu 8 Jan 2015 - 14:59

    Merci! :DD
    Dastan
    Dastan
    MasculinAge : 35Messages : 111

    le Lun 12 Jan 2015 - 15:59

    Merci pour ce tuto !
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 19:42