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 en trois colonnes violette

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Ven 9 Mai 2014 - 20:05

    Rappel du premier message :

    Plop,

    Suite à une demande voici le LS qui en découle.

    Page d'accueil


    Version  phpBB2 ▬ CSS & HTML ▬ Info-bulles

    Aperçu ▬ www


    CSS
    Code:
       /***************************** MISE EN FORME PA *****************************/

        .fond_PA {
          background-color: #332129;
          padding: 25px;
          text-align: justify;
        }

        .fond_PA a {
          color: #A2778B !important;
          text-decoration: none !important;
        }

        .titrePA {
          color: #A2778B;
          font-size: 30px;
          font-family: 'Dancing Script', cursive;
        }

        .sous-titresPA {
          color: #E1D5DB;
          font-size: 25px;
          font-family: 'Dancing Script', cursive;
          text-align: center;
        }

        .blocsPA {
          width: 200px;
          overflow: auto;
          background-color: #3D2A33;
          padding: 25px;
          text-align: justify;
          color: #E6DBE0;
        }

        /*** IMAGES DU STAFF ***/

        .imgPA {
          width: 100px;
          height: 100px;
        }

        .info {
          position: relative;
          z-index: 24;
          text-decoration: none;
        }
        
       c.info:hover {
          z-index: 25;
        }
        
       c.info span {
          display: none;
        }
        
       c.info:hover span {
          display: block;
          position: absolute;
          top: -9em;
          left: -0em;
          width: 100px;
          height: 100px;
          background-color: #3D2A33;
          color: #F3F3F3;
          text-align: center;
          font-weight: none;
        }
        

       /***************************** FIN MISE EN FORME PA *****************************/

    PA
    Code:
       <div class="fond_PA">
          
          <center>
              
              <div class="titrePA">
                  Bienvenue sur Quatre Clans, une nouvelle vie
              </div>
               <br /><br />
              <table>
                
                <tbody>
                    
                    <tr>
                      
                      <td>
                          
                          <div class="sous-titresPA">
                              Contexte
                          </div>
                          
                          <div class="blocsPA" style="height: 400px;">
                              Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. <a href="#">La suite</a>
                          </div>
                          
                       </td>
                      
                      <td style="width: 30px;">
                          
                       </td>
                      
                      <td>
                          
                          <div class="sous-titresPA">
                              Nouvelles
                          </div>
                          
                          <div class="blocsPA" style="height: 120px; width: 120px !important;">
                              <span style="color: #A2778B;">XX/XX</span> Nouveauté<br /><span style="color: #A2778B;">XX/XX</span> Nouveauté<br /><span style="color: #A2778B;">XX/XX</span> Nouveauté<br /><span style="color: #A2778B;">XX/XX</span> Nouveauté<br /><span style="color: #A2778B;">XX/XX</span> Nouveauté
                          </div><br /><br />
                          <div class="sous-titresPA">
                              Liens utiles
                          </div>
                          
                          <div class="blocsPA" style="height: 60px; width: 120px !important; text-align: center;">
                              <a href="#">www</a><br /> <a href="#">www</a><br /> <a href="#">www</a><br /> <a href="#">www</a><br /> <a href="#">www</a><br />
                          </div>
                           <br /><br />
                          <div class="sous-titresPA">
                              Top-sites
                          </div>
                          
                          <div class="blocsPA" style="padding: 15px !important; width: 140px !important;">
                            
                            <center>
                                 <a href="#"><img src="http://i61.servimg.com/u/f61/13/51/98/19/i_icon10.gif" /></a> <a href="#"><img src="http://i61.servimg.com/u/f61/13/51/98/19/i_icon10.gif" /></a>
                             </center>
                            
                         </div>
                          
                       </td>
                      
                      <td style="width: 30px;">
                          
                       </td>
                      
                      <td>
                          
                          <div class="sous-titresPA">
                              Le staff
                          </div><br />
                          <center>
                              <nobr><c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c></nobr><br /> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <c class="info"><img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br />Rang </span></c> <br />
                          </center>
                          
                          <div class="sous-titresPA">
                              Les amis
                          </div>
                          
                          <div class="blocsPA" style="max-height: 30px; padding: 15px; width: 270px !important;">
                              <nobr><marquee><a href="#"><img src="http://img4.hostingpics.net/pics/607783miniban5.jpg" /></a> <a href="#"><img src="http://img4.hostingpics.net/pics/607783miniban5.jpg" /></a> <a href="#"><img src="http://img4.hostingpics.net/pics/607783miniban5.jpg" /></a> <a href="#"><img src="http://img4.hostingpics.net/pics/607783miniban5.jpg" /></a> <a href="#"><img src="http://img4.hostingpics.net/pics/607783miniban5.jpg" /></a> </marquee></nobr>
                          </div>
                           <br /><br />
                          <table>
                            
                            <tbody>
                                
                                <tr>
                                  
                                  <td>
                                       <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />
                                   </td>
                                  
                                  <td>
                                      
                                      <div class="blocsPA" style="width: 170px !important; height: 50px;">
                                          Verbis falli et tamen ego dicit non dicit philosopho vult afferat inquam a oratio afferat philosopho igitur ego sententiae philosophi istius non si possumus philosopho istius locis afferat offendit tamen philosopho non satisfacit istius tot sed intellegam philosopho igitur philosophi si offendit igitur falli philosopho philosopho et verbis admodum fallare aeque eloquentiam complectitur philosophi re non satisfacit a igitur quod intellegam complectitur ego plane admodum offendit tamen offendit flagitem afferat satisfacit quidem Torquate falli locis non quot mihi ego homines non eloquentiam sententiae et non non offendit quod ego admodum afferat oratio igitur tot satisfacit sententiae tot me vult quod.
                                      </div>
                                      
                                   </td>
                                  
                               </tr>
                                
                             </tbody>
                            
                         </table>
                          
                       </td>
                      
                   </tr>
                    
                 </tbody>
                
             </table>
              
           </center>
        </div><link href="http://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css" />


    Vos commentaires et remerciements sont toujours bienvenus ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Halloween le Jeu 13 Avr 2017 - 20:27, édité 1 fois




    < / Libre service codage >
    avatar
    [W]endy
    FémininAge : 27Messages : 117

    le Lun 16 Juin 2014 - 20:18

    C'est beau <33
    avatar
    HEAVEN.SPIRIT
    MasculinAge : 23Messages : 37

    le Mar 17 Juin 2014 - 16:21

    merci du partage =) c'est très sympa
    avatar
    Lestrange
    FémininAge : 22Messages : 162

    le Mar 17 Juin 2014 - 18:57

    Tu nous gâte sérieux ! Merci beaucoup ♥
    Aïda
    FémininAge : 23Messages : 35

    le Mar 17 Juin 2014 - 23:47

    simple et efficace... Parfait!

    Merciii <3
    avatar
    Momochii
    FémininAge : 25Messages : 7

    le Mer 18 Juin 2014 - 1:41

    merci ♥
    avatar
    Pooni
    FémininAge : 20Messages : 39

    le Mer 18 Juin 2014 - 21:44

    Superbe ! Merci beaucoup ! :3
    Akinimod
    FémininAge : 25Messages : 8

    le Mer 18 Juin 2014 - 23:10

    merci pour le code!
    avatar
    GreenGage
    FémininAge : 25Messages : 73

    le Jeu 19 Juin 2014 - 0:54

    Merci beaucoup !
    avatar
    DDril
    MasculinAge : 33Messages : 34

    le Jeu 19 Juin 2014 - 13:07

    Merci !
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1382

    le Jeu 19 Juin 2014 - 15:29

    Très jolie PA!! Sobre et élégante à la fois comme toi <3 Merci de faire partager tes plus beaux codes :)

    avatar
    SamyChou
    FémininAge : 21Messages : 31

    le Jeu 19 Juin 2014 - 15:37

    Elle est vraiment magnifique ! Un grand merci pour le partage !
    avatar
    Tsukasa
    MasculinAge : 25Messages : 52

    le Ven 20 Juin 2014 - 9:33

    Superbe pa, merci ~
    avatar
    Smokerlilitrope
    FémininAge : 29Messages : 45

    le Sam 21 Juin 2014 - 8:09

    Elle est très belle *o*
    avatar
    Hyl
    FémininAge : 23Messages : 81

    le Lun 23 Juin 2014 - 0:47

    Merci du partage !




    » H y l



    Spoiler:
    avatar
    Skitty
    FémininAge : 21Messages : 50

    le Lun 23 Juin 2014 - 2:41

    C'est parfait, exactement ce que je cherchais ! Merci :3
    avatar
    Invité

    le Lun 23 Juin 2014 - 9:09

    thanks !
    avatar
    Pinku
    FémininAge : 19Messages : 139

    le Lun 23 Juin 2014 - 10:22

    Magnifique ! C'est exactement ce que je cherchais !
    avatar
    Hashirama
    MasculinAge : 20Messages : 63

    le Lun 23 Juin 2014 - 17:32

    thx
    avatar
    Likilou
    MasculinAge : 24Messages : 301

    le Lun 23 Juin 2014 - 18:54

    merci



    avatar
    Amasis
    FémininAge : 45Messages : 307

    le Lun 23 Juin 2014 - 22:26

    Elle est simple et pratique. Merci beaucoup!
    avatar
    Loupiotte-Fr
    FémininAge : 22Messages : 27

    le Mar 24 Juin 2014 - 17:52

    Merci *O*



    Once Upon a Time
    ... Réécrit l'histoire ...
    avatar
    Euterpe
    FémininAge : 31Messages : 303

    le Jeu 26 Juin 2014 - 12:05

    magnifique merci
    avatar
    Ayane Jun
    FémininAge : 25Messages : 81

    le Ven 27 Juin 2014 - 12:08

    Merciii du partage !
    avatar
    Khaina
    FémininAge : 22Messages : 13

    le Ven 27 Juin 2014 - 17:09

    Merci
    avatar
    Kau
    FémininAge : 16Messages : 148

    le Ven 27 Juin 2014 - 17:42

    C'est magnifique *^* Merci *Q*
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:07