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

    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
    Hayate747
    MasculinAge : 29Messages : 196

    le Mar 8 Juil 2014 - 14:43

    Merci !!
    Conradus
    FémininAge : 20Messages : 26

    le Mar 8 Juil 2014 - 19:34

    Merci
    avatar
    Yamashita
    FémininAge : 20Messages : 50

    le Mar 8 Juil 2014 - 20:25

    Merci beaucoup pour la PA *v*



    avatar
    Shuu-Shuu
    FémininAge : 22Messages : 199

    le Mer 9 Juil 2014 - 15:50

    oh merci beaucoup o/
    avatar
    Neko Mimi
    FémininAge : 28Messages : 162

    le Mer 9 Juil 2014 - 15:58

    Finalement ça sera la violette gros coup de coeur, merci **



    avatar
    DarkMasamune
    FémininAge : 26Messages : 57

    le Mer 9 Juil 2014 - 20:15

    Merci beaucoup ! C'est superbe, j'adore ♥ !
    avatar
    Immortaly
    FémininAge : 17Messages : 10

    le Mer 9 Juil 2014 - 22:53

    Trop cool *O*
    avatar
    Monaka
    FémininAge : 26Messages : 132

    le Ven 11 Juil 2014 - 9:33

    J4AIME BEAUCOUP §
    avatar
    Natsuya Gaïaguard
    FémininAge : 28Messages : 144

    le Ven 11 Juil 2014 - 13:13

    Très jolie !!



    avatar
    Selwyn
    MasculinAge : 22Messages : 72

    le Ven 11 Juil 2014 - 14:18

    Merci !
    avatar
    Clarisse
    FémininAge : 18Messages : 3938

    le Ven 11 Juil 2014 - 19:34

    Merci ! Very Happy
    avatar
    Mephitis.
    FémininAge : 20Messages : 46

    le Ven 11 Juil 2014 - 23:33

    Merci ! 8D
    avatar
    Adèle
    FémininAge : 27Messages : 96

    le Sam 12 Juil 2014 - 17:34

    Merci ♥
    avatar
    ClipClap
    FémininAge : 17Messages : 60

    le Sam 12 Juil 2014 - 17:48

    THAAAANNNNKS ! ♥



    avatar
    stubbornEmpire
    FémininAge : 18Messages : 38

    le Dim 13 Juil 2014 - 19:31

    Magnifique *O*
    Louanaka
    FémininAge : 20Messages : 24

    le Lun 14 Juil 2014 - 15:04

    Très joli, merci du partage !
    avatar
    Carcajou
    FémininAge : 29Messages : 59

    le Mar 15 Juil 2014 - 13:35

    Jolie ! Merci beaucoup  :hug2: 
    avatar
    Mimirage
    FémininAge : 26Messages : 17

    le Mar 15 Juil 2014 - 16:14

    Merchi beaucouuuuuuuuuup!!!!!
    avatar
    Loreleï
    FémininAge : 20Messages : 20

    le Mer 16 Juil 2014 - 20:09

    Merci pour ce partage ♥
    avatar
    Drizzle
    FémininAge : 20Messages : 135

    le Mer 16 Juil 2014 - 21:08

    Merci pour tes partages :p



    avatar
    Azuriel
    FémininAge : 23Messages : 129

    le Jeu 17 Juil 2014 - 16:41

    Merci à toi !
    avatar
    Dadash_Pearl
    FémininAge : 26Messages : 40

    le Jeu 17 Juil 2014 - 17:04

    Merci beaucoup Very Happy
    avatar
    Invité

    le Jeu 17 Juil 2014 - 18:10

    Merci !
    Claclou02
    FémininAge : 20Messages : 46

    le Jeu 17 Juil 2014 - 21:01

    Trop beau
    avatar
    Fyraliel
    FémininAge : 27Messages : 1424

    le Ven 18 Juil 2014 - 1:37

    merci, je trouve ton travail vraiment génial !!!



    Contenu sponsorisé


      La date/heure actuelle est Mar 13 Nov 2018 - 5:36