AccueilRechercherS'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

    Hancok
    Hancok
    FémininAge : 36Messages : 1247

    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


    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.


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




    PA pour forum RP avec image 3ylp
    A-Lice
    A-Lice
    FémininAge : 26Messages : 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
    A-Lice
    FémininAge : 26Messages : 4939

    le Mar 17 Fév 2015 - 11:46

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

    Hancok
    Hancok
    FémininAge : 36Messages : 1247

    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)




    PA pour forum RP avec image 3ylp
    A-Lice
    A-Lice
    FémininAge : 26Messages : 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
    Hancok
    FémininAge : 36Messages : 1247

    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 ?




    PA pour forum RP avec image 3ylp
    A-Lice
    A-Lice
    FémininAge : 26Messages : 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
    Hancok
    FémininAge : 36Messages : 1247

    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




    PA pour forum RP avec image 3ylp
    Hancok
    Hancok
    FémininAge : 36Messages : 1247

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




    PA pour forum RP avec image 3ylp
    Hancok
    Hancok
    FémininAge : 36Messages : 1247

    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.




    PA pour forum RP avec image 3ylp
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    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
    Kelalin
    FémininAge : 28Messages : 2322

    le Ven 4 Mar 2016 - 16:38

    Merci pour le partage !
    Hancok
    Hancok
    FémininAge : 36Messages : 1247

    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.




    PA pour forum RP avec image 3ylp
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    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
    Hancok
    FémininAge : 36Messages : 1247

    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.




    PA pour forum RP avec image 3ylp
    Hancok
    Hancok
    FémininAge : 36Messages : 1247

    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.




    PA pour forum RP avec image 3ylp
    Leelo
    Leelo
    FémininAge : 29Messages : 157

    le Ven 7 Oct 2016 - 19:19

    oh j'adore ce que tu fais.
    Hancok
    Hancok
    FémininAge : 36Messages : 1247

    le Sam 8 Oct 2016 - 12:24

    Merci^^ Leelo.




    PA pour forum RP avec image 3ylp
    Onyx
    Onyx
    FémininAge : 26Messages : 3318

    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
    Hancok
    FémininAge : 36Messages : 1247

    le Sam 29 Oct 2016 - 18:21

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




    PA pour forum RP avec image 3ylp
    Angie Harkness
    Angie Harkness
    FémininAge : 37Messages : 725

    le Lun 27 Fév 2017 - 12:36

    merci pour cette jolie pa ^^ je la prend^^
    Noir Black
    Noir Black
    FémininAge : 35Messages : 44

    le Dim 15 Avr 2018 - 1:53

    merci
    Ena
    Ena
    FémininAge : 22Messages : 149

    le Dim 6 Mai 2018 - 19:06

    Merci bien !



    PA pour forum RP avec image Aero10
    PA pour forum RP avec image 390289enautopia
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 28Messages : 64

    le Mer 14 Nov 2018 - 18:31

    Elle est superbe Very Happy




    PA pour forum RP avec image 478753Chantal
    Contenu sponsorisé


      La date/heure actuelle est Jeu 29 Oct 2020 - 5:25