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

    Okalem
    Okalem
    FémininAge : 19Messages : 63

    le Ven 6 Mar 2015 - 0:36

    Merci !
    Drygee
    Drygee
    FémininAge : 23Messages : 6

    le Ven 6 Mar 2015 - 20:41

    Nice, thanks !
    Anonymous
    Invité

    le Dim 8 Mar 2015 - 20:18

    Un grand merci! Je cherchais exactement quelque chose de pareil :3
    Asaliah
    Asaliah
    FémininAge : 34Messages : 120

    le Mer 11 Mar 2015 - 8:54

    Merci beaucoup !!!



    Bandeau de navigation vertical - Page 5 Signu10
    Fleurine
    Fleurine
    FémininAge : 20Messages : 75

    le Sam 14 Mar 2015 - 11:32

    merci beaucoup pour ce tutoriel !
    ~Nodoka~
    ~Nodoka~
    FémininAge : 22Messages : 185

    le Ven 20 Mar 2015 - 14:44

    merci
    Kamesora
    Kamesora
    FémininAge : 27Messages : 90

    le Sam 21 Mar 2015 - 9:52

    Merci beaucoup
    Katuro
    Katuro
    FémininAge : 21Messages : 39

    le Dim 22 Mar 2015 - 20:26

    Merci <3
    Satyrix
    Satyrix
    MasculinAge : 21Messages : 18

    le Lun 23 Mar 2015 - 15:30

    @destanee a écrit:Merci beaucoup
    Chadot
    Chadot
    FémininAge : 31Messages : 176

    le Mar 24 Mar 2015 - 9:22

    Ca peut être sympa je vais essayer, merci



    Bandeau de navigation vertical - Page 5 2mo6y5k
    xToshi-Shûx
    xToshi-Shûx
    FémininAge : 28Messages : 39

    le Mar 24 Mar 2015 - 15:24

    Merci x)



    Edgnima
    Edgnima
    FémininAge : 30Messages : 27

    le Mer 25 Mar 2015 - 16:29

    Merci pour ce code ! (:
    ♪ Extasy ♪
    ♪ Extasy ♪
    FémininAge : 29Messages : 105

    le Jeu 26 Mar 2015 - 18:13

    Merci du partage je vais essayer de l'adapter à mon projet :)
    Nono-Chan
    Nono-Chan
    FémininAge : 21Messages : 273

    le Jeu 26 Mar 2015 - 18:31

    Merci beaucoup ce code est vraiment superbe!
    Jasmée
    Jasmée
    FémininAge : 27Messages : 43

    le Dim 5 Avr 2015 - 22:03

    Ca a l'air très sympa, merci beaucoup !
    Madras
    Madras
    FémininAge : 34Messages : 281

    le Mer 8 Avr 2015 - 10:59

    Merci
    Sakura Yuuki
    Sakura Yuuki
    FémininAge : 18Messages : 78

    le Sam 18 Avr 2015 - 16:27

    Merci!



    Bandeau de navigation vertical - Page 5 4njt
    kinai0107
    kinai0107
    MasculinAge : 43Messages : 15

    le Dim 19 Avr 2015 - 23:52

    merci
    Kitty Kat.
    Kitty Kat.
    FémininAge : 25Messages : 86

    le Ven 24 Avr 2015 - 21:31

    J'ai envie d'essayer ! <3
    Neyokan
    Neyokan
    FémininAge : 22Messages : 43

    le Ven 24 Avr 2015 - 21:50

    Merci! o/
    louha
    louha
    FémininAge : 32Messages : 213

    le Sam 25 Avr 2015 - 18:00

    merci !
    vadorica
    vadorica
    MasculinAge : 23Messages : 47

    le Sam 25 Avr 2015 - 18:15

    merci :))



    Bandeau de navigation vertical - Page 5 1414241762-vadocadeausign
    Comediia
    Comediia
    FémininAge : 21Messages : 17

    le Sam 2 Mai 2015 - 14:35

    C'est super, merci !
    W.
    W.
    FémininAge : 21Messages : 127

    le Dim 3 Mai 2015 - 16:17

    merci ~



    Je suis Charlie.
    Anonymous
    Invité

    le Lun 4 Mai 2015 - 21:26

    Merci beaucoup ! :hug2:
    Contenu sponsorisé


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