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




    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

    Anonymous
    Invité

    le Jeu 31 Juil 2014 - 22:05

    Merci, je déplace ^^
    Katia Akane
    Katia Akane
    FémininAge : 28Messages : 37

    le Ven 1 Aoû 2014 - 18:15

    Super je suis intéressé par ce tuto ! Merci beaucoup !
    destanee
    destanee
    FémininAge : 33Messages : 43

    le Dim 3 Aoû 2014 - 11:37

    Merci beaucoup
    skaera22
    skaera22
    MasculinAge : 24Messages : 72

    le Dim 3 Aoû 2014 - 20:24

    thx
    Féhéla
    Féhéla
    FémininAge : 46Messages : 238

    le Lun 4 Aoû 2014 - 4:20

    exactement ce que je cherchais Very Happy Merci !
    PLOIM
    PLOIM
    FémininAge : 22Messages : 52

    le Lun 4 Aoû 2014 - 12:29

    Merci du partage :3
    Ocean Lounge.
    Ocean Lounge.
    FémininAge : 25Messages : 140

    le Sam 9 Aoû 2014 - 12:34

    Merci  :hug: 
    Azzuen
    Azzuen
    FémininAge : 21Messages : 61

    le Dim 10 Aoû 2014 - 10:22

    Merci beaucoup :3  :hug: 
    shala
    shala
    FémininAge : 27Messages : 213

    le Dim 10 Aoû 2014 - 19:51

    merci ^^



    Noruenu
    Noruenu
    FémininAge : 26Messages : 123

    le Lun 11 Aoû 2014 - 2:37

      Merci ! :B
    Yamashita
    Yamashita
    FémininAge : 20Messages : 50

    le Mer 13 Aoû 2014 - 0:01

    OMG. JE PRENDS. *___* Merci. ♥



    Liitchy
    Liitchy
    FémininAge : 24Messages : 40

    le Mer 13 Aoû 2014 - 5:01

    Merci Very Happy
    Zoé
    Zoé
    FémininAge : 20Messages : 187

    le Dim 17 Aoû 2014 - 13:53

    merci o/



    Bandeau de navigation vertical 274643signaaaa
    Nîniel
    Nîniel
    FémininAge : 24Messages : 70

    le Mer 20 Aoû 2014 - 23:29

    Merci beaucoup pour le code



    Bandeau de navigation vertical 1384099300-nini-nu-signa
    Rosela
    Rosela
    FémininAge : 25Messages : 10

    le Dim 24 Aoû 2014 - 14:54

    Merci beaucoup !
    Ab0utxMe
    Ab0utxMe
    FémininAge : 24Messages : 186

    le Dim 24 Aoû 2014 - 17:53

    Merci beaucoup ^^



    Bandeau de navigation vertical 878302signaturevegeta
    Faucon
    Faucon
    FémininAge : 19Messages : 64

    le Sam 30 Aoû 2014 - 16:48

    Merci ♥
    Hebi
    Hebi
    FémininAge : 25Messages : 73

    le Dim 31 Aoû 2014 - 14:29

    merci ^^
    kevin85400
    kevin85400
    MasculinAge : 26Messages : 176

    le Lun 1 Sep 2014 - 19:37

    merci



    Bandeau de navigation vertical Sans_t11
    DixieM.
    DixieM.
    FémininAge : 28Messages : 49

    le Mer 3 Sep 2014 - 21:25

    Merci du partage *-*
    Momo-Sama
    Momo-Sama
    FémininAge : 99Messages : 20

    le Jeu 4 Sep 2014 - 15:45

    Ow merci *-*
    Frosty Blue
    Frosty Blue
    FémininAge : 23Messages : 162

    le Ven 5 Sep 2014 - 9:06

    Merci ^^
    Dydy
    Dydy
    FémininAge : 29Messages : 493

    le Jeu 11 Sep 2014 - 0:06

    merci du partage!



    Bandeau de navigation vertical 27978_signature_never_utopia_dydy_2
    Amaluna
    Amaluna
    FémininAge : 28Messages : 103

    le Jeu 11 Sep 2014 - 0:45

    mercii :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 14 Oct 2019 - 20:14