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 :
STANLEY Coffret outils 38 pièces
Voir le deal
19.99 €

    Sésame, ouvre-toi !

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

    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.

    Patdrue
    Patdrue
    FémininAge : 31Messages : 157

    Mer 16 Nov 2016 - 11:14

    Merchi!
    Sylfaen
    Sylfaen
    FémininAge : 22Messages : 69

    Dim 4 Déc 2016 - 16:06

    Oww, sympa !=)
    Chadot
    Chadot
    FémininAge : 32Messages : 248

    Mer 7 Déc 2016 - 8:08

    Merci



    Sésame, ouvre-toi !  - Page 2 2mo6y5k
    Loo
    Loo
    FémininAge : 26Messages : 22

    Mar 7 Mar 2017 - 14:40

    Merci :)
    Mashi Hozuki
    Mashi Hozuki
    MasculinAge : 23Messages : 28

    Mer 8 Mar 2017 - 11:44

    Meerrci ! :p
    ArgelTown
    ArgelTown
    MasculinAge : 21Messages : 23

    Lun 13 Mar 2017 - 13:05

    MERCI
    Hathaway
    Hathaway
    FémininAge : 24Messages : 45

    Lun 27 Mar 2017 - 17:42

    merci
    Detlef Ivarson
    Detlef Ivarson
    FémininAge : 29Messages : 13

    Lun 10 Avr 2017 - 20:39

    Merci beaucoup !
    Nayamea
    Nayamea
    FémininAge : 16Messages : 102

    Dim 14 Mai 2017 - 17:57

    Merci !
    R.Falsworth
    R.Falsworth
    FémininAge : 24Messages : 92

    Mar 23 Mai 2017 - 13:37

    mici ! :omg:
    Raynold
    Raynold
    MasculinAge : 21Messages : 39

    Sam 27 Mai 2017 - 21:07

    mrc
    John:
    John:
    MasculinAge : 27Messages : 56

    Mar 30 Mai 2017 - 2:18

    Merci
    John:
    John:
    MasculinAge : 27Messages : 56

    Mar 30 Mai 2017 - 11:06

    merci
    Newteen
    Newteen
    FémininAge : 31Messages : 60

    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 »
    Dviryx
    Dviryx
    MasculinAge : 19Messages : 8

    Ven 2 Juin 2017 - 19:45

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

    Dim 4 Juin 2017 - 15:21

    merci
    Manue
    Manue
    FémininAge : 40Messages : 58

    Mer 21 Juin 2017 - 23:57

    Merci !
    Deed01
    Deed01
    MasculinAge : 43Messages : 341

    Dim 27 Aoû 2017 - 13:43

    merci Very Happy
    Exes
    Exes
    MasculinAge : 23Messages : 17

    Ven 22 Déc 2017 - 23:32

    k
    Souky Mitsu
    Souky Mitsu
    FémininAge : 30Messages : 124

    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 :/)
    Selmacke
    Selmacke
    FémininAge : 30Messages : 100

    Mar 13 Fév 2018 - 17:26

    Merci :)
    Shiba Rikubi
    Shiba Rikubi
    MasculinAge : 26Messages : 23

    Mar 20 Mar 2018 - 3:14

    Merci beaucoup! ^^
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Avr 2021 - 3:12