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.

anipassion.com

    PA Casino

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

    le Lun 11 Aoû 2014 - 11:28


    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

    Anonymous
    Invité

    le Lun 11 Aoû 2014 - 11:50

    Je dois dire que le "pouah" m'a un peu surprise quand j'ai regardé ton CSS xD Mais comme c'est précisé dans le message je déplace, merci :3

    Pourquoi tu n'ajoutes pas les indications dans le CSS d'ailleurs ? :O
    PLOIM
    PLOIM
    FémininAge : 21Messages : 52

    le Lun 11 Aoû 2014 - 17:53

    Merci !
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 19Messages : 298

    le Jeu 14 Aoû 2014 - 17:52

    Merci o/



    Just want to be yours.
    shala
    shala
    FémininAge : 27Messages : 213

    le Jeu 14 Aoû 2014 - 20:33

    merci



    Kau
    Kau
    FémininAge : 17Messages : 148

    le Ven 22 Aoû 2014 - 19:57

    Merci 8D
    Haniwa
    Haniwa
    FémininAge : 24Messages : 206

    le Sam 30 Aoû 2014 - 17:36

    Merci
    Vegvisir
    Vegvisir
    FémininAge : 20Messages : 391

    le Mar 2 Sep 2014 - 10:02

    Tres joli, merci !



    PA Casino 1
    Glow
    Glow
    FémininAge : 19Messages : 93

    le Dim 7 Sep 2014 - 15:16

    Merci !
    Cydae
    Cydae
    FémininAge : 27Messages : 99

    le Dim 7 Sep 2014 - 15:41

    Merci!
    Draly
    Draly
    FémininAge : 26Messages : 111

    le Lun 8 Sep 2014 - 20:09

    Merci.^^
    Allison01
    Allison01
    FémininAge : 35Messages : 207

    le Ven 12 Sep 2014 - 13:58

    Jolie Very Happy
    lysou
    lysou
    FémininAge : 22Messages : 29

    le Sam 20 Sep 2014 - 0:35

    joli *v*
    Nemelise
    Nemelise
    FémininAge : 18Messages : 50

    le Sam 4 Oct 2014 - 13:59

    Merci :3
    Shymi
    Shymi
    FémininAge : 21Messages : 65

    le Dim 5 Oct 2014 - 19:36

    Merci
    Arpège
    Arpège
    FémininAge : 20Messages : 111

    le Jeu 9 Oct 2014 - 0:23

    Trop bow *-*

    Merci ~



    PA Casino 170221084427548922
    Writers World commence à ouvrir !
    Tatia38
    Tatia38
    FémininAge : 30Messages : 308

    le Ven 10 Oct 2014 - 8:23

    Merci
    zbou
    zbou
    FémininAge : 25Messages : 83

    le Ven 10 Oct 2014 - 19:07

    Merci :3
    ColorTime'Less
    ColorTime'Less
    FémininAge : 22Messages : 103

    le Dim 12 Oct 2014 - 0:29

    Merci =)
    Anonymous
    Invité

    le Jeu 30 Oct 2014 - 17:05

    Merci :3
    Riten
    Riten
    MasculinAge : 21Messages : 30

    le Ven 31 Oct 2014 - 23:23

    Merci Wink
    Mzelle Machin
    Mzelle Machin
    FémininMessages : 118

    le Dim 2 Nov 2014 - 18:30

    Merci :)
    MOON LEE
    MOON LEE
    FémininAge : 25Messages : 149

    le Lun 3 Nov 2014 - 11:38

    Merci :3
    Fayzl4D
    Fayzl4D
    MasculinAge : 23Messages : 84

    le Dim 9 Nov 2014 - 22:58

    merci
    Nevr0z
    Nevr0z
    FémininAge : 30Messages : 74

    le Dim 9 Nov 2014 - 23:01

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 20:12