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
    Aleeks
    MasculinAge : 27Messages : 9

    le Ven 18 Juil 2014 - 2:48

    Magnifique
    avatar
    mikalus
    MasculinAge : 47Messages : 92

    le Ven 18 Juil 2014 - 5:30

    plop



    avatar
    Insanys
    FémininAge : 17Messages : 13

    le Ven 18 Juil 2014 - 17:21

    C'est trop beau!
    avatar
    Zappy
    FémininAge : 18Messages : 55

    le Sam 19 Juil 2014 - 12:34

    Merciii
    avatar
    Nalyana
    FémininAge : 21Messages : 26

    le Dim 20 Juil 2014 - 17:39

    Simple et élégante, j'adore ! Merci :)
    avatar
    Kiki85
    MasculinAge : 23Messages : 389

    le Dim 20 Juil 2014 - 18:50

    Merci :)
    avatar
    Miss Julie
    FémininAge : 35Messages : 12

    le Lun 21 Juil 2014 - 16:10

    Magnifique !!
    avatar
    LilyPanda
    FémininAge : 21Messages : 10

    le Mar 22 Juil 2014 - 16:01

    Superbe ! Très joli :)

    Merci beaucoup !!!
    avatar
    Fayzl4D
    MasculinAge : 22Messages : 84

    le Mar 22 Juil 2014 - 20:24

    merci
    avatar
    Sorako
    FémininAge : 20Messages : 94

    le Mer 23 Juil 2014 - 13:33

    Magnifique ! Merci du partage !
    avatar
    Dacina moe
    FémininAge : 39Messages : 169

    le Mer 23 Juil 2014 - 16:22

    Merci :)
    avatar
    louha
    FémininAge : 30Messages : 213

    le Mer 23 Juil 2014 - 17:50

    merci !
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Mer 23 Juil 2014 - 20:24

    Merci ! ^^
    avatar
    Dagaa
    FémininAge : 17Messages : 16

    le Jeu 24 Juil 2014 - 12:32

    toujours aussi beau c:
    avatar
    LyN[ss]
    FémininAge : 26Messages : 105

    le Sam 26 Juil 2014 - 22:46

    Merci pour le partage ! =)
    avatar
    >> Chiro <<
    MasculinAge : 25Messages : 83

    le Dim 27 Juil 2014 - 10:06

    merci
    avatar
    Asriel
    FémininAge : 22Messages : 120

    le Dim 27 Juil 2014 - 17:03

    Merci du partage ! :)



    avatar
    Naïshy
    FémininAge : 16Messages : 65

    le Dim 27 Juil 2014 - 17:15

    Nice :3
    avatar
    Yuuki
    Age : 23Messages : 26

    le Lun 28 Juil 2014 - 22:10

    Merci Very Happy J'avais vraiment la flemme de coder la mienne entièrement, donc je vais me baser sur ce code ci et modifier les couleurs et tout tout n_n (mais garder le crédit hum u_u)
    avatar
    Evydence
    FémininAge : 21Messages : 60

    le Mar 29 Juil 2014 - 21:23

    Merci beaucoup!
    avatar
    LightGlace
    FémininAge : 25Messages : 43

    le Ven 1 Aoû 2014 - 16:56

    magnifique Wink
    avatar
    LightGlace
    FémininAge : 25Messages : 43

    le Lun 4 Aoû 2014 - 13:46

    superbe merci !
    avatar
    Stitch56
    FémininAge : 24Messages : 200

    le Lun 4 Aoû 2014 - 21:25

    Merci ♥
    avatar
    SpicAsh
    FémininAge : 21Messages : 170

    le Lun 4 Aoû 2014 - 23:51

    merci !
    avatar
    Jacoon
    FémininAge : 21Messages : 147

    le Mer 6 Aoû 2014 - 9:09

    Celle-ci est aussi très belle, merci. **
    Contenu sponsorisé


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