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 : 9757

    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
    Jupanda
    FémininAge : 18Messages : 72

    le Sam 30 Déc 2017 - 15:02

    trop beau, merchii *o*
    avatar
    loo chan
    FémininAge : 17Messages : 4

    le Sam 6 Jan 2018 - 16:58

    C'est vraiment super beau, bravo !
    avatar
    Orochimaru
    FémininAge : 28Messages : 209

    le Mer 17 Jan 2018 - 19:19

    J'Adore la simplicité de la fiche :)
    Beau travail et merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Utahime
    FémininAge : 25Messages : 76

    le Dim 21 Jan 2018 - 2:56

    Merci beaucoup! Very Happy
    avatar
    Alouarn
    MasculinAge : 27Messages : 127

    le Dim 21 Jan 2018 - 12:32

    Merci beaucoup ! **

    C'est magnifique ! **
    avatar
    Enelia
    FémininAge : 20Messages : 26

    le Mar 20 Fév 2018 - 18:33

    Merci ! :3
    avatar
    Ozymandias
    MasculinAge : 20Messages : 44

    le Jeu 22 Fév 2018 - 12:03

    merci !
    avatar
    TWISTY.RAIN
    FémininAge : 22Messages : 63

    le Ven 23 Fév 2018 - 20:43

    Très joli :heart:
    Merci beaucoup



    avatar
    Nélie Reinart
    FémininAge : 19Messages : 34

    le Lun 19 Mar 2018 - 14:49

    thx
    avatar
    NanoiHime
    FémininAge : 20Messages : 563

    le Jeu 22 Mar 2018 - 19:05

    mercii



    avatar
    Luune
    FémininAge : 30Messages : 143

    le Jeu 29 Mar 2018 - 19:09

    Waaah c'est bô *_*
    avatar
    defenrir
    MasculinAge : 35Messages : 76

    le Mar 10 Avr 2018 - 18:00

    merci !
    avatar
    Bridgess
    FémininAge : 20Messages : 58

    le Sam 21 Avr 2018 - 11:44

    J'aime beaucoup ! Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 13 Déc 2018 - 19:34