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

    Evalla
    Evalla
    FémininAge : 26Messages : 61

    le Jeu 12 Mai 2016 - 18:42

    Merci
    CookiesAuxChoco
    CookiesAuxChoco
    FémininAge : 23Messages : 23

    le Jeu 19 Mai 2016 - 12:50

    Merci beaucoup ! Very Happy
    Dreamyland
    Dreamyland
    FémininAge : 22Messages : 88

    le Jeu 19 Mai 2016 - 19:51

    tyyyy
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 28Messages : 315

    le Ven 20 Mai 2016 - 23:33

    Pile poile ce que je cherche !
    avatar
    Nal Souclade
    MasculinAge : 20Messages : 163

    le Dim 22 Mai 2016 - 21:31

    Merci beaucoup ! C'est super joli. **
    Grande
    Grande
    FémininAge : 31Messages : 207

    le Mer 25 Mai 2016 - 19:19

    Merci



    Bandeau de navigation vertical - Page 10 171074gwenj10
    Fuyuka
    Fuyuka
    FémininAge : 24Messages : 63

    le Jeu 26 Mai 2016 - 17:56

    Merci beaucoup !!
    Amacky
    Amacky
    FémininAge : 27Messages : 135

    le Jeu 26 Mai 2016 - 18:21

    Merci c'est super :)
    Amacky
    Amacky
    FémininAge : 27Messages : 135

    le Jeu 26 Mai 2016 - 18:22

    Merci c'est super :)
    missp
    missp
    FémininAge : 29Messages : 26

    le Jeu 26 Mai 2016 - 20:05

    Merci beaucoup ! <3
    Girly
    Girly
    FémininAge : 21Messages : 116

    le Dim 12 Juin 2016 - 19:05

    merci
    avatar
    Hop80
    MasculinAge : 30Messages : 138

    le Lun 13 Juin 2016 - 1:16

    Je cherchais un tuto dans le genre merci
    Kathee
    Kathee
    FémininAge : 26Messages : 667

    le Lun 20 Juin 2016 - 12:26

    Juste par curiosité !

    Merci Alice Razz



    • Nous serions ravis de vous accueillir •

    Bandeau de navigation vertical - Page 10 Signae10
    • Venez donc voir ce petit petit fofo •
    neurosis
    neurosis
    MasculinAge : 22Messages : 6

    le Lun 20 Juin 2016 - 19:53

    Merci beaucoup du partage. :aww:
    Anonymous
    Invité

    le Mar 21 Juin 2016 - 0:49

    Merci pour ce code **
    Shoki
    Shoki
    FémininAge : 17Messages : 1310

    le Mer 29 Juin 2016 - 11:40

    Merci ~




    Bandeau de navigation vertical - Page 10 5qox
    Applauze
    Applauze
    MasculinAge : 23Messages : 167

    le Sam 9 Juil 2016 - 9:30

    Merci
    Sighild
    Sighild
    FémininAge : 32Messages : 217

    le Sam 9 Juil 2016 - 21:15

    Merci pour ce tuto
    Dearborn
    Dearborn
    FémininAge : 25Messages : 111

    le Dim 10 Juil 2016 - 10:01

    Merci!
    Kira Hatsuki
    Kira Hatsuki
    FémininAge : 17Messages : 148

    le Mar 12 Juil 2016 - 12:22

    Merci ! <3
    Stitch56
    Stitch56
    FémininAge : 26Messages : 200

    le Mer 13 Juil 2016 - 17:21

    Merci ♥
    Viou
    Viou
    FémininAge : 30Messages : 181

    le Jeu 21 Juil 2016 - 9:54

    Merci ! Peut-on le fermer et l'ouvrir à notre guise ?
    Skylighty
    Skylighty
    FémininAge : 89Messages : 98

    le Jeu 21 Juil 2016 - 10:46

    mercii
    Helvelina
    Helvelina
    FémininAge : 28Messages : 81

    le Lun 25 Juil 2016 - 16:12

    Merci beaucoup !
    LeMonarque
    LeMonarque
    MasculinAge : 33Messages : 26

    le Sam 13 Aoû 2016 - 12:23

    Merci
    Contenu sponsorisé


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