AccueilDernières imagesRechercherS'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 :
Pokémon Évolutions Prismatiques : ...
Voir le deal

    PA Casino

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

    Lun 11 Aoû 2014 - 11:28

    Rappel du premier message :


    PA Casino


    Suite à une demande de Joshua023 voici une PA Casino.

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

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


    Et le code :
    HTML :
    Code:
    <br/><div id="PA_fond"><div class="PA_titre">Bienvenue dans le casino, {USERNAME}</div>
    <div class="pouah"><div class="bloc1 PA_contexte">
    Contexte

    </div></div> <div class="pouah"><div class="bloc1 PA_staff">
    <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div>
    </div></div>
    <br/><br/>
    <div class="pouah"><div class="bloc2 PA_image">
    <div class="PA_img" style="margin-top:-10px; margin-left:-10px;"><div class="PA_img2">Texte derrière l'image.

    </div><img src="http://img4.hostingpics.net/pics/824684PokerFace600368706.jpg" alt="" /></div>

    </div></div> <div class="pouah"><div class="bloc2 PA_predef">
    <marquee scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();"><a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <br/><br/><a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> </marquee>

    </div></div>
    <br/><br/>
    <div class="pouah"><div class="bloc3 PA_partenaire">
    <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a> <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a> <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a><br/>
    <a href="LIEN DU SUJET">Devenir partenaire ?</a> - <a href="LIEN SU SUJET">Nos partenaires</a>

    </div></div> <div class="pouah"><div class="bloc3 PA_liens">
    <a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/>

    </div></div> <div class="pouah"><div class="bloc3 PA_crédit">
    <img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /><br/>Crédits

    </div></div>
    <br/><a href="http://www.never-utopia.com/" style="text-decoration:none; font-size:11px; color:white; text-align:center; display:block;">© A-Lice</a><br/>
    </div>


    CSS :
    Code:
    .pouah {
    display:inline-block;
    margin-right:10px;
    }

    .bloc1 {
    height:150px;
    padding:10px;
    }

    .bloc2 {
    height:120px;
    padding:10px;
    }

    .bloc3 {
    height:55px;
    padding:10px;
    }

    .staff {
    position: relative;
    height: 144px;
    width: 60px;
    overflow: visible;
    display:inline-block;
    background:white;
    padding:3px;
    font-size:11px;
    color:#5A0D17;
    }

    .staff .staff_infobulle {
    position: absolute;
    top: 70px;
    left: -60px;
    width: 120px;
    height: 200px;
    background-color: #C1BFBF;
    opacity: 0;
    visibility: hidden;
    font-size:16px;
    }

    .staff:hover .staff_infobulle {
    opacity: 1;
    visibility: visible;
    z-index: 99;
    }

    div.PA_img {
    width:300px;
    height:140px;
    overflow:hidden;
    display:inline-block;
    }
     
    div.PA_img2 {
    width:280px;
    height:120px;
    padding:10px;
    overflow:auto; 
    position:relative;
    color:white;
    text-align:justify;
    }

    .PA_img img {
        width:300px;
        height:140px; 
        position: relative; 
        bottom: 140px;
        transition: 0.5s; 
    }
    .PA_img:hover img { 
        bottom:280px;
        transition: 0.5s; 
    }

    #PA_fond {
    background:#ADA1A1;
    width:700px;
    color:white;
    }

    .PA_titre {
    font-size:30px;
    text-align:center;
    padding:10px;
    color:#5A0D17;
    }

    .PA_contexte {
    background:#1C644C;
    width:320px;
    overflow:auto;
    text-align:justify;
    }

    .PA_staff {
    background:#5A0D17;
    width:280px;
    position:relative;
    top:-15px;
    }

    .PA_img_staff {
    width:55px;
    height:120px;
    }

    .PA_img_staff2 {
    width:120px;
    height:180px;
    }

    .PA_image {
    background:#5A0D17;
    width:280px;
    }

    .PA_predef {
    background:#1C644C;
    width:320px;
    position:relative;
    top:-10px;
    }

    .PA_partenaire {
    background:#5A0D17;
    width:320px;
    font-size:11px;
    text-align:center;
    position:relative;
    top:-12px;
    }

    .PA_liens {
    background:#1C644C;
    width:130px;
    overflow:auto;
    }

    .PA_crédit {
    background:#5A0D17;
    width:110px;
    position:relative;
    top:-12px;
    }

    Précision : La classe "pouah" correspond à l'alignement de deux blocs sur une même ligne.

    /!\ En cas de problème, c'est ici que ça ce passe.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^


    Dernière édition par A-Lice le Lun 16 Fév 2015 - 13:16, édité 1 fois

    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Sam 31 Oct 2015 - 19:16

    Jolie :)
    Zoé
    Zoé
    FémininAge : 25Messages : 189

    Mer 18 Nov 2015 - 15:09

    merci !



    PA Casino - Page 3 274643signaaaa
    avatar
    Alancar
    MasculinAge : 27Messages : 57

    Lun 1 Fév 2016 - 19:57

    Merci beaucoup
    Xyyny
    Xyyny
    FémininAge : 33Messages : 59

    Mer 20 Avr 2016 - 17:23

    Marchiiii :)
    defenrir
    defenrir
    MasculinAge : 41Messages : 105

    Lun 9 Mai 2016 - 16:25

    mercii
    Yuuki Emna
    Yuuki Emna
    FémininAge : 28Messages : 38

    Mar 31 Mai 2016 - 21:00

    Merci!^^
    Fuyuka
    Fuyuka
    FémininAge : 30Messages : 63

    Dim 12 Juin 2016 - 9:29

    Merci beaucoup !!
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 30Messages : 156

    Mar 4 Oct 2016 - 22:43

    Icerm ruop el egatrap.
    Lyber
    Lyber
    MasculinAge : 32Messages : 14

    Mer 5 Oct 2016 - 4:53

    Merci à toi ;3
    Aile de l'Ange
    Aile de l'Ange
    FémininAge : 26Messages : 110

    Ven 21 Oct 2016 - 16:32

    merci du partage !
    Azaral
    Azaral
    FémininAge : 28Messages : 69

    Sam 7 Jan 2017 - 20:04

    merci !
    Thanos
    Thanos
    MasculinAge : 28Messages : 84

    Ven 10 Fév 2017 - 13:44

    Merci
    Lalia
    Lalia
    FémininAge : 25Messages : 45

    Sam 25 Fév 2017 - 15:22

    Merci x3
    Dark Fairy
    Dark Fairy
    FémininAge : 26Messages : 244

    Lun 20 Mar 2017 - 22:30

    Merci!
    Misery Devil
    Misery Devil
    FémininAge : 34Messages : 163

    Mar 2 Mai 2017 - 16:32

    jolie



    PA Casino - Page 3 121584Signature
    Momiji-chan
    Momiji-chan
    FémininAge : 26Messages : 38

    Sam 6 Mai 2017 - 17:44

    Merci pour ce code :)
    Yuuki
    Yuuki
    Age : 30Messages : 26

    Sam 13 Mai 2017 - 23:11

    Merci n.n
    Kiryuu02
    Kiryuu02
    FémininAge : 35Messages : 32

    Dim 4 Juin 2017 - 15:29

    Merci
    Madras
    Madras
    FémininAge : 39Messages : 285

    Sam 8 Juil 2017 - 18:13

    Merci du partage
    Nyls
    Nyls
    MasculinAge : 23Messages : 28

    Sam 9 Sep 2017 - 14:49

    merciiiii
    Lamia
    Lamia
    FémininAge : 29Messages : 154

    Jeu 14 Sep 2017 - 8:41

    Merci pour le partage !
    Ennie
    Ennie
    FémininAge : 60Messages : 101

    Ven 29 Sep 2017 - 18:10

    Merci
    Sandym
    Sandym
    FémininAge : 38Messages : 27

    Jeu 12 Oct 2017 - 22:49

    merci !
    Noir Black
    Noir Black
    FémininAge : 39Messages : 62

    Lun 24 Juin 2019 - 10:17

    merci <3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 9:51