Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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

    Partagez
    FémininAge : 22Message(s) : 4939

    Les Guildes
    Guilde des Conteurs:
    8/10  (8/10)
    Guilde des Illusionnistes:
    4/10  (4/10)
    Guilde des Architectes:
    12/20  (12/20)
    A-Lice
    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.


    Dernière édition par A-Lice le Lun 16 Fév 2015 - 11:03, édité 1 fois
    FémininAge : 12Message(s) : 50

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Wiss
    le Jeu 18 Aoû 2016 - 15:25
    Merci !



    Autre signa:
    FémininAge : 14Message(s) : 165
    KimmyKinder
    le Sam 20 Aoû 2016 - 7:14
    Merciiiiiiii ** Je cherchais ça depuis super longtemps
    FémininAge : 19Message(s) : 41
    cynical-echo
    le Sam 27 Aoû 2016 - 18:51
    Merci beaucoup :)
    FémininAge : 18Message(s) : 90

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Vixinte
    le Dim 28 Aoû 2016 - 18:16
    Merci pour le partage ♥
    FémininAge : 20Message(s) : 10
    AshleyV&WK
    le Lun 29 Aoû 2016 - 12:50
    Huuuu ...
    ça le fait comme ça.
    Merci.
    FémininAge : 19Message(s) : 177
    Piratress
    le Mar 30 Aoû 2016 - 11:34
    Merci *w*
    FémininAge : 28Message(s) : 114
    Luune
    le Dim 18 Sep 2016 - 19:18
    C'est vraiment joli, merci !
    FémininAge : 20Message(s) : 150
    EAVENN
    le Dim 25 Sep 2016 - 13:15
    merci
    FémininAge : 15Message(s) : 96
    Spring
    le Dim 25 Sep 2016 - 17:57
    merci c'est super beau !


    MasculinAge : 24Message(s) : 843
    Ziktaon
    le Dim 25 Sep 2016 - 21:02
    Merci





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

    FémininAge : 18Message(s) : 23
    NowSprings
    Hier à 3:01
    Merci


        
    Contenu sponsorisé
    Aujourd'hui à 15:47

      La date/heure actuelle est Sam 1 Oct 2016 - 15:47