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.


    PA Casino

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le 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

    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Sam 31 Oct 2015 - 19:16

    Jolie :)
    avatar
    Zoé
    FémininAge : 19Messages : 185

    le Mer 18 Nov 2015 - 15:09

    merci !



    Alancar
    MasculinAge : 21Messages : 57

    le Lun 1 Fév 2016 - 19:57

    Merci beaucoup
    avatar
    Xyyny
    FémininAge : 27Messages : 59

    le Mer 20 Avr 2016 - 17:23

    Marchiiii :)
    avatar
    defenrir
    MasculinAge : 35Messages : 73

    le Lun 9 Mai 2016 - 16:25

    mercii
    avatar
    Yuuki Emna
    FémininAge : 22Messages : 38

    le Mar 31 Mai 2016 - 21:00

    Merci!^^
    avatar
    Fuyuka
    FémininAge : 23Messages : 62

    le Dim 12 Juin 2016 - 9:29

    Merci beaucoup !!
    avatar
    Shanyme Thibolt
    FémininAge : 24Messages : 149

    le Mar 4 Oct 2016 - 22:43

    Icerm ruop el egatrap.
    avatar
    Lyber
    MasculinAge : 26Messages : 14

    le Mer 5 Oct 2016 - 4:53

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

    le Ven 21 Oct 2016 - 16:32

    merci du partage !
    avatar
    Azaral
    FémininAge : 22Messages : 69

    le Sam 7 Jan 2017 - 20:04

    merci !
    avatar
    Thanos
    MasculinAge : 22Messages : 84

    le Ven 10 Fév 2017 - 13:44

    Merci
    avatar
    Lalia
    FémininAge : 18Messages : 40

    le Sam 25 Fév 2017 - 15:22

    Merci x3
    avatar
    Dark Fairy
    FémininAge : 20Messages : 226

    le Lun 20 Mar 2017 - 22:30

    Merci!
    avatar
    Misery Devil
    FémininAge : 28Messages : 163

    le Mar 2 Mai 2017 - 16:32

    jolie



    avatar
    Momiji-chan
    FémininAge : 20Messages : 38

    le Sam 6 Mai 2017 - 17:44

    Merci pour ce code :)
    avatar
    Yuuki
    Age : 23Messages : 26

    le Sam 13 Mai 2017 - 23:11

    Merci n.n
    avatar
    Kiryuu02
    FémininAge : 29Messages : 32

    le Dim 4 Juin 2017 - 15:29

    Merci
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Sam 8 Juil 2017 - 18:13

    Merci du partage
    avatar
    Nyls
    MasculinAge : 17Messages : 28

    le Sam 9 Sep 2017 - 14:49

    merciiiii
    avatar
    Lamia
    FémininAge : 22Messages : 144

    le Jeu 14 Sep 2017 - 8:41

    Merci pour le partage !
    avatar
    Sophie2
    FémininAge : 54Messages : 63

    le Ven 29 Sep 2017 - 18:10

    Merci
    avatar
    Sandym
    FémininAge : 31Messages : 20

    le Jeu 12 Oct 2017 - 22:49

    merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 3:02