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 grise simple

    Lihuén
    Lihuén
    FémininAge : 35Messages : 544

    Mar 4 Nov 2014 - 5:50

    Rappel du premier message :

    Bonjour !

    Voici une PA réalisée suite à la demande de ~Nodoka~ (:

    Voici ce que ça donne : Aperçu

    Lorsque le curseur passe sur les trois ronds du bas, ceux-ci tournent.


    Merci de ne pas enlever le crédit de N-U !

    Si vous rencontrez un problème, vous pouvez venir l'exposer ici.



    HTML

    (À coller dans Panneau d'administration -> Affichage -> Page d'accueil -> Généralités)

    Code:
          <link href="//fonts.googleapis.com/css?family=Fredericka+the Great:400" rel="stylesheet" type="text/css" />   
    <div id="fond_PA">
                                                                                                          
       <div class="petit_bloc_PA">
                                                            <span class="titre_PA">Contexte </span>                                     
          <div id="contexte_PA">
                                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed neque a ante gravida euismod. Nam porttitor mauris vel justo tempor, a pharetra tortor scelerisque. Integer malesuada urna vel lectus gravida consequat. Nulla tempus ullamcorper ex sit amet fermentum. Ut pellentesque vitae erat eget egestas. Aliquam at neque dui. Maecenas hendrerit gravida lorem sit amet placerat. Phasellus iaculis dapibus nisl in convallis. Vestibulum bibendum enim ut mollis faucibus. Morbi luctus sem non tellus porta semper. Nullam vehicula ultricies quam, eu fermentum massa sagittis sit amet. Sed eleifend lobortis tincidunt. Nunc vulputate eros in erat imperdiet, id pellentesque enim imperdiet. Aenean vitae finibus erat, eu laoreet ipsum. Curabitur accumsan dolor eros, in hendrerit dui blandit eu. Morbi lectus dui, euismod eget venenatis ac, mollis eget purus. Nam sollicitudin eu massa sed porttitor. Cras lobortis quam vitae nulla condimentum, in commodo enim lobortis. Curabitur ut leo ligula. Nunc maximus venenatis orci nec sagittis.                                       
          </div>
                                                                                           
       </div>
                                                                                                    
       <div class="grand_bloc_PA">
                                                            <span class="titre_PA">Staff </span>                       
          <div id="img_staff">
                                     <a href="#"><img src="http://1.bp.blogspot.com/_76NVqbOpM2c/TRkdt9DxyyI/AAAAAAAAAOM/Bi0uq2EFpeQ/s400/gray_wolf.jpg" /></a><a href="#"><img src="http://1.bp.blogspot.com/_76NVqbOpM2c/TRkdt9DxyyI/AAAAAAAAAOM/Bi0uq2EFpeQ/s400/gray_wolf.jpg" /></a>             
          </div>
                                                           
       </div>
                                                                                                            
       <div class="petit_bloc_PA">
                                                            <span class="titre_PA">Météo</span>             
          <div id="meteo_PA">
               <img src="http://ales.meteoa12jours.net/wicons/wsymb8_0004_black_low_cloud.png" /><br /> Le ciel est nuageux, et il fait frais. 
          </div>
                     
       </div>
                                                                                                    
       <div class="grand_bloc_PA">
                                                            <span class="titre_PA">Actualités</span>                                 
          <div id="actualites_PA">
                                                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />    Suspendisse et lectus nec massa commodo ornare feugiat ac augue.<br />    Duis quis erat a turpis condimentum lobortis.<br />Mauris vel mauris vel dui suscipit pellentesque eget quis ante.    <br />Vivamus at purus aliquam, rhoncus turpis in, vulputate enim.    <br />Sed fringilla arcu non dictum sagittis.    <br />Suspendisse ac nisl et dui mollis tincidunt.    <br />Sed sed neque quis mi finibus varius sed eget odio.<br />    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />    Vivamus eget augue consectetur, viverra eros quis, efficitur dolor.<br />    Donec at ligula eget est suscipit tempus quis a quam.<br />    Fusce convallis justo sed tellus tempus, eu sagittis turpis tincidunt.<br />    Aliquam eu ante ac urna rhoncus feugiat.<br />    Duis mattis arcu sed ex fermentum condimentum.<br />    Sed malesuada sapien sed augue mollis consectetur.<br />    Phasellus congue lectus eu urna auctor facilisis.<br />    Pellentesque scelerisque quam et efficitur varius.<br />    Maecenas quis mauris vitae arcu ornare sodales faucibus vel massa.<br />                             
          </div>
                                                                                       
       </div>
                                                                                                            
       <div id="partenaires_PA">
                                                            <span class="titre_PA">Partenariats & votes </span>                                         
          <div id="boutons_part">
                                                           <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a>                                         
          </div>
                                                                                             
          <div id="boutons_vote">
                                                           <a href="#"><img src="http://www.colormake.com/wp-content/uploads/2014/02/631px-Paw_Animal_Rights_symbol.png" /></a><a href="#"><img class="img_part" src="http://www.colormake.com/wp-content/uploads/2014/02/631px-Paw_Animal_Rights_symbol.png" /></a>                                         
          </div>
                                                                                                 
       </div>
                                 <a href="#"><img class="clans_PA" src="http://www.animalcorner.co.uk/wildlife/wolves/graphics/wolf2.jpg" /></a><a href="#"><img class="clans_PA" src="http://www.animalcorner.co.uk/wildlife/wolves/graphics/wolf2.jpg" /></a><a href="#"><img class="clans_PA" src="http://www.animalcorner.co.uk/wildlife/wolves/graphics/wolf2.jpg" /></a><br /><span style="color: #959595; font-size: 10px;">(c) Lihuén sur <a href="http://www.never-utopia.com">Never-Utopia</a></span>                                       
    </div>


    CSS

    (À coller dans Panneau d'administration -> Affichage -> Images et Couleurs -> Couleurs -> Feuille de style CSS)

    Code:
        /*---------------- MISE EN FORME PA -----------------*/
        #fond_PA {
          width: 730px;
          margin: auto;
          background-color: #555555;
          font-size: 11px;
        }
        .titre_PA {
          display: block;
          background-color: #e0e0e0;
          text-align: center;
          font-family: Fredericka the Great;
          font-size: 20px;
        }
        .petit_bloc_PA {
          width: 200px;
          height: 195px;
          background-color: #bdbdbd;
          display: inline-block;
          box-shadow: 0px 0px 2px black;
          margin: 20px 10px 10px 20px;
          position: relative;
        }
        .grand_bloc_PA {
          width: 460px;
          height: 195px;
          background-color: #bdbdbd;
          display: inline-block;
          box-shadow: 0px 0px 2px black;
          margin: 10px 20px 10px 10px;
          position: relative;
        }
        /* MISE EN FORME DU CONTEXTE */
        #contexte_PA {
          padding: 10px;
          text-align: justify;
          height: 150px;
          width: 180px;
          overflow: auto;
          position: absolute;
          color: #3c3c3c;
        }
        /* MISE EN FORME DU STAFF */
        #img_staff {
          height: 195px;
          width: 460px;
          position: absolute;
        }
        #img_staff img {
          height: 150px;
          margin: 10px 20px 0px 20px;
        }
        /* MISE EN FORME METEO */
        #meteo_PA {
          position: absolute;
          text-align: center;
          padding: 5px;
        }
        #meteo_PA img {
          width: 100px;
        }
        /* MISE EN FORME ACTUALITES */
        #actualites_PA {
          padding: 10px;
          text-align: justify;
          height: 150px;
          width: 440px;
          overflow: auto;
          position: absolute;
          color: #3c3c3c;
        }
        /* MISE EN FORME PARTENAIRES */
        #partenaires_PA {
          width: 680px;
          background-color: #bdbdbd;
          display: inline-block;
          box-shadow: 0px 0px 2px black;
          margin: 10px 20px 20px 20px;
        }
        #boutons_part {
          display: inline-block;
          margin-right: 60px;
        }
        #boutons_part img {
          margin: 15px 6px 10px 6px;
        }
        #boutons_vote {
          display: inline-block;
          margin-left: 30px;
        }
        #boutons_vote img {
          width: 30px;
          margin: 10px 15px 10px 0px;
        }
        /* MISE EN FORME TROIS BOUTONS QUI TOURNENT */
        .clans_PA {
          width: 100px;
          height: 100px;
          border-radius: 50px;
          margin: 10px 5px 20px 5px;
          -webkit-transition: 1s ease;
          transition: 1s ease;
        }
        .clans_PA:hover {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }

    Vos commentaires et remerciements sont toujours bienvenus ^^



    picka234
    picka234
    FémininAge : 59Messages : 636

    Lun 15 Juin 2015 - 9:13

    merci
    Thalia Grace
    Thalia Grace
    FémininAge : 28Messages : 66

    Ven 10 Juil 2015 - 17:56

    Merci beaucoup !
    v-r0
    v-r0
    FémininAge : 32Messages : 40

    Dim 9 Aoû 2015 - 18:05

    J'adore!
    Anonymous
    Invité

    Dim 9 Aoû 2015 - 18:31

    Merci ⊙ω⊙
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Dim 9 Aoû 2015 - 20:51

    Sublime merci beaucoup
    Galxas
    Galxas
    MasculinAge : 28Messages : 40

    Mar 18 Aoû 2015 - 3:18

    Wahou, j'adore ! Merci ! =)
    Shaïka
    Shaïka
    FémininAge : 27Messages : 79

    Mer 19 Aoû 2015 - 15:10

    Sympa *^* Merci !
    ~Nodoka~
    ~Nodoka~
    FémininAge : 27Messages : 185

    Mer 23 Sep 2015 - 12:27

    encore merci elle me sert toujours ^^
    Neyotox
    Neyotox
    MasculinAge : 31Messages : 37

    Mar 29 Sep 2015 - 4:04

    Vraiment bien...merci
    Bully
    Bully
    FémininAge : 22Messages : 39

    Mer 30 Sep 2015 - 14:00

    Merci !
    Neya
    Neya
    FémininAge : 25Messages : 164

    Mer 14 Oct 2015 - 19:06

    Merci
    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Sam 31 Oct 2015 - 23:26

    jolie
    Bouffe Tout
    Bouffe Tout
    MasculinAge : 32Messages : 17

    Ven 13 Nov 2015 - 0:59

    Merci j'essaie ! Very Happy
    Rhoswen Fay
    Rhoswen Fay
    FémininAge : 37Messages : 66

    Jeu 10 Déc 2015 - 23:38

    merci
    Vador
    Vador
    MasculinAge : 24Messages : 64

    Ven 11 Déc 2015 - 12:55

    Merci
    Sly King
    Sly King
    FémininAge : 28Messages : 75

    Ven 11 Déc 2015 - 14:28

    C'est simple et efficace. *-* Merci du partage !
    Nord
    Nord
    MasculinAge : 24Messages : 169

    Sam 12 Déc 2015 - 20:29

    C'est magnifique, merci !
    £ternal_$unshine
    £ternal_$unshine
    FémininAge : 31Messages : 69

    Ven 1 Jan 2016 - 15:42

    Merci pour la PA :)



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    PA grise simple - Page 3 78216279872221
    Cassisse
    Cassisse
    FémininAge : 32Messages : 130

    Sam 2 Jan 2016 - 22:03

    joliiiee
    Camomille
    Camomille
    FémininAge : 20Messages : 62

    Lun 4 Jan 2016 - 19:21

    Waw ! Je me permets de changer les images pour un forum que j'aime beaucoup, je te dis un gros merci on en avait bien besoin ! Elle est juste magnifique Very Happy !
    Whit
    Whit
    FémininAge : 27Messages : 154

    Mer 6 Jan 2016 - 23:12

    Merci !
    Anonymous
    Invité

    Jeu 7 Jan 2016 - 22:30

    merci du partage <3
    Foudy
    Foudy
    FémininAge : 20Messages : 14

    Mer 13 Jan 2016 - 16:06

    C'est très joli



    PA grise simple - Page 3 Sans-t11
    didicmy
    didicmy
    FémininAge : 33Messages : 74

    Lun 18 Jan 2016 - 19:33

    Merci du partage Very Happy
    Kishi
    Kishi
    MasculinAge : 36Messages : 9

    Mar 19 Jan 2016 - 1:05

    Merci... Je vais tester ce codage sur mon forum et l'adapter...
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 11:54