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.

Le Deal du moment :
ASOS -20% en plus sur toutes les chaussures en promo ...
Voir le deal

    PA en 3 colonnes avec infobulles

    A-Lice
    A-Lice
    FémininAge : 27Messages : 4939

    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.

    Louchita
    Louchita
    FémininAge : 28Messages : 132

    Sam 26 Juil 2014 - 21:36

    Thanks =)



    PA en 3 colonnes avec infobulles 1466018025-loulousign
    Kitsuki
    Kitsuki
    FémininAge : 21Messages : 22

    Mar 5 Aoû 2014 - 0:58

    Thanks :)
    Missmytic
    Missmytic
    FémininAge : 32Messages : 26

    Mer 6 Aoû 2014 - 21:25

    merci
    Porcelain Detox
    Porcelain Detox
    MasculinAge : 26Messages : 91

    Dim 10 Aoû 2014 - 17:49

    Merci Very Happy
    Miss Julie
    Miss Julie
    FémininAge : 38Messages : 12

    Dim 10 Aoû 2014 - 20:24

    Merci !!
    PrincesseÔ
    PrincesseÔ
    FémininAge : 23Messages : 220

    Lun 11 Aoû 2014 - 14:57

    Merci *-*
    Eshon
    Eshon
    FémininAge : 40Messages : 196

    Mar 12 Aoû 2014 - 15:20

    Merci ! ^^
    Haniwa
    Haniwa
    FémininAge : 26Messages : 206

    Sam 30 Aoû 2014 - 16:01

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

    Mar 16 Sep 2014 - 18:24

    Merci :)
    Shadaan
    Shadaan
    FémininAge : 28Messages : 80

    Jeu 18 Sep 2014 - 14:05

    Génial, merci !



    PA en 3 colonnes avec infobulles 897455signnu
    Kau
    Kau
    FémininAge : 19Messages : 148

    Dim 21 Sep 2014 - 21:07

    Merci
    Hayate747
    Hayate747
    MasculinAge : 31Messages : 196

    Mar 21 Oct 2014 - 18:01

    Merci
    Nevr0z
    Nevr0z
    FémininAge : 32Messages : 74

    Dim 9 Nov 2014 - 23:06

    Merci :) !
    Socrazy
    Socrazy
    FémininAge : 33Messages : 11

    Dim 14 Déc 2014 - 20:43

    Très jolie code Very Happy
    Anonymous
    Invité

    Lun 15 Déc 2014 - 15:18

    Merci du partage!
    Kaamee
    Kaamee
    FémininAge : 25Messages : 110

    Lun 15 Déc 2014 - 15:25

    Merci <3



    Abby Reever
    Abby Reever
    FémininAge : 29Messages : 145

    Jeu 18 Déc 2014 - 23:20

    Merci! \o/
    Pein94
    Pein94
    Age : 27Messages : 59

    Dim 21 Déc 2014 - 19:44

    merci :)
    Ayfoth
    Ayfoth
    MasculinAge : 31Messages : 1330

    Mer 14 Jan 2015 - 8:40

    Oh merci *-*



    PA en 3 colonnes avec infobulles Oyl7
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 30Messages : 315

    Ven 10 Avr 2015 - 18:43

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

    Lun 27 Avr 2015 - 15:40

    Mercii



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


    GFX by Aleph'
    TiGraou
    TiGraou
    MasculinAge : 27Messages : 243

    Dim 10 Mai 2015 - 23:56

    Merci
    Ssinn
    Ssinn
    FémininAge : 28Messages : 33

    Jeu 21 Mai 2015 - 2:17

    merci!
    Anonymous
    Invité

    Ven 12 Juin 2015 - 8:53

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 16 Avr 2021 - 5:39