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.


    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

    Deed01
    Deed01
    MasculinAge : 42Messages : 340

    le Mar 5 Mai 2015 - 20:47

    merci Very Happy
    avatar
    Lupa
    FémininAge : 23Messages : 183

    le Mer 6 Mai 2015 - 13:50

    J'adore le concept ! Merci =D



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    Zarwins
    Zarwins
    FémininAge : 23Messages : 155

    le Lun 11 Mai 2015 - 8:23

    Merci Ö



    Bandeau de navigation vertical - Page 6 121217030106243656
    The One Pandemonium
    The One Pandemonium
    FémininAge : 26Messages : 97

    le Mer 13 Mai 2015 - 21:51

    Merci!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    Bandeau de navigation vertical - Page 6 1416253868-ladycrowcoupe
    Le Panda.
    Le Panda.
    FémininAge : 23Messages : 34

    le Jeu 14 Mai 2015 - 1:11

    Ohw. C'est beau. Merci *w*
    Miku
    Miku
    MasculinAge : 27Messages : 70

    le Jeu 14 Mai 2015 - 17:26

    Un grand merci pour ce code !
    Cruelly
    Cruelly
    FémininAge : 26Messages : 2595

    le Jeu 28 Mai 2015 - 2:06

    Merci ^^ je vais tenter ce petit code :)



    :heart: :heart:
    Sylfaen
    Sylfaen
    FémininAge : 21Messages : 69

    le Dim 7 Juin 2015 - 3:25

    Blop ! Merci !
    TiGraou
    TiGraou
    MasculinAge : 26Messages : 243

    le Lun 8 Juin 2015 - 15:02

    Merci :)
    Lilynufare
    Lilynufare
    FémininAge : 29Messages : 341

    le Jeu 18 Juin 2015 - 22:32

    merci
    Bellabimbo444
    Bellabimbo444
    FémininAge : 21Messages : 61

    le Dim 21 Juin 2015 - 15:57

    merci !



    QueenDancing13
    QueenDancing13
    FémininAge : 23Messages : 106

    le Dim 21 Juin 2015 - 23:20

    Merci ^^



    Bandeau de navigation vertical - Page 6 Christina_Aguilera_Signature_by_Sitic
    Sixties
    Sixties
    FémininAge : 24Messages : 119

    le Ven 26 Juin 2015 - 17:50

    Merci ;D
    AlexeB
    AlexeB
    FémininAge : 24Messages : 165

    le Dim 28 Juin 2015 - 23:22

    Très joli! Merci du partage!
    Neko Mimi
    Neko Mimi
    FémininAge : 29Messages : 165

    le Dim 5 Juil 2015 - 11:28

    Je cherchais ça depuis longtemps *.*
    Merci ♥♥



    Bandeau de navigation vertical - Page 6 Tumblr_me5uxaCZuJ1qj73e2o1_500
    Heartfilia
    Heartfilia
    FémininAge : 19Messages : 98

    le Dim 5 Juil 2015 - 18:31

    Merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    Mini007
    Mini007
    MasculinAge : 25Messages : 21

    le Lun 6 Juil 2015 - 3:43

    merci :)!
    missvodkadems
    missvodkadems
    FémininAge : 29Messages : 114

    le Jeu 9 Juil 2015 - 14:48

    Merci



    Bandeau de navigation vertical - Page 6 Pub10
    Yuuka Maestris
    Yuuka Maestris
    FémininAge : 22Messages : 19

    le Jeu 9 Juil 2015 - 15:12

    merci beaucoup ^^ ça risquera d'être très utile !
    Neiko Seiteki
    Neiko Seiteki
    MasculinAge : 23Messages : 44

    le Jeu 9 Juil 2015 - 17:23

    Merci!
    Mercurion
    Mercurion
    MasculinAge : 25Messages : 58

    le Mar 14 Juil 2015 - 23:02

    Merci
    Roitatan
    Roitatan
    MasculinAge : 21Messages : 50

    le Dim 19 Juil 2015 - 9:43

    Merci
    Satiine
    Satiine
    FémininAge : 32Messages : 11

    le Dim 19 Juil 2015 - 19:26

    Merci beaucoup pour ce code qui est très beau *_*
    Flyremoon
    Flyremoon
    FémininAge : 22Messages : 27

    le Mar 21 Juil 2015 - 1:41

    Nyah, merchi ♥



    Bandeau de navigation vertical - Page 6 519258Sanstitre4
    Akina-chan
    Akina-chan
    FémininAge : 26Messages : 139

    le Mer 22 Juil 2015 - 21:09

    Merci <3
    Contenu sponsorisé


      La date/heure actuelle est Mer 13 Nov 2019 - 16:28