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

    Akisa
    Akisa
    FémininAge : 25Messages : 5

    le Mer 4 Nov 2015 - 10:26

    Merci ^-^



    Bandeau de navigation vertical - Page 8 Sans_t10
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 25Messages : 149

    le Lun 9 Nov 2015 - 21:40

    Merci pour le partage.
    Saya Akimoto
    Saya Akimoto
    FémininAge : 33Messages : 130

    le Lun 9 Nov 2015 - 22:59

    Je trouve que ta barre est magnifique. Merci d'avoir échanger l'idée



    Bandeau de navigation vertical - Page 8 Signat11
    Elocha
    Elocha
    FémininAge : 68Messages : 255

    le Mar 10 Nov 2015 - 12:17

    I want to see ! mer see ;p



    eLoChA.
    Kirito
    Kirito
    MasculinAge : 23Messages : 200

    le Mar 10 Nov 2015 - 20:42

    Intéressant Wink
    Nerine
    Nerine
    FémininAge : 26Messages : 15

    le Jeu 26 Nov 2015 - 10:45

    Merci !
    LouetRinkin
    LouetRinkin
    MasculinAge : 28Messages : 62

    le Sam 5 Déc 2015 - 20:36

    Merci
    L0une
    L0une
    FémininAge : 28Messages : 788

    le Dim 6 Déc 2015 - 0:22

    Merci !




    Bandeau de navigation vertical - Page 8 854973Sanstitre12

    Les cadeaux !:
    Merci Kathee-Lamette !
    Bandeau de navigation vertical - Page 8 1437236719-loune


    Les Aëro !:
    Bandeau de navigation vertical - Page 8 Aero10

    Bandeau de navigation vertical - Page 8 514572signaAero

    Bandeau de navigation vertical - Page 8 883774aero2


    Glow
    Glow
    FémininAge : 19Messages : 93

    le Mer 16 Déc 2015 - 18:42

    Merci beaucoup, très utile!
    Melaly
    Melaly
    FémininAge : 25Messages : 91

    le Jeu 24 Déc 2015 - 21:41

    Merci Alice :)
    tu as un bon coup de crayon haha
    Sid'
    Sid'
    MasculinAge : 29Messages : 73

    le Ven 25 Déc 2015 - 11:58

    Merci o/
    noksye
    noksye
    FémininAge : 28Messages : 53

    le Ven 8 Jan 2016 - 10:56

    Merci beaucoup pour ce code !
    Anonymous
    Invité

    le Sam 9 Jan 2016 - 0:07

    Merci beaucoup :love:
    Minuit Pal Meeerl
    Minuit Pal Meeerl
    FémininAge : 31Messages : 47

    le Lun 11 Jan 2016 - 16:37

    merci



    Bandeau de navigation vertical - Page 8 Baabe2c0412707ad4df85e081946c67f
    Maag
    Maag
    FémininAge : 20Messages : 31

    le Mer 13 Jan 2016 - 20:50

    merchii
    Yukihyo
    Yukihyo
    MasculinAge : 21Messages : 82

    le Jeu 14 Jan 2016 - 1:15

    Merci beaucoup !
    Pride
    Pride
    FémininAge : 19Messages : 28

    le Sam 16 Jan 2016 - 17:58

    Merci beaucoup !
    Lessien
    Lessien
    FémininAge : 37Messages : 163

    le Dim 24 Jan 2016 - 13:53

    Merci !
    Thalysa
    Thalysa
    FémininAge : 68Messages : 31

    le Dim 24 Jan 2016 - 16:18

    Merci du partage !
    Thalysa
    Thalysa
    FémininAge : 68Messages : 31

    le Dim 24 Jan 2016 - 16:24

    Merci du partage !
    MeowLowDee
    MeowLowDee
    FémininAge : 27Messages : 72

    le Jeu 28 Jan 2016 - 16:25

    Merci beaucoup !
    Mystigri
    Mystigri
    FémininAge : 16Messages : 97

    le Dim 31 Jan 2016 - 10:21

    Joli !



    Mme Layton
    Mme Layton
    FémininAge : 22Messages : 93

    le Jeu 4 Fév 2016 - 17:41

    Pratique, discret, merchi =)
    Fantôma
    Fantôma
    MasculinAge : 17Messages : 67

    le Dim 7 Fév 2016 - 14:55

    merci!



    Bandeau de navigation vertical - Page 8 1438369110-fantoma
    Lysséa
    Lysséa
    FémininAge : 18Messages : 18

    le Dim 7 Fév 2016 - 18:45

    Merci !
    Contenu sponsorisé


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