AccueilDernières imagesRechercherS'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.


    Page d'accueil toute simple

    Célestine
    Célestine
    FémininAge : 26Messages : 51

    Sam 22 Nov 2014 - 3:11

    Salut tout le monde !
    Je poste mon premier LS sur le forum cheers

    C'est la toute première page d'accueil que je crée, j'espère qu'elle vous plaira bien qu'elle soit très simple (elle ne contient que 3 blocs).
    Le code est assez simple à modifier, je pense, et plutôt clair, même si ça m'a pris énormément de temps pour l'écrire (vu que je suis toujours une "novice") hahaha.
    >> j'ai laissé le texte et les images de départ dans le code (par flemme de tout effacer je vous l'accorde haha), j'espère que ça ne dérange pas Razz . C'est une page d'accueil que j'ai faite il y a un bon moment pour un de mes forums qui n'a malheureusement pas été actif.
    Vous pouvez modifier les couleurs, la taille des blocs si vous le souhaitez, les polices, etc.
    Bref; adaptez ce code à vos envies ! N'oubliez pas de créditer Never-Utopia ! Very Happy

    Et puis, n'hésitez pas à dire merci si la p.a. vous a plu Wink
    La page d'accueil
    Images du staff au survol



    Les codes


    Message sur la page d'accueil:
    Code:
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />   
    <table style="margin: auto;" cellspacing="10">
                                  
       <tbody>
                                           
          <tr>
                                                    
             <td colspan="3">
                                                             
                <div class="nomfow">
                                             nous te souhaitons la bienvenue au pensionnat seido, {USERNAME}                       
                </div>
                                                         
             </td>
                                                
          </tr>
                                           
          <tr>
                                                    
             <td>
                                                             
                <div class="bloc2">
                                                                      
                   <div class="titrep">
                                                    contexte du forum                         
                   </div>
                                                                      
                   <div class="bloc2texte">
                                                                                                          <br />Bienvenue dans l'un des lycées les plus prestigieux du Japon ! Le niveau d'études y est très élevé, le corps enseignant visant à offrir à ses étudiants la meilleure formation possible pour pouvoir atteindre les universités les plus compétentes du pays. Pourtant, l'école a toujours accueilli un grand nombre de types d'élèves différents : des adolescents de bonne famille aux voyous et bagarreurs invétérés, tout le monde était accepté, à condition d'avoir un potentiel dans un domaine quelconque. Un grand nombre de clubs existent ou peuvent être créés, tels que le club de journalisme, d'échecs, de lecture, de cinéma...etc. Chaque passion peut être représentée par un club, pour autant qu'il y ait assez d'élèves pour la célébrer. Sachez, chers étudiants, que c'est vous tous, autant que vous êtes, qui faîtes vivre cette école, alors soyez imaginatifs dans ce que vous voulez créer, chaque pierre ajoutée à l'édifice ne peut être que constructive ! <br /><br />                            <a style="margin: auto;" href="http://pensionnat-seido.forumgratuit.fr/t2-le-lycee-seido?tid=75221d9d102504b18b37bedbb464c4ba">La suite ?</a> <br /> 
                   </div>
                                          
                </div>
                                                         
             </td>
                                                    
             <td>
                                                             
                <div class="bloc3">
                                                                      
                   <div class="titrep">
                                                    nouveautés                         
                   </div>
                                             <br />12.07.14 - Bienvenue à Moeko !<br />10.07.14 - Bienvenue à Nightmare !<br />10.07.14 - Bienvenue à Alice !<br /> 09.07.14 - Bienvenue à Erika !<br />07.07.14 - Bienvenue à Kakashi ! <br /> 05.07.14 - Bienvenue à Yukine !<br />05.07.14 - Ouverture du forum.<br />01.06.14 - Fin des posts administratifs<br />26.05.14 - Staff au complet !<br />24.05.14 - Création du forum ! <br />                     
                </div>
                                                         
             </td>
                                                
          </tr>
                                       
       </tbody>
                  
    </table>
                 
    <div style="margin: auto; background: #; height: auto; width: 600px; color: black; font-family: arial; font-size: 10px; margin-bottom: -4px;">
                         <br /> <br />               
       <div style="background-color: #A2A9B8; width: 600px; border-radius: 20px; padding: 4px;">
                                                                       
          <table>
                                                          
             <tbody>
                                                                   
                <tr>
                                                                            
                   <td>
                                                                                     
                      <div class="infobulle">
                                                             <a href="http://pensionnat-seido.forumgratuit.fr/u2contact"> <img style="border-radius: 50px;" src="http://img4.hostingpics.net/pics/940002tumblrmxh433IKPi1r2fcc1o7250.jpg" /> </a><span>Jun Isashiki ★ Fondateur </span>                               
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div style="width: 35px">
                                                                                          
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div class="infobulle">
                                                             <a href="http://pensionnat-seido.forumgratuit.fr/u1contact"> <img style="border-radius: 50px;" src="http://img4.hostingpics.net/pics/319904samplea2691249591c0fb29b1ae8f80e08f18c.jpg" /></a> <span>Yui Isashiki ★ Fondatrice </span>                               
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div style="width:35px">
                                                                                          
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div class="infobulle">
                                                             <a href="http://pensionnat-seido.forumgratuit.fr/u3contact"> <img style="border-radius: 50px;" src="http://i58.servimg.com/u/f58/18/87/46/31/pokemo10.jpg" /></a> <span>Satoshi Tajiri ★ Administrateur </span>                               
                      </div>
                                                                                 
                   </td>
                                                                        
                </tr>
                                                               
             </tbody>
                                                      
          </table>
                                             
       </div>
                                
    </div>

    CSS
    Code:
    /* PA par Célestine */
    .nomfow {
      font-size: 20px;
      font-family: Lobster, Great vibes, georgia;
      text-align: center;
      color: #A2A9B8;
    }

    /*Titre des blocs*/
    .titrep {
      display: block;
      text-align: center;
      width: auto;
      height: 22px;
      background-color: #A2A9B8;
      color: #F2F2B2;
      border-bottom: 1px dotted #F2F2B2;
      font-size: 20px;
      font-family: Lobster, great vibes, Georgia;
    }

    /*Contexte*/
    .bloc2 {
      border: 1px solid #A2A9B8;
      border-radius: 10px 10px 0px 0px;
      width: 330px;
      height: 240px;
      background-color: #A2A9B8;
      overflow: hidden;
    }

    .bloc2texte {
      width: 325px;
      height: 210px;
      font-size: 12px;
      font-family: arial;
      overflow: auto;
      padding: 3px;
      text-align: justify;
    }

    /*Nouveautés*/
    .bloc3 {
      border: 1px solid #A1A6BD;
      border-radius: 10px 10px 0px 0px;
      width: 245px;
      height: 240px;
      background-color: #A1A6BD;
      overflow: auto;
      font-family: arial;
      font-size: 12px;
    }

    /*staff*/
    .infobulle {
      position: relative;
      z-index: 0;
    }

    .infobulle:hover {
      background-color: transparent;
      z-index: 50;
    }

    .infobulle span {
      position: absolute;
      background-color: #E6E6E3;
      opacité: 0.8;  /*Couleur de fond*/
      color: #A2A9B8;  /* Couleur de votre texte*/
      padding: 5px;
      visibility: hidden;
      text-align: center;
      line-height: 15px;
      font-family: arial;
      font-size: 12px;
    }

    .infobulle span img {  /*style des images dans l'infobulle*/
      padding: 5px;
    }

    .infobulle:hover span {    /*Style de l'infobulle*/
      visibility: visible;
      bottom: 20px;    /*Distance entre l'infobulle et le bas de la cellule*/
      left: 50px;    /*Distance entre l'infobulle et la gauche de la page*/
      width: 100px;  /*Largeur de l'infobulle*/
      border-radius: 5px;
    }

    .infobulle a {  /*Style des liens*/
      color: white;    /*Couleur des liens*/
      text-decoration: none;
    }

    .infobulle a:hover {    /*style des liens au passage de la souris*/
      font-style: italic;
    }

    /* Fin de la P.A. */

    Si vous avez des problèmes avec ce LS, venez poster ici.
    Anonymous
    Invité

    Sam 22 Nov 2014 - 19:19

    Hey !

    C'est pas mal du tout pour un premier LS ! Les rendus les plus simples sont souvent les plus appréciés Wink

    Par contre il y a deux ou trois petites choses que j'aimerai que tu améliores avant de déplacer s'il te plait. Pour commencer, dans ton HTML. A ce niveau :
    Code:
     <div class="bloc2texte">
                         
                      <div style="text-align:justify">
                            <br />Bienvenue dans l'un des lycées les plus prestigieux du Japon ! Le niveau d'études y est très élevé, le corps enseignant visant à offrir à ses étudiants la meilleure formation possible pour pouvoir atteindre les universités les plus compétentes du pays. Pourtant, l'école a toujours accueilli un grand nombre de types d'élèves différents : des adolescents de bonne famille aux voyous et bagarreurs invétérés, tout le monde était accepté, à condition d'avoir un potentiel dans un domaine quelconque. Un grand nombre de clubs existent ou peuvent être créés, tels que le club de journalisme, d'échecs, de lecture, de cinéma...etc. Chaque passion peut être représentée par un club, pour autant qu'il y ait assez d'élèves pour la célébrer. Sachez, chers étudiants, que c'est vous tous, autant que vous êtes, qui faîtes vivre cette école, alors soyez imaginatifs dans ce que vous voulez créer, chaque pierre ajoutée à l'édifice ne peut être que constructive ![...] </div>

    La division ne me semble pas utile : il te suffit d'ajouter l'alignement dans ton CSS, par le biais de ".bloc2texte", de cette façon :
    Code:
    .bloc2texte{
          width: 325px;
          height: 235px;
          font: arial 12px;
          overflow: auto;
          padding: 3px;
          text-align: justify;
        }

    Les alignements peuvent se mettre dans le CSS Wink

    Quant à ce dernier, je n'avais jamais vu ceci :
    Code:
    font: 20px Lobster, great vibes, Georgia;

    Et je pense que ce n'est vraiment pas à utiliser. Il est préférable d'afficher la mise en forme de ta police de la même manière que tu l'as fais pour ".nomfow" afin d'éviter les beugs. Donc pour cet exemple :
    Code:
    font-size: 20px;
            font-family: Lobster, great vibes, Georgia;


    Enfin les gens prennent rarement la peine d'ajouter eux-mêmes le crédit vers l'auteur et NU, peux-tu donc l'incorporer toi-même dans le code ?

    Te serait-il possible de prendre un peu de temps pour revoir l'ensemble s'il te plait ? Et en cas de questions, n'hésites pas :)

    Bonne soirée !
    Anonymous
    Invité

    Jeu 4 Déc 2014 - 9:48

    Coucou Célestine !

    Tu as vu mon message ? Où en es-tu ? Tu as besoin d'aide ?

    Merci de donner des nouvelles Wink
    Anonymous
    Invité

    Sam 13 Déc 2014 - 19:14

    Célestine ? Toujours parmi nous ?
    Anonymous
    Invité

    Dim 28 Déc 2014 - 15:19

    Sans nouvelles depuis presque un mois j'ai corrigé ... merci de suivre tes sujets la prochaine fois.
    Shaq'
    Shaq'
    MasculinAge : 103Messages : 60

    Jeu 1 Jan 2015 - 21:02

    Avec un peu de personnalisation elle sera parfaite
    XaLis
    XaLis
    FémininAge : 26Messages : 44

    Sam 10 Jan 2015 - 19:27

    j'aime beaucoup **
    mazonzon
    mazonzon
    FémininAge : 24Messages : 54

    Dim 11 Jan 2015 - 13:28

    Je trouve ce code très joli ^^
    mackay
    mackay
    MasculinAge : 35Messages : 124

    Dim 11 Jan 2015 - 23:33

    simple mais beau
    Asami No Yoru
    Asami No Yoru
    FémininAge : 24Messages : 18

    Jeu 15 Jan 2015 - 15:19

    Merchi Very Happy



    http://thousand-sunny.forumactif.org/
    Mon fofo :3 venez nombreux Very Happy (en fait ... Si vous voulez...)
    Lunet
    Lunet
    FémininAge : 26Messages : 27

    Ven 16 Jan 2015 - 23:28

    Mignon
    Utauko
    Utauko
    FémininAge : 27Messages : 45

    Dim 18 Jan 2015 - 13:57

    Élégant et simple, j'aime ! Merci du partage !
    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Lun 19 Jan 2015 - 6:50

    je prends Very Happy
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Lun 19 Jan 2015 - 16:59

    Merci c''est tout à fait ce qu'il me faut.



    Page d'accueil toute simple Oyl7
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 38Messages : 85

    Mar 20 Jan 2015 - 21:47

    merci ^^



    .
    missphan
    missphan
    FémininAge : 41Messages : 156

    Jeu 22 Jan 2015 - 8:53

    superbe merci
    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Jeu 22 Jan 2015 - 19:48

    Merci ! :3
    Panddora
    Panddora
    FémininAge : 25Messages : 25

    Jeu 22 Jan 2015 - 20:21

    merci !




    Page d'accueil toute simple 112194spaceship
    xGauthierx
    xGauthierx
    MasculinAge : 26Messages : 75

    Sam 24 Jan 2015 - 15:57

    Très beau.
    Kalypso San
    Kalypso San
    FémininAge : 28Messages : 21

    Dim 1 Fév 2015 - 17:04

    Classe, ty !



    Page d'accueil toute simple 4keb

    Liens / Contacts:
    lolosmile
    lolosmile
    FémininAge : 32Messages : 37

    Jeu 5 Fév 2015 - 18:20

    j'adore
    BlackSo
    BlackSo
    MasculinAge : 25Messages : 31

    Sam 7 Fév 2015 - 22:36

    Merci du partage :)
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Lun 9 Fév 2015 - 18:00

    Merci *-*
    Anonymous
    Invité

    Jeu 12 Fév 2015 - 9:44

    Merci
    Mimio
    Mimio
    FémininAge : 29Messages : 191

    Sam 14 Fév 2015 - 20:00

    Merci pour ce code Very Happy



    Page d'accueil toute simple 134914Signazael2
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 9:48