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 pour forum RP avec image

    Partagez
    Hancok
    FémininAge : 32Messages : 851

    le Sam 3 Jan 2015 - 11:35



    Hello, je vais vous proposez ma deuxième PA. Dans celle-ci vous pourrez mettre un titre en image mais aussi une image en fond. Vous pourrez également changer l'onglet "RP du moment" par " top sites" c'est vous qui voyez. Maintenant place à l'aperçu et au code.

    Voici un aperçu www et voici ce que donne l'infobulle www


    Le code à mettre dans vos CSS:
    Code:
     /*....Page d'accueil....*/
    .cadre-principal {
      display:block;
      background-image:url(http://zupimages.net/up/16/21/fqiq.png);
      background-repeat: repeat;
      background-position: top center;
      width:820px;
      height:680px;
      margin-left:-5px;
      border-radius:15px 15px 15px 15px;
      border: 3px solid #8F4835;
      text-align: center;
    }
    .contexte {
    float:left;
    display:block;
    background: #945539;
    height:300px;
    width:250px;
    position:relative;
    margin-top: 40px;
    margin-left: 20px;
    border-top: 3px solid #8F4835;
    border-bottom: 3px solid #8F4835;
    border-radius:0px 0px 0px 0px;
    }
    .bloc1{ 
    overflow:auto;
    margin: auto;
    width:235px;
    height:270px;
    text-align: left;}

    .image {
    float:left;
    display:block;
    background:# ;
    background-repeat: no-repeat;
    background-position: top center;
    height:300px;
    width:370px;
    position:relative;
    margin-top: 65px;
    margin-left: 20px;
    }

    .bloc2{
    width: 370px;
    height: 300px;
    margin: auto;
    }

    .crédit {
    float:left;
    display:block;
    background: #945539;
    height:120px;
    width:110px;
    padding:5px;
    position:relative;
    border-top: 3px solid #8F4835;
    border-bottom: 3px solid #8F4835;
    border-radius:0px 0px 0px 0px;
    margin-top: 40px;
    margin-left: 20px;
    text-align: left;
    }
    .lienutile {
    float:left;
    display:block;
    background: #945539;
    height:125px;
    width:110px;
    padding:5px;
    position:relative;
    margin-top: 20px;
    margin-left: 20px;
    border-top: 3px solid #8F4835;
    border-bottom: 3px solid #8F4835;
    border-radius:0px 0px 0px 0px;
    text-align: left;
    }
    .rpmoment {
    float:left;
    display:block;
    background: #945539;
    height:100px;
    width:230px;
    padding:5px;
    position:relative;
    margin-top: 20px;
    margin-left: 20px;
    border-top: 3px solid #8F4835;
    border-bottom: 3px solid #8F4835;
    border-radius:0px 0px 0px 0px;
    text-align: left;
    }
    .new {
    float:left;
    display:block;
    background: #945539;
    height:100px;
    width:300px;
    padding:5px;
    position:relative;
    margin-top: 20px;
    margin-left: 20px;
    border-top: 3px solid #8F4835;
    border-bottom: 3px solid #8F4835;
    border-radius:0px 0px 0px 0px;
    }
    .bloc3{
    overflow:auto;
    width:300px;
    height:80px;
    text-align: left;
    margin: auto;}

    .staff {
    float:left;
    display:block;
    background: #945539;
    height:100px;
    width:180px;
    padding:5px;
    position:relative;
    margin-top: 20px;
    margin-left: 20px;
    border-top: 3px solid #8F4835;
    border-bottom: 3px solid #8F4835;
    border-radius:0px 0px 0px 0px;
    text-align: center;
    }
    .partenaire {
    float:left;
    display:block;
    background: #945539;
    height:50px;
    width:770px;
    padding:5px;
    margin-top: 20px;
    margin-left: 20px;
    position:relative;

    border-top: 3px solid #8F4835;
    border-bottom: 3px solid #8F4835;
    border-radius:0px 0px 0px 0px;
    }
    .titre2 {
      color:#4A1C00;font-size:30px;
      text-align:center;text-shadow:1px 1px 0px #fff;font-style: italic;
      font-family: 'Great Vibes', sans-serif;
      font-weight: 700;
      margin-top:-20px;}
    div.infobulle{
    position: relative;
    display: inline-block;

    }

    div.infobulle span{
    display: none;

    }

    div.infobulle:hover{
    background: none;
    z-index: 999;
    }

    div.infobulle:hover span
    {
    display: inline;
    position: absolute;
    top: 10px; left: 6px;
    }
    div.infobulle span{
      background: #8F4835;
      width: 50px;
      height: 70px;
      border: 1px solid #fff;
      border-radius:10px 10px 10px 10px;
     
    }
    /*....fin page d'accueil....*/

    Code à mettre dans votre page d'accueil (HTML):
    Code:
         
    <div class="cadre-principal">
                                                                           <link href="https://fonts.googleapis.com/css?family=Great Vibes" rel="stylesheet" type="text/css" />                                                                   
       <div>
                <img src="http://zupimages.net/up/16/21/b84x.png" />                         
       </div>
                                                                                                    
       <div class="contexte">
                                                                                                             
          <div class="titre2">
                                                                                         Le concept                                                       
          </div>
                                     
          <div class="bloc1">
                                                                       Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.        Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.                 
          </div>
                                                               
       </div>
                                                                                      
       <div class="image">
                                   
          <div class="titre2">
                                                                                                                                              
          </div>
                     
          <div class="bloc2">
                                 <img style="width: 370px; height: 300px;" src="http://zupimages.net/up/16/21/1cbt.png" />             
          </div>
                                             
       </div>
                                                                                  
       <div class="crédit">
                                                                                     
          <div class="titre2">
                                                                                 Crédits                                                       
          </div>
                                                                <br />Forum @...  <br /> PA @<a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Hancok</a> <br /> Design @... <br /> Catégorie @... <br /> Qeel @... <br />                                                                                   
       </div>
                                                                          
       <div class="lienutile">
                                                                                                               
          <div class="titre2">
                                                                           Liens                                                     
          </div>
                                                        <br /><a href="lien du règlement">Le règlement</a>  <br /> <a href="lien des règles">Les règles d'écriture</a> <br /><a href="lien de la présentation">Présentation</a> <br />                                                                                                                                           
       </div>
                                                                
       <div class="rpmoment">
                                                                                       
          <div class="titre2">
                                                                                   Les rp du moments                                                                     
          </div>
                                                                    <a href="Lien du rp">Titre du rp</a>                                                             
       </div>
                                                                            
       <div class="new">
                                     
          <div class="titre2">
                                                                                   Les nouveautés                                                                   
          </div>
                                                                                                             
          <div class="bloc3">
                                                                   ¤00/00/00: .... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />                                                 
          </div>
                                                                                         
       </div>
                                                                                
       <div class="staff">
                                                                                   
          <div class="titre2">
                                                                               Le staff                                                                   
          </div>
                                                                                                   
          <div class="infobulle">
                                                               <img src="http://img4.hostingpics.net/pics/171727ympapa.png" /><span>Pseudo  </span>*                                               
          </div>
                                                                                               
          <div class="infobulle">
                                                               <img src="http://img4.hostingpics.net/pics/423743roypa.png" /><span>  Pseudo</span>*                                               
          </div>
                                                                                                 
          <div class="infobulle">
                                                               <img src="http://i39.servimg.com/u/f39/11/27/81/85/ava_pa10.png" /><span>  Pseudo  </span>                                                 
          </div>
                                                                               
       </div>
                                                                              
       <div class="partenaire">
                                                                               
          <div class="titre2">
                                                                                 Les partenaires                                                                 
          </div>
                                                                                                 
          <marquee direction="left" scrollamount="5" scrolldelay="3" onmouseover="this.stop();" onmouseout="this.start();">
                                                               <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Image hébergée gratuitement chez " border="0" /></a>-<a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a> <a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a>                             
          </marquee>
                                                                               
       </div>
       <div class="clear">
       </div>
                                                                                    
    </div>

    Attention pour l'image du titre ne pas dépasser la taille suivante (mais vous pouvez faire plus petit) pour ne pas déformer la PA: 800*80

    Voilà si vous avez un problème ou des questions n'hésitez pas.


    Dernière édition par Hancok le Dim 18 Sep 2016 - 11:06, édité 4 fois





    A-Lice
    FémininAge : 22Messages : 4939

    le Mar 3 Fév 2015 - 20:29

    Bonsoir,

    Tout d'abord merci du partage !
    Après j'aurais juste une remarque, tu as décidé de mettre ton CSS dans la feuille de style, c'est plus pratique, c'est bien. Néanmoins, il faut le faire pour toutes tes balises, là il reste encore des div avec des propriétés. Comme ici :
    Code:
    <div style="overflow:auto;width:300px;height:120px;">
                                                                ¤00/00/00: .... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />                                   
                      </div>

    Je te laisse modifier ça avant de déplacer (:

    A-Lice
    FémininAge : 22Messages : 4939

    le Mar 17 Fév 2015 - 11:46

    Yo ~
    Où en es-tu avec les modifications ?

    Hancok
    FémininAge : 32Messages : 851

    le Jeu 23 Avr 2015 - 15:49

    Bonjour, déjà je m'excuse pour mon absence (je n'avais plus internet).
    Sinon je ne comprend pas trop ce que tu demande exactement? (je suis novice sur les codages et je connais pas tous les termes)





    A-Lice
    FémininAge : 22Messages : 4939

    le Jeu 23 Avr 2015 - 19:36

    Hey ^_^ Pas de mal !
    En fait je te demande de mettre tout ce qu'il y a dans tes div style dans des div class pour mettre les propriétés dans la feuille de style. Comme tu as fait pour tout le reste en fait (:
    Au passage je n'ai pas vu de crédit pour N-U '-' s'il n'y est pas n'oublie pas de l'ajouter (:
    Et si encore une fois ce n'est pas clair n'hésite pas à me le dire ! J'suis pas un tyran et j'aide sans problème \o/

    Hancok
    FémininAge : 32Messages : 851

    le Ven 24 Avr 2015 - 13:14

    Hello ah ok, je vais essayé d'arranger ça, merci.
    Les crédits y sont avec le lien direct du forum^^. (ils sont dans la partie HTML )

    Édite: voilà c'est fait, par-contre je sais pas si c'est bon ou pas ?





    A-Lice
    FémininAge : 22Messages : 4939

    le Ven 24 Avr 2015 - 13:33

    En fait, tu as mis le class c'est bien. Mais tout ce qu'il y a après par exemple ça :
    Code:
    overflow:auto;width:230px;height:280px;
    tu le remplaces par un nom pourquoi pas bloc1 et tu reportes ce nom avec le code dans ton CSS comme ceci :
    Code:
    .bloc1  {
    overflow:auto;
    width:230px;
    height:280px;
    }

    Tu vois mieux ce que je te demande ?

    Hancok
    FémininAge : 32Messages : 851

    le Sam 25 Avr 2015 - 15:26

    Hello, je vais voir ça. (je promet rien)

    Édite: voilà c'est fait mais je crois que je me suis mélanger les pinceaux Razz





    Hancok
    FémininAge : 32Messages : 851

    le Sam 9 Mai 2015 - 14:49

    Coucou, juste pour prévenir que les modifications on été fait, mais sans aucune certitude d'avoir bien fait :/





    Hancok
    FémininAge : 32Messages : 851

    le Sam 13 Juin 2015 - 11:32

    Bonjour, je voulais savoir où ça en était sur la fiabilité de mon code? Si j'ai bien fait ou si je me suis planté.
    Merci à bientôt.





    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 4 Mar 2016 - 11:12

    Helo Hancok!
    Désolée du retard de réponse, mais avec l'absence d'A-Lice elle n'a aps pu suivre ^^

    Alors tout d'abord, tu tuilises des tables avec un seul td à l'intérieur... En réalité tu pourrais retirer tous tes tables tr et td pour laisser simplement tes div. Mettre des tables est ici un peu inutile.

    Ensuite, j'ai vu ceci:
    Code:
    <div class="bloc2" />
    Ça n'existe pas, une div est pas une balise unique! Il faudrait changer ça!

    J'espère que ce n'est pas trop tard pour demander encore des changements Wink



    Kelalin
    FémininAge : 24Messages : 1403

    le Ven 4 Mar 2016 - 16:38

    Merci pour le partage !
    Hancok
    FémininAge : 32Messages : 851

    le Dim 6 Mar 2016 - 15:39

    Coucou, non ce n'est pas trop tard et merci. En se moment je suis en plein apprentissage donc je pense pas corrigé de suite. Mais je vais essayer sinon, si vous le désirez, un peu d'aide sera le bienvenue Very Happy.





    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Dim 6 Mar 2016 - 16:26

    Dis-moi quand c'est fait. On est pas pressés de toute façon, tu peux prendre ton temps Wink



    Hancok
    FémininAge : 32Messages : 851

    le Mar 8 Mar 2016 - 13:08

    Coucou ok, si il faut je verrais avec ma prof et je reviendrais quand il sera correct^^.
    A bientôt.





    Hancok
    FémininAge : 32Messages : 851

    le Dim 18 Sep 2016 - 9:30

    Hello, alors juste pour informer que je vais faire certaines modif sur cette PA, mais qu'elle aura besoin d'être corrigé, car j'ai encore beaucoup de lacune.

    Édite: alors j'ai pu corrigé jusqu'à la demande d'enlever les tables tr et td.
    Sur mon forum il y a pas de souci, mais si il faut encore quelque corrections, n'hésitez pas à me le dire.





    Leelo
    FémininAge : 25Messages : 139

    le Ven 7 Oct 2016 - 19:19

    oh j'adore ce que tu fais.
    Hancok
    FémininAge : 32Messages : 851

    le Sam 8 Oct 2016 - 12:24

    Merci^^ Leelo.





    Onyx
    FémininAge : 23Messages : 2596

    le Sam 15 Oct 2016 - 22:54

    Salut!

    C'est super, merci du partage !

    Tout me semble bon alors je valide et ce sera bientôt déplacé dans les LS Wink



    Hancok
    FémininAge : 32Messages : 851

    le Sam 29 Oct 2016 - 18:21

    Hello, j'avais même pas vue qu'il a était déplacer^^.
    Merci.





    Contenu sponsorisé

    Aujourd'hui à 11:12


      La date/heure actuelle est Mar 6 Déc 2016 - 11:12