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

    Xperience
    Xperience
    FémininAge : 23Messages : 156

    le Mar 13 Jan 2015 - 23:05

    Merci !



    Bandeau de navigation vertical - Page 4 1453390429-tumblr-lv1fbrkxzh1qlnpia
    poussette59
    poussette59
    FémininAge : 34Messages : 158

    le Jeu 15 Jan 2015 - 10:40

    géniial c'est ce que je cherchais <3 merciii
    Eiffel01
    Eiffel01
    MasculinAge : 32Messages : 32

    le Sam 17 Jan 2015 - 10:23

    Merci <3
    Csteel
    Csteel
    FémininAge : 24Messages : 19

    le Lun 19 Jan 2015 - 22:20

    Merci du partage!
    Miss Tigri
    Miss Tigri
    FémininAge : 25Messages : 89

    le Jeu 22 Jan 2015 - 19:34

    Merci !
    りん
    りん
    FémininAge : 26Messages : 73

    le Sam 24 Jan 2015 - 16:38

    Merci beaucoup, ce code est très utile ! ^^
    Thorn
    Thorn
    MasculinAge : 18Messages : 432

    le Dim 25 Jan 2015 - 19:57

    Merci !



    Bandeau de navigation vertical - Page 4 Kryr
    Trych
    Trych
    FémininAge : 24Messages : 80

    le Dim 25 Jan 2015 - 21:44

    wow merci



    Bandeau de navigation vertical - Page 4 Just_k10
    damon w salvatore
    damon w salvatore
    FémininAge : 31Messages : 109

    le Lun 26 Jan 2015 - 5:18

    merci
    G U E R L A I N
    G U E R L A I N
    FémininAge : 28Messages : 156

    le Mar 27 Jan 2015 - 23:56

    merci
    Wink



    Bandeau de navigation vertical - Page 4 191114colorfulwallandsexygirlfacebookcovero1
    Hayate747
    Hayate747
    MasculinAge : 29Messages : 196

    le Mer 28 Jan 2015 - 20:36

    Merci !!!
    Arisu
    Arisu
    FémininAge : 30Messages : 109

    le Jeu 29 Jan 2015 - 10:49

    Merci !
    Crowley
    Crowley
    FémininAge : 23Messages : 68

    le Dim 1 Fév 2015 - 19:08

    Merci beaucoup pour le partage !
    Alinoé
    Alinoé
    FémininAge : 27Messages : 35

    le Lun 2 Fév 2015 - 14:58

    Merci ! :)
    Allison01
    Allison01
    FémininAge : 35Messages : 207

    le Mar 3 Fév 2015 - 18:42

    merci Very Happy
    Maya Seiko
    Maya Seiko
    FémininAge : 26Messages : 126

    le Mar 3 Fév 2015 - 20:55

    Merci pour ce tutoriel! Very Happy
    patriciadpt30
    patriciadpt30
    FémininAge : 56Messages : 240

    le Ven 6 Fév 2015 - 13:29

    merci pour voir ?



    Patricia :)
    MxPrime2
    MxPrime2
    MasculinAge : 25Messages : 81

    le Mer 11 Fév 2015 - 4:02

    Je suis curieux de voir le résultat, je vais essayer !
    Kortyx
    Kortyx
    MasculinAge : 29Messages : 81

    le Mer 11 Fév 2015 - 18:16

    Merci ^.^
    Eraendil
    Eraendil
    FémininAge : 27Messages : 92

    le Mar 17 Fév 2015 - 2:13

    Merci du partage ^^



    Bandeau de navigation vertical - Page 4 Sign_n10
    ClaryF
    ClaryF
    FémininAge : 29Messages : 137

    le Mar 17 Fév 2015 - 20:21

    Merci !
    Meldicia
    Meldicia
    FémininAge : 31Messages : 31

    le Ven 20 Fév 2015 - 20:55

    Merci Very Happy
    SpicAsh
    SpicAsh
    FémininAge : 22Messages : 176

    le Dim 22 Fév 2015 - 11:35

    Merci !
    okeane
    okeane
    FémininAge : 29Messages : 93

    le Mar 24 Fév 2015 - 22:26

    Merciiiiiiiiiiiiiiiii ^^
    Maître Corbeau
    Maître Corbeau
    MasculinAge : 19Messages : 21

    le Jeu 26 Fév 2015 - 17:46

    Merci beaucoup pour le partage :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 20:07