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.


    Sésame, ouvre-toi !

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

    le Mar 17 Mar 2015 - 13:25

    Rappel du premier message :


    Sésame, ouvre-toi !


    Suite à une demande de Blem voici une PA avec effets au passage de la souris.

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

    HTML & CSS ~ Voici donc un aperçu : www & au passage de la souris ~ phpBB2


    Et le code :
    HTML :
    Code:
    <div class="PA_fond">
    <div class="PA_guide"><div class="PA_titre">Guide</div><div class="infobulle1"><div class="PA_titre">Guide</div><p class="PA_txt1">-Règlement <br />
    -Contexte<br />
    -Autre...<br /></p></div></div>
    <div class="PA_contexte"><div class="PA_titre">Contexte</div><div class="infobulle2"><div class="PA_titre">Contexte</div><p class="PA_txt1">Texte ici
    </p></div></div>
    <div class="PA_partenaire"><div class="PA_titre">Partoche</div><div class="infobulle3"><div class="PA_titre">Partoche</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
    <div class="PA_predefini"><div class="PA_titre">Predef</div><div class="infobulle4"><div class="PA_titre">Predef</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
    <div class="PA_annonce"><div class="PA_titre">Annonce</div><div class="infobulle5"><div class="PA_titre">Annonce</div><p class="PA_txt3">-Machin a gagné le LPA X<br />
    -Truc a participé à chose W<br /></p><a href="http://www.never-utopia.com" class="PA_credit">A-Lice | Never-Utopia</a></div></div>
    <div class="PA_new"><div class="PA_titre">News</div><div class="infobulle6"><div class="PA_titre">News</div><p class="PA_txt2">00/00/00 : Blablabla<br />
    00/00/00 : Blablabla<br /></p></div></div>
    <div class="PA_staff"><div class="PA_titre">Staff</div><div class="infobulle7"><div class="PA_titre">Staff</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <br /><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
    </div>


    CSS :
    Code:
    .PA_fond {
    position: relative;
    width: 685px;
    height: 350px;
    margin: auto;
    background: white;
    font-size: 14px;
    }

    .PA_guide {
    position: absolute;
    width: 159px;
    height: 259px;
    padding: 3px;
    background: silver;
    left: 5px;
    text-align: justify;
    }

    .PA_guide .infobulle1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 259px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    padding: 3px;
    text-align: justify;
    }

    .PA_guide:hover .infobulle1 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_contexte {
    position: absolute;
    width: 159px;
    height: 259px;
    padding: 3px;
    background: silver;
    left: 175px;
    text-align: justify;
    }

    .PA_contexte .infobulle2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 259px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_contexte:hover .infobulle2 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_partenaire {
    position: absolute;
    width: 329px;
    height: 74px;
    padding: 3px;
    background: silver;
    left: 345px;
    text-align: justify;
    }

    .PA_partenaire .infobulle3 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 329px;
    height: 74px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_partenaire:hover .infobulle3 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_predefini {
    position: absolute;
    width: 329px;
    height: 74px;
    padding: 3px;
    background: silver;
    top: 270px;
    left: 5px;
    text-align: justify;
    }

    .PA_predefini .infobulle4 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 329px;
    height: 74px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_predefini:hover .infobulle4 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_annonce {
    position: absolute;
    width: 159px;
    height: 259px;
    padding: 3px;
    background: silver;
    left: 345px;
    top: 85px;
    text-align: justify;
    }

    .PA_annonce .infobulle5 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 259px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_annonce:hover .infobulle5 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_new {
    position: absolute;
    width: 159px;
    height: 124px;
    padding: 3px;
    background: silver;
    left: 515px;
    top: 85px;
    text-align: justify;
    }

    .PA_new .infobulle6 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 124px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_new:hover .infobulle6 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_staff {
    position: absolute;
    width: 159px;
    height: 124px;
    padding: 3px;
    background: silver;
    left: 515px;
    top: 220px;
    text-align: justify;
    }

    .PA_staff .infobulle7 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 159px;
    height: 124px;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 1.5s;
    background: silver;
    text-align: justify;
    }

    .PA_staff:hover .infobulle7 {
    opacity: 1;
    visibility: visible;
    transition: all 1.5s;
    }

    .PA_titre {
    text-indent: 20px;
    font-size: 25px;
    position: relative;
    z-index: 20;
    }

    .PA_img {
    margin-top: -5px;
    position: relative;
    z-index: 10;
    }

    .PA_txt1 {
    overflow: auto;
    height: 209px;
    }

    .PA_txt2 {
    overflow: auto;
    height: 74px;
    }

    .PA_txt3 {
    overflow: auto;
    height: 190px;
    }

    a.PA_credit {
    text-decoration: none;
    font-size: 12px;
    color: white;
    display: block;
    text-align: center;
    }


    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
    Patdrue
    FémininAge : 28Messages : 157

    le Mer 16 Nov 2016 - 11:14

    Merchi!
    avatar
    Sylfaen
    FémininAge : 20Messages : 69

    le Dim 4 Déc 2016 - 16:06

    Oww, sympa !=)
    avatar
    Chadot
    FémininAge : 30Messages : 176

    le Mer 7 Déc 2016 - 8:08

    Merci



    avatar
    Loo
    FémininAge : 23Messages : 22

    le Mar 7 Mar 2017 - 14:40

    Merci :)
    avatar
    Mashi Hozuki
    MasculinAge : 20Messages : 28

    le Mer 8 Mar 2017 - 11:44

    Meerrci ! :p
    avatar
    ArgelTown
    MasculinAge : 18Messages : 23

    le Lun 13 Mar 2017 - 13:05

    MERCI
    avatar
    Hathaway
    FémininAge : 21Messages : 45

    le Lun 27 Mar 2017 - 17:42

    merci
    avatar
    Detlef Ivarson
    FémininAge : 27Messages : 13

    le Lun 10 Avr 2017 - 20:39

    Merci beaucoup !
    avatar
    Nayamea
    FémininAge : 14Messages : 102

    le Dim 14 Mai 2017 - 17:57

    Merci !
    avatar
    R.Falsworth
    FémininAge : 21Messages : 92

    le Mar 23 Mai 2017 - 13:37

    mici ! :omg:
    avatar
    Raynold
    MasculinAge : 18Messages : 39

    le Sam 27 Mai 2017 - 21:07

    mrc
    avatar
    John:
    MasculinAge : 25Messages : 56

    le Mar 30 Mai 2017 - 2:18

    Merci
    avatar
    John:
    MasculinAge : 25Messages : 56

    le Mar 30 Mai 2017 - 11:06

    merci
    avatar
    Newteen
    FémininAge : 29Messages : 52

    le Ven 2 Juin 2017 - 16:56

    Merci :)



    "-Voudriez-vous me dire, s'il vous plaît, par où je dois m'en aller d'ici ?
    -Cela dépend beaucoup de l'endroit où tu veux aller.
    -Peu importe l'endroit...
    -En ce cas, peu importe la route que tu prendras.
    -... pourvu que j'arrive quelque part »
    avatar
    Dviryx
    MasculinAge : 16Messages : 8

    le Ven 2 Juin 2017 - 19:45

    Merci !
    avatar
    Kiryuu02
    FémininAge : 29Messages : 32

    le Dim 4 Juin 2017 - 15:21

    merci
    avatar
    Manue
    FémininAge : 37Messages : 58

    le Mer 21 Juin 2017 - 23:57

    Merci !
    avatar
    Deed01
    MasculinAge : 40Messages : 340

    le Dim 27 Aoû 2017 - 13:43

    merci Very Happy
    avatar
    Exes
    MasculinAge : 21Messages : 17

    le Ven 22 Déc 2017 - 23:32

    k
    avatar
    Souky Mitsu
    FémininAge : 28Messages : 124

    le Mar 13 Fév 2018 - 2:48

    Merci :) (Ps, tes images ne s'affichent pas. C'est comme ça pour presque tout tes aperçus :/)
    avatar
    Selmacke
    FémininAge : 28Messages : 100

    le Mar 13 Fév 2018 - 17:26

    Merci :)
    avatar
    Shiba Rikubi
    MasculinAge : 23Messages : 22

    le Mar 20 Mar 2018 - 3:14

    Merci beaucoup! ^^
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Sep 2018 - 17:05