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

    Anonymous
    Invité

    le Sam 13 Sep 2014 - 15:16

    Merci !
    avatar
    Løve
    MasculinAge : 24Messages : 189

    le Lun 15 Sep 2014 - 19:30

    Merci beaucoup :3
    Nonze
    Nonze
    MasculinAge : 26Messages : 85

    le Mar 16 Sep 2014 - 1:19

    Merci
    Erza
    Erza
    FémininAge : 24Messages : 63

    le Mar 16 Sep 2014 - 9:01

    Merci *v*



    Bandeau de navigation vertical - Page 2 161
    "Un jour je serai la meilleure codeuse
    Je m’entraînerais sans répis
    Je ne serais jamais la Deu'z
    Et je raflerais tous les prix
    Je parcourrai la toile entiere
    Traquant avec espoir
    Le CSS et ses mystères
    Le secret de son pouvoir

    CODEPOWA !
    Je les saurais tous !
    Shaadow
    Shaadow
    FémininAge : 26Messages : 59

    le Mer 17 Sep 2014 - 1:41

    thanks :)
    smily
    smily
    FémininAge : 20Messages : 66

    le Mer 17 Sep 2014 - 21:42

    Merci ** !
    zbou
    zbou
    FémininAge : 25Messages : 83

    le Dim 21 Sep 2014 - 12:18

    Merci
    pixelman
    pixelman
    FémininAge : 39Messages : 241

    le Jeu 2 Oct 2014 - 17:46

    Merci ^^




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Shaolan
    Shaolan
    MasculinAge : 28Messages : 108

    le Sam 4 Oct 2014 - 9:19

    Merci
    Malf Claymore
    Malf Claymore
    FémininAge : 25Messages : 125

    le Dim 5 Oct 2014 - 18:50

    arigato
    Allèle
    Allèle
    FémininAge : 26Messages : 56

    le Mar 7 Oct 2014 - 22:38

    Merci =)
    Hyl
    Hyl
    FémininAge : 24Messages : 81

    le Mer 8 Oct 2014 - 11:02

    ça donne un super effet o_o
    merci beaucoup pour ton travail et ton partage !




    » H y l

    Bandeau de navigation vertical - Page 2 Avatarkikoulolenfaitnoncunsign

    Spoiler:
    Bandeau de navigation vertical - Page 2 SignatureCloudlemagnifiquecopie
    Haniwa
    Haniwa
    FémininAge : 25Messages : 206

    le Mer 8 Oct 2014 - 23:45

    Merci
    picka234
    picka234
    FémininAge : 54Messages : 530

    le Mar 14 Oct 2014 - 17:35

    merci!!!!



    Bandeau de navigation vertical - Page 2 Sign13
    Moro-PM
    Moro-PM
    FémininAge : 17Messages : 149

    le Mar 14 Oct 2014 - 17:52

    Merci, c'est super ! *^*
    Milou
    Milou
    FémininAge : 20Messages : 163

    le Jeu 16 Oct 2014 - 18:21

    thanks ^^



    Bandeau de navigation vertical - Page 2 693002signa
    Kathlyn
    Kathlyn
    FémininAge : 23Messages : 33

    le Ven 17 Oct 2014 - 20:24

    thank's =)
    Sweet Angel
    Sweet Angel
    FémininAge : 36Messages : 152

    le Sam 18 Oct 2014 - 13:05

    Merci pour ce code!
    Neverose
    Neverose
    FémininAge : 28Messages : 93

    le Mar 21 Oct 2014 - 14:31

    Tout à fait ce que je pense rechercher, un grand merci !
    Sorako
    Sorako
    FémininAge : 22Messages : 94

    le Mer 22 Oct 2014 - 14:18

    Merci ! *^*
    Sakura-chan
    Sakura-chan
    FémininAge : 22Messages : 180

    le Sam 1 Nov 2014 - 0:00

    Mercii !
    Summeryoid
    Summeryoid
    FémininAge : 25Messages : 32

    le Sam 1 Nov 2014 - 1:22

    Merci de ce tuto ~



    Bandeau de navigation vertical - Page 2 539853pin
    Asriel
    Asriel
    FémininAge : 24Messages : 120

    le Sam 1 Nov 2014 - 16:44

    Merci beaucoup pour ce code



    Bandeau de navigation vertical - Page 2 Fullmetal-alchemist
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 31Messages : 213

    le Sam 1 Nov 2014 - 19:24

    Merci beaucoup !



    ....
    *-Atlas-*
    *-Atlas-*
    MasculinAge : 30Messages : 138

    le Lun 3 Nov 2014 - 20:14

    J'adore



    Bandeau de navigation vertical - Page 2 539522Atlasnewban
    Contenu sponsorisé


      La date/heure actuelle est Mer 13 Nov 2019 - 15:27