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 : -29%
DYSON V8 Origin – Aspirateur balai sans fil
Voir le deal
269.99 €

    PA Casino

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

    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é

    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 : 27Messages : 52

    Lun 11 Aoû 2014 - 17:53

    Merci !
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 25Messages : 304

    Jeu 14 Aoû 2014 - 17:52

    Merci o/



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

    Jeu 14 Aoû 2014 - 20:33

    merci



    Kau
    Kau
    FémininAge : 22Messages : 148

    Ven 22 Aoû 2014 - 19:57

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

    Sam 30 Aoû 2014 - 17:36

    Merci
    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Mar 2 Sep 2014 - 10:02

    Tres joli, merci !



    PA Casino 1
    Glow
    Glow
    FémininAge : 25Messages : 94

    Dim 7 Sep 2014 - 15:16

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

    Dim 7 Sep 2014 - 15:41

    Merci!
    Draly
    Draly
    FémininAge : 32Messages : 120

    Lun 8 Sep 2014 - 20:09

    Merci.^^
    Allison01
    Allison01
    FémininAge : 40Messages : 225

    Ven 12 Sep 2014 - 13:58

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

    Sam 20 Sep 2014 - 0:35

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

    Sam 4 Oct 2014 - 13:59

    Merci :3
    Shymi
    Shymi
    FémininAge : 26Messages : 67

    Dim 5 Oct 2014 - 19:36

    Merci
    Arpège
    Arpège
    FémininAge : 26Messages : 112

    Jeu 9 Oct 2014 - 0:23

    Trop bow *-*

    Merci ~



    PA Casino 170221084427548922
    Writers World commence à ouvrir !
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Ven 10 Oct 2014 - 8:23

    Merci
    zbou
    zbou
    FémininAge : 30Messages : 83

    Ven 10 Oct 2014 - 19:07

    Merci :3
    ColorTime'Less
    ColorTime'Less
    FémininAge : 27Messages : 106

    Dim 12 Oct 2014 - 0:29

    Merci =)
    Anonymous
    Invité

    Jeu 30 Oct 2014 - 17:05

    Merci :3
    Riten
    Riten
    MasculinAge : 26Messages : 30

    Ven 31 Oct 2014 - 23:23

    Merci Wink
    Mzelle Machin
    Mzelle Machin
    FémininMessages : 118

    Dim 2 Nov 2014 - 18:30

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

    Lun 3 Nov 2014 - 11:38

    Merci :3
    Fayzl4D
    Fayzl4D
    MasculinAge : 28Messages : 84

    Dim 9 Nov 2014 - 22:58

    merci
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Dim 9 Nov 2014 - 23:01

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 16:53