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 : -38%
Ecran PC gaming 23,8″ – ACER KG241Y P3bip ...
Voir le deal
99.99 €
anipassion.com

    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

    Pein94
    Pein94
    Age : 30Messages : 59

    Dim 21 Déc 2014 - 21:36

    Thanks :)
    Nanachu ♥
    Nanachu ♥
    FémininAge : 27Messages : 108

    Dim 21 Déc 2014 - 23:26

    MERCIII ♥
    Mimio
    Mimio
    FémininAge : 30Messages : 191

    Mer 7 Jan 2015 - 6:14

    Merci *w*



    PA Casino - Page 2 134914Signazael2
    Vanity.
    Vanity.
    FémininAge : 29Messages : 44

    Ven 9 Jan 2015 - 13:01

    Merci beaucoup ! Simple, mais très classe cette PA :)



    PA Casino - Page 2 Signat10
    Arisu
    Arisu
    FémininAge : 36Messages : 119

    Sam 31 Jan 2015 - 18:05

    Merci !
    reshiram44
    reshiram44
    MasculinAge : 26Messages : 380

    Sam 14 Fév 2015 - 22:59

    merci



    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Mar 3 Mar 2015 - 18:24

    Merci : )
    Sweetdead
    Sweetdead
    FémininAge : 29Messages : 38

    Mar 10 Mar 2015 - 20:56

    Le code est super beau ! Merci beaucoup !
    Eirlys
    Eirlys
    FémininAge : 32Messages : 66

    Lun 20 Avr 2015 - 16:34

    Merci
    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Mar 5 Mai 2015 - 17:53

    merci !



    PA Casino - Page 2 Ye49
    pika-cerise
    pika-cerise
    FémininAge : 33Messages : 92

    Sam 6 Juin 2015 - 18:42

    merci
    Kira Hatsuki
    Kira Hatsuki
    FémininAge : 23Messages : 152

    Mar 9 Juin 2015 - 20:42

    Super, merci !
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Jeu 9 Juil 2015 - 1:45

    sympa merci
    Kenway Kioshi
    Kenway Kioshi
    MasculinAge : 28Messages : 64

    Jeu 9 Juil 2015 - 8:05

    Petite question bien simple ^^' Comment faire pour rendre les coins ronds ? :) Merci ! Très beau travail ! Au pire, si possible de me MP ^^'
    Argy
    Argy
    FémininAge : 26Messages : 98

    Lun 13 Juil 2015 - 19:20

    Merci beaucoup ^^
    J'aime tous tes codages de type casino ♥
    Nono-Chan
    Nono-Chan
    FémininAge : 26Messages : 273

    Mer 15 Juil 2015 - 15:04

    Très joli
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Lun 3 Aoû 2015 - 22:28

    merci
    ClaryF
    ClaryF
    FémininAge : 34Messages : 138

    Jeu 6 Aoû 2015 - 21:52

    Merci.
    Anonymous
    Invité

    Jeu 6 Aoû 2015 - 23:37

    Merci pour ce joli partage (^~^)
    Little-myrt
    Little-myrt
    FémininAge : 26Messages : 41

    Sam 8 Aoû 2015 - 3:17

    C'est super joli, j'adore, merci !
    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 2 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
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 18:03