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

    En ligne
    FeliceFelicis
    FeliceFelicis
    FémininAge : 29Messages : 89

    le Lun 8 Fév 2016 - 19:24

    De toute beauté!! Merci!
    Dorin
    Dorin
    FémininAge : 44Messages : 30

    le Mar 9 Fév 2016 - 16:19

    je tente! Merci pour le partage
    Insanys
    Insanys
    FémininAge : 18Messages : 13

    le Mer 10 Fév 2016 - 8:09

    Merci :)
    Pau
    Pau
    FémininAge : 28Messages : 37

    le Ven 12 Fév 2016 - 15:32

    super! merci!
    Zalosta
    Zalosta
    FémininAge : 25Messages : 14

    le Sam 13 Fév 2016 - 23:09

    Merci beaucoup ! <3 :hug:
    Espoir
    Espoir
    FémininAge : 24Messages : 54

    le Mar 16 Fév 2016 - 16:42

    Merci !
    Amu
    Amu
    FémininAge : 22Messages : 16

    le Mar 16 Fév 2016 - 18:50

    Enfin ce que je cherchais ** Merciiii ♥






    Itsumo doori no aru hi no koto, Kimi wa totsuzen tachiagari itta, Konya hoshi wo mi ni yukou. 
    dusty scarecrow.
    Neya
    Neya
    FémininAge : 20Messages : 164

    le Mar 16 Fév 2016 - 20:05

    Et ça, j'achète !
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 26Messages : 153

    le Mer 24 Fév 2016 - 12:12

    Merci beaucoup !
    Hivernxl
    Hivernxl
    MasculinAge : 18Messages : 12

    le Sam 27 Fév 2016 - 16:31

    Merci !
    Loretta
    Loretta
    FémininAge : 27Messages : 53

    le Dim 28 Fév 2016 - 13:08

    Merci pour le partage !
    Kimirsu Anko
    Kimirsu Anko
    MasculinAge : 18Messages : 88

    le Ven 4 Mar 2016 - 18:31

    Merci !
    Nessaleth
    Nessaleth
    FémininAge : 28Messages : 52

    le Sam 5 Mar 2016 - 13:57

    Merci pour le partage ! Very Happy
    MissDream
    MissDream
    FémininAge : 24Messages : 144

    le Sam 5 Mar 2016 - 16:42

    Merci beaucoup pour se partage

    Nawak
    Nawak
    FémininAge : 21Messages : 112

    le Dim 6 Mar 2016 - 5:13

    Merci :3

    KinThoa
    KinThoa
    FémininAge : 24Messages : 29

    le Ven 25 Mar 2016 - 10:18

    Super !
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 51Messages : 167

    le Sam 26 Mar 2016 - 15:58

    Merci
    Xelha
    Xelha
    FémininAge : 26Messages : 120

    le Lun 28 Mar 2016 - 14:27

    Merci ^^
    Téoz
    Téoz
    FémininAge : 30Messages : 38

    le Dim 10 Avr 2016 - 14:49

    Merci!
    Paradise
    Paradise
    FémininAge : 26Messages : 22

    le Mar 12 Avr 2016 - 21:59

    Hooo oui Mercii! =D
    Tempy
    Tempy
    FémininAge : 21Messages : 76

    le Mer 13 Avr 2016 - 13:06

    :michi2: J'aime.

    Je l'emprunte pour le tester sur mon forum ♥
    Margogotte
    Margogotte
    FémininAge : 25Messages : 73

    le Ven 22 Avr 2016 - 12:58

    Merci beaucoup !
    rosebleudu10
    rosebleudu10
    FémininAge : 29Messages : 189

    le Mar 26 Avr 2016 - 15:25

    merci pour ce partage
    Kai Parker
    Kai Parker
    FémininAge : 21Messages : 154

    le Sam 30 Avr 2016 - 18:41

    Merci *^*

    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 23Messages : 84

    le Mar 10 Mai 2016 - 23:19

    Merchi =3
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 3:15