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.


    PA en 3 colonnes avec infobulles

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Sam 5 Juil 2014 - 3:28


    Page d'Accueil simple en 3 colonnes avec infobulles


    Suite à une demande d'Armie voici une PA simple en 3 colonnes avec infobulles.

    Je précise que l'arrière plan bleu correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www


    Et le code :
    HTML :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
    <div class="largeurPA"><div class="PA_titre">BIENVENUE SUR "nom du forum"</div>   
    <div class="cadre_fond">
    <table><tr><td><div class="colonne01"><span class="contexte_titre">Contexte</span><div class="contexte_corps">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non tortor aliquam elit vehicula consequat ac non mauris. Proin aliquam tincidunt magna, et pulvinar purus pellentesque eleifend. Etiam vitae libero mollis, tincidunt libero at, ornare lacus. Mauris id lorem nibh. Donec bibendum ultrices egestas. Maecenas vulputate tempor nibh. Ut cursus mauris a ante venenatis, gravida rhoncus ante pretium.

    Etiam vel mi velit. Cras neque tellus, gravida nec sollicitudin quis, pellentesque adipiscing purus. Aliquam eget risus sed justo dapibus porttitor ut eu velit. Sed commodo pretium elementum. Maecenas cursus adipiscing malesuada. Ut lacinia nulla vitae mauris facilisis mollis. Nam sodales tellus sit amet nisl commodo accumsan. Phasellus tincidunt purus non quam pulvinar, id dictum eros blandit. Praesent nisi diam, blandit a semper non, tincidunt sit amet turpis. Cras id nisi porta, ultrices eros vel, vehicula elit. Integer ac elementum nibh. Morbi purus sapien, gravida in mattis a, iaculis at neque. Nunc vestibulum sapien ut condimentum suscipit. Nam vulputate enim ac dolor pretium porta.

    </div><br/><div class="topsite">
    Top-sites
    <br/> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a></div></div></td><td><div class="bloc_staff"><div class="staff"><img src="http://oi57.tinypic.com/wv5ts7.jpg" alt="" /><div class="infobulle01">Nom Prénom<br/>rang</div></div><div class="staff"><img src="http://oi57.tinypic.com/wv5ts7.jpg" alt="" /><div class="infobulle01">Nom Prénom<br/>rang</div></div></div><div class="case_annonce"><span class="annonce_titre">Annonces</span>
    <br/><span class="annonce_corps">
    <a href="LIEN DE L'ANNONCE">00/00/00</a> : Lorem ipsum
    </span></div>
    <span class="lien_annonce"><a href="LIEN DU SUJET">Contexte</a>, <a href="LIEN DU SUJET">règlements,</a> <a href="LIEN DU SUJET">scénarios</a><br/><a href="LIEN DU SUJET">faq</a>, <a href="LIEN DU SUJET">invités</a>, <a href="LIEN DU SUJET">avatars</a>, <a href="LIEN DU SUJET">pouvoirs</a></span>
    <div class="crédit_A-Lice"><a href="http://www.never-utopia.com/" style="text-decoration:none;">© By A-Lice sur Never-Utopia</a></div></td><td><div class="colonne02"><div class="partenaire">
    Partenaires <br/><br/>
    <marquee scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();"><a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <br />
    <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> </marquee>
    </div><br /><div class="PV_case">
    Postes vacants <br/><br/>
    <div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><br/><br/><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><br/><br/><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div>
    </div></div></div></td></tr></table>
    </div>


    CSS :
    Code:
    /*PA Armie*/
    .PA_titre {
    padding:5px;
    width:790px;
    background-color:#f2f2f2;
    font-size:25px;
    float:top;
    color:#134e7b;
    text-shadow:2px 2px 0px white;
    text-align:center;
    font-family: 'Merienda', cursive;
    }

    .cadre_fond {
    width:786px;
    padding:5px;
    border-top:5px solid darkblue;
    border-bottom:5px solid darkblue;
    border-left:2px solid darkblue;
    border-right:2px solid darkblue;
    background-color:lightcyan;
    margin:auto;
    }

    .colonne01 {
    width:240px;
    margin-left:-15px;
    border:2px solid darkblue;
    background-color:#f2f2f2;
    padding:5px;
    display:inline-block;
    }

    .contexte_titre {
    font-size:20px;
    color:midnightblue;
    width:100%;
    font-family: 'Merienda', cursive;
    }

    .contexte_corps {
    width:100%;
    height:346px;
    overflow:auto;
    color:gray;
    text-align:justify;
    font-size:12px;
    }

    .topsite {
    width:100%;
    height:80px;
    font-size:20px;
    color:midnightblue;
    font-family: 'Merienda', cursive;
    }

    .case_annonce {
    width:260px;
    height:200px;
    border:2px solid darkblue;
    overflow:auto;
    background-color:#f2f2f2;
    display:inline-block;
    padding:5px;
    }

    .annonce_titre {
    font-size:20px;
    color:midnightblue;
    font-family: 'Merienda', cursive;
    }

    .annonce_corps {
    color:gray;
    font-size:14px;
    width:100%;
    }

    .lien_annonce {
    display:block;
    padding-top:20px;
    padding-bottom:20px;
    text-align:center;
    font-size:17px;
    }

    .crédit_A-Lice {
    float:bottom;
    font-size:11px;
    text-align:center;
    }

    .colonne02 {
    width:220px;
    display:inline-block;
    }

    .partenaire {
    width:100%;
    border:2px solid darkblue;
    background-color:#f2f2f2;
    padding:5px;
    font-size:20px;
    color:midnightblue;
    height:175px;
    font-family: 'Merienda', cursive;
    }

    .PV_case {
    width:100%;
    border:2px solid darkblue;
    background-color:#f2f2f2;
    padding:5px;
    font-size:20px;
    color:midnightblue;
    height:270px;
    font-family: 'Merienda', cursive;
    }

    .largeurPA {
    width:800px;
    }

    .bloc_staff {
    width:240px;
    margin:auto;
    }

    .staff {
    display:inline-block;
    position: relative;
    height: 75px;
    width: 75px;
    overflow: visible;
    margin-top: -30px;
    margin-left: 28px;
    margin-bottom: 40px;
    border: 2px solid darkblue;
    }

    .staff .infobulle01 {
    position: absolute;
    width: 80px;
    height: 30px;
    padding: 5px;
    top: 50px;
    left: -20px;
    border-radius: 15px;
    border: black 1px solid;
    color: black;
    text-align: center;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    background-color: #f2f2f2;
    }

    .staff:hover .infobulle01 {
    opacity: 1;
    visibility: visible;
    }

    .pv {
    display:inline-block;
    position: relative;
    height: 60px;
    width: 40px;
    overflow: visible;
    margin-left: 9px;
    margin-top: -12px;
    border: 2px solid darkblue;
    }

    .pv .infobulle02 {
    position: absolute;
    width: 80px;
    height: 30px;
    padding: 5px;
    top: 35px;
    left: -50px;
    border-radius: 15px;
    border: black 1px solid;
    color: black;
    text-align: center;
    font-family: none;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    background-color: #f2f2f2;
    }

    .pv:hover .infobulle02 {
    opacity: 1;
    visibility: visible;
    }

    /*fin PA Armie*/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.

    avatar
    Louchita
    FémininAge : 25Messages : 131

    le Sam 26 Juil 2014 - 21:36

    Thanks =)



    avatar
    Kitsuki
    FémininAge : 18Messages : 22

    le Mar 5 Aoû 2014 - 0:58

    Thanks :)
    avatar
    Missmytic
    FémininAge : 29Messages : 26

    le Mer 6 Aoû 2014 - 21:25

    merci
    avatar
    Porcelain Detox
    MasculinAge : 23Messages : 91

    le Dim 10 Aoû 2014 - 17:49

    Merci Very Happy
    avatar
    Miss Julie
    FémininAge : 35Messages : 12

    le Dim 10 Aoû 2014 - 20:24

    Merci !!
    avatar
    Piratress
    FémininAge : 20Messages : 215

    le Lun 11 Aoû 2014 - 14:57

    Merci *-*
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Mar 12 Aoû 2014 - 15:20

    Merci ! ^^
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Sam 30 Aoû 2014 - 16:01

    Très jolie, merci :)
    avatar
    Mélaïna
    FémininAge : 30Messages : 70

    le Mar 16 Sep 2014 - 18:24

    Merci :)
    avatar
    Shadaan
    FémininAge : 25Messages : 80

    le Jeu 18 Sep 2014 - 14:05

    Génial, merci !



    avatar
    Kau
    FémininAge : 16Messages : 148

    le Dim 21 Sep 2014 - 21:07

    Merci
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Mar 21 Oct 2014 - 18:01

    Merci
    avatar
    Nevr0z
    FémininAge : 29Messages : 74

    le Dim 9 Nov 2014 - 23:06

    Merci :) !
    avatar
    Socrazy
    FémininAge : 30Messages : 11

    le Dim 14 Déc 2014 - 20:43

    Très jolie code Very Happy
    avatar
    Invité

    le Lun 15 Déc 2014 - 15:18

    Merci du partage!
    avatar
    Kaamee
    FémininAge : 22Messages : 110

    le Lun 15 Déc 2014 - 15:25

    Merci <3



    avatar
    Abby Reever
    FémininAge : 26Messages : 131

    le Jeu 18 Déc 2014 - 23:20

    Merci! \o/
    avatar
    Pein94
    Age : 24Messages : 59

    le Dim 21 Déc 2014 - 19:44

    merci :)
    avatar
    Ayfoth
    MasculinAge : 28Messages : 1229

    le Mer 14 Jan 2015 - 8:40

    Oh merci *-*



    avatar
    Eil'liathan Tyan'Lirulin
    FémininAge : 27Messages : 315

    le Ven 10 Avr 2015 - 18:43

    Tout simple et efficace ! Merci ^^
    avatar
    Azorus
    MasculinAge : 16Messages : 35

    le Lun 27 Avr 2015 - 15:40

    Mercii



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    avatar
    TiGraou
    MasculinAge : 25Messages : 238

    le Dim 10 Mai 2015 - 23:56

    Merci
    avatar
    Ssinn
    FémininAge : 25Messages : 33

    le Jeu 21 Mai 2015 - 2:17

    merci!
    avatar
    Invité

    le Ven 12 Juin 2015 - 8:53

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:05