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

    Wiss
    Wiss
    FémininAge : 14Messages : 53

    le Jeu 18 Aoû 2016 - 15:25

    Merci !



    Bandeau de navigation vertical - Page 11 Wiss11
    Autre signa:
    Bandeau de navigation vertical - Page 11 Signa110
    KimmyKinder
    KimmyKinder
    FémininAge : 17Messages : 181

    le Sam 20 Aoû 2016 - 7:14

    Merciiiiiiii ** Je cherchais ça depuis super longtemps
    cynical-echo
    cynical-echo
    FémininAge : 21Messages : 41

    le Sam 27 Aoû 2016 - 18:51

    Merci beaucoup :)
    Vixinte
    Vixinte
    FémininAge : 21Messages : 90

    le Dim 28 Aoû 2016 - 18:16

    Merci pour le partage ♥
    AshleyV&WK
    AshleyV&WK
    FémininAge : 22Messages : 10

    le Lun 29 Aoû 2016 - 12:50

    Huuuu ...
    ça le fait comme ça.
    Merci.
    Piratress
    Piratress
    FémininAge : 21Messages : 215

    le Mar 30 Aoû 2016 - 11:34

    Merci *w*
    Luune
    Luune
    FémininAge : 30Messages : 143

    le Dim 18 Sep 2016 - 19:18

    C'est vraiment joli, merci !
    EAVENN
    EAVENN
    FémininAge : 22Messages : 162

    le Dim 25 Sep 2016 - 13:15

    merci
    Spring
    Spring
    FémininAge : 17Messages : 113

    le Dim 25 Sep 2016 - 17:57

    merci c'est super beau !



    Bandeau de navigation vertical - Page 11 1469275904-1466279957-matae-sign
    Ziktaon
    Ziktaon
    MasculinAge : 26Messages : 843

    le Dim 25 Sep 2016 - 21:02

    Merci



    Bandeau de navigation vertical - Page 11 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    NowSprings
    NowSprings
    FémininAge : 20Messages : 35

    le Ven 30 Sep 2016 - 3:01

    Merci



    Bandeau de navigation vertical - Page 11 Signat10
    Bandeau de navigation vertical - Page 11 Dark_and_girly_stamp_by_stampmakerlkj-d6154qaBandeau de navigation vertical - Page 11 I_love_pirates_stamp_by_stampmakerlkj-d6544no Bandeau de navigation vertical - Page 11 Steampunk_stamp_by_stampmakerlkj-d61q82o Bandeau de navigation vertical - Page 11 Gay_rights_stamp_by_stampmakerlkj-d61m4fe Bandeau de navigation vertical - Page 11 9ccead529ece7299769357ab69416b0d-d6svomf Bandeau de navigation vertical - Page 11 Star_Wars_Stamp_by_ChimeraDragonfang Bandeau de navigation vertical - Page 11 00d1124c4de408f25d00d7e42f651893-d31l3d0
    Rebekaah
    Rebekaah
    FémininAge : 24Messages : 51

    le Dim 2 Oct 2016 - 1:02

    Mercii !
    ATHENA.
    ATHENA.
    FémininAge : 22Messages : 31

    le Ven 2 Déc 2016 - 9:24

    parfait merci !
    Rubians
    Rubians
    FémininAge : 22Messages : 13

    le Lun 21 Aoû 2017 - 12:17

    Merci beaucoup !
    Carasama
    Carasama
    FémininAge : 23Messages : 95

    le Mar 29 Aoû 2017 - 16:21

    wow amazing
    Tiffany.
    Tiffany.
    FémininAge : 29Messages : 12

    le Dim 15 Oct 2017 - 12:54

    Merci
    Rainy-Sunny
    Rainy-Sunny
    FémininAge : 20Messages : 22

    le Jeu 21 Mar 2019 - 1:43

    Merci beaucoup pour le code !



    Sunny : Petite folle, a moyenne chevelure brune et avec des lunettes de Geekou. Aime se taper des délires toute seule.


    Rainy : Grande folle, a grande chevelure brune et aussi des lunettes, mais pas de Geekou. Aime les chouettes et les minets ce qui est complètement HS.

    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Avr 2019 - 4:22