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.

anipassion.com

    PA en trois colonnes violette

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9757

    le Ven 9 Mai 2014 - 20:05

    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
    Cruelly
    FémininAge : 25Messages : 2572

    le Sam 10 Mai 2014 - 2:41

    Ohw mais elle est superbe cella aussi ! :)
    Ch'peut t'enlever ? Very Happy



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Halloween
    FémininAge : 24Messages : 9757

    le Sam 10 Mai 2014 - 12:17

    Non désolée xD
    Oh, NU beug =O




    < / Libre service codage >
    avatar
    Cruelly
    FémininAge : 25Messages : 2572

    le Sam 10 Mai 2014 - 20:41

    Ohh dommage Razz
    Elle tout de même magnifique comme tous le reste de tes codes :)



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Shuna
    FémininAge : 24Messages : 135

    le Jeu 29 Mai 2014 - 17:50

    j'adore, c'est magnifique *o*
    avatar
    Ishyyn
    FémininAge : 23Messages : 90

    le Ven 30 Mai 2014 - 14:29

    Merci o/
    Løve
    MasculinAge : 23Messages : 189

    le Dim 1 Juin 2014 - 19:59

    Très jolie PA *o*
    avatar
    alex24d
    FémininAge : 31Messages : 95

    le Jeu 5 Juin 2014 - 17:05

    Toujours aussi magnifique un jour j'arriverais à faire comme toi un jour...
    avatar
    Neva
    FémininAge : 27Messages : 18564

    le Jeu 12 Juin 2014 - 11:28

    Merci Hallow, je déplace



     
    avatar
    Gabriiielle
    FémininAge : 27Messages : 53

    le Jeu 12 Juin 2014 - 14:21

    merci :)
    avatar
    LinaK
    FémininAge : 28Messages : 53

    le Jeu 12 Juin 2014 - 14:38

    Merci j'aime beaucoup celle-ci aussi ^^





    avatar
    Mircalla
    FémininAge : 25Messages : 17

    le Jeu 12 Juin 2014 - 20:29

    C'est vraiment super !
    avatar
    Hwan-Leo Flores
    FémininAge : 25Messages : 275

    le Ven 13 Juin 2014 - 11:47

    Encore du très bon travail *.*



    avatar
    Raween
    FémininAge : 26Messages : 112

    le Ven 13 Juin 2014 - 14:20

    Merci beaucoup ^^
    avatar
    Nathouille
    FémininAge : 27Messages : 70

    le Ven 13 Juin 2014 - 16:43

    Celle-ci correspond à 100%, je pense. Merci ! =D
    avatar
    Susan Storm
    FémininAge : 39Messages : 77

    le Sam 14 Juin 2014 - 14:43

    Mercii ! *o*
    avatar
    Piratress
    FémininAge : 21Messages : 215

    le Sam 14 Juin 2014 - 18:18

    Merci elle est super ! =)
    avatar
    PuppetBlue
    FémininAge : 26Messages : 111

    le Sam 14 Juin 2014 - 23:45

    Merci *_*



    avatar
    Tatia38
    FémininAge : 29Messages : 308

    le Dim 15 Juin 2014 - 11:07

    Sublime merci pour le partage
    avatar
    Delort.
    MasculinAge : 23Messages : 19

    le Dim 15 Juin 2014 - 11:59

    Merci bien !
    avatar
    Liberty Grim
    FémininAge : 20Messages : 128

    le Dim 15 Juin 2014 - 15:02

    Merci ** C'est trop beau
    avatar
    Miss Kiba
    FémininAge : 25Messages : 38

    le Lun 16 Juin 2014 - 10:56

    Merci =)
    avatar
    Neko-Rika
    FémininAge : 20Messages : 115

    le Lun 16 Juin 2014 - 13:25

    Trop beau *-* Merci !
    avatar
    Sweetie Plum
    FémininAge : 24Messages : 27

    le Lun 16 Juin 2014 - 16:45

    Elle est vraiment classe comme PA !  :bave: Merci encore de la mettre en libre service ! ^.^
    avatar
    Yukionna
    FémininAge : 18Messages : 75

    le Lun 16 Juin 2014 - 18:42

    Magnifique, superbe boulot, merci :3



    Contenu sponsorisé


      La date/heure actuelle est Mar 18 Déc 2018 - 18:26