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.


    PA en 3 colonnes avec infobulles

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

    Sam 5 Juil 2014 - 3:28

    Rappel du premier message :


    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.

    North-AC
    North-AC
    FémininAge : 41Messages : 15

    Dim 14 Juin 2015 - 13:42

    Merci beaucoup !
    Meiywa
    Meiywa
    FémininAge : 30Messages : 81

    Ven 11 Sep 2015 - 16:51

    Pile ce que je cherchais Very Happy
    Merciiiiii :bisou:
    Ju' de fruits
    Ju' de fruits
    FémininAge : 28Messages : 82

    Sam 19 Sep 2015 - 12:34

    Merci Very Happy



    Kelalin
    Kelalin
    FémininAge : 29Messages : 2524

    Dim 20 Sep 2015 - 22:36

    Merci (*≧▽≦)
    Madras
    Madras
    FémininAge : 36Messages : 282

    Mar 22 Sep 2015 - 8:24

    Merci
    Mellister
    Mellister
    FémininAge : 27Messages : 17

    Sam 26 Sep 2015 - 23:41

    Merci Very Happy
    Faelynn
    Faelynn
    FémininAge : 40Messages : 13

    Dim 6 Déc 2015 - 14:40

    Merci ^^
    Pastiche
    Pastiche
    FémininAge : 27Messages : 78

    Sam 19 Déc 2015 - 16:46

    Oh merci du partage !
    AlexTasie
    AlexTasie
    MasculinAge : 24Messages : 34

    Lun 11 Jan 2016 - 23:34

    Merci bien pour ce partage :p
    tsuki59
    tsuki59
    FémininAge : 30Messages : 6

    Ven 18 Mar 2016 - 17:51

    Merci !
    Thessia
    Thessia
    FémininAge : 32Messages : 78

    Mar 12 Avr 2016 - 22:07

    C'est chouette!



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    NekoMiaouw
    NekoMiaouw
    FémininAge : 25Messages : 148

    Lun 16 Mai 2016 - 9:16

    merci :)



    PA en 3 colonnes avec infobulles - Page 2 388245alisign
    mymywilliamss
    mymywilliamss
    FémininAge : 28Messages : 11

    Dim 14 Aoû 2016 - 22:43

    Merci :)
    Jenova
    Jenova
    MasculinAge : 27Messages : 153

    Mar 16 Aoû 2016 - 18:31

    merci



    PA en 3 colonnes avec infobulles - Page 2 I3k3
    Gieve
    Gieve
    FémininAge : 31Messages : 123

    Sam 7 Jan 2017 - 14:32

    thanks
    Aadelrun
    Aadelrun
    FémininAge : 22Messages : 79

    Mar 9 Jan 2018 - 18:34

    Merci beaucoup !^^



    PA en 3 colonnes avec infobulles - Page 2 1502999567-ghgh-gh
    Deed01
    Deed01
    MasculinAge : 43Messages : 341

    Jeu 11 Jan 2018 - 18:07

    thanks
    Wonderwall
    Wonderwall
    FémininAge : 27Messages : 20

    Ven 12 Jan 2018 - 16:28

    Merci !
    En ligne
    defenrir
    defenrir
    MasculinAge : 38Messages : 79

    Dim 28 Jan 2018 - 22:59

    merci o/
    Miikan
    Miikan
    FémininAge : 27Messages : 23

    Ven 9 Fév 2018 - 13:42

    Merci du partage :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 27 Sep 2021 - 22:19