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.

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    Commande de PA - PetitFermier

    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Sam 21 Déc 2013 - 20:47

    Rappel du premier message :

    COMMANDE
    Bonjour,


    Adresse du forum : http://la-petite-fermette.forumactif.org/
    Description des éléments : Je souhaite une Pa, voici le schéma :
    /


    Couleurs ou tons : Vert, marron, naturel :) avec les codes de couleurs, les fonds, on peut mettre des fleurs, herbes... :)
    Images : ICI (à mettre au centre) sinon j'ai tout mis sur le schéma, s'il vous manque quelque chose dites Wink  
    Autres précisions : x


    Merci :) 


    Dernière édition par PetitFermier le Ven 9 Mai 2014 - 11:08, édité 3 fois
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Dim 2 Mar 2014 - 0:24

    Ok
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Dim 2 Mar 2014 - 15:28

    Merci , bon week-end ! :)
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Dim 2 Mar 2014 - 15:56

    Voici les codes :

    Code:
    <div align="center">
       <span class="staff">Staff</span>
       <span class="credits">Crédits</span>
    </div>

    <center><div class="corps" align="center">
    <div id="accueil1"><div id="accueil2">
    <div id="content1">

    <div id="content2"><center><span class="titre">Les News du forum</span></center><br>
    <div class="info_accueil">
    Ici se trouve le contenu de votre second onglet.</div>
    </div>

    <center><span class="titre">Message de bienvenue</span></center><br>
    <div class="info_accueil">
    Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br>Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br>Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br>Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br>Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br></div>
    </div>

    <span class="ongl1"><a href="#accueil1">Bienvenue</a></span>
    <span class="ongl2"><a href="#accueil2">News</a></span>

    </div></div>
          
       
       <table class="table">
          <tr>
             <td class="left"><a href="">Règlement</a></td>
             <td class="image" rowspan="2"><img src="http://img15.hostingpics.net/pics/7357052601.gif" width="300" /></td>
             <td class="right"><a href="">Annonces</a></td>
          </tr>
          <tr>
             <td class="left"><a href="">Aides</a></td>
             <td class="right"><a href="">Livre d'Or</a></td>
          </tr>
          <tr>
             <td class="center" colspan="3"><a href="">Présentations</a></td>
          </tr>
       </table>
    <br><br></div>
       <div>
          <marquee class="partenaires" scrollamount="2" height="50" direction="down">Partrenaire<br>
          Partrenaire<br>
          Partrenaire<br>
          Partrenaire<br>
          Partrenaire<br></marquee>
       </div>

    Code:
    /*Staff & Crédits*/   
       .staff {
          display: inline-block;
          width: 100px;
          height: 30px;
          border: 5px solid black;
          border-radius: 10px 0px 0px 10px;
          -moz-radius: 10px 0px 0px 10px;
          -khtml-radius: 10px 0px 0px 10px;
          text-align: justify;
          font-size: 20px;
          vertical-align: middle;
          margin: 7px 248px 0 0;
          padding: 20px 5px 0 5px;
          z-index: 1;
          position: relative;
          overflow: hidden;
       }
       .staff:hover {
          display: inline-block;
          width: 100px;
          height: 300px;
          border: 5px solid black;
          border-radius: 10px 0px 0px 10px;
          -moz-radius: 10px 0px 0px 10px;
          -khtml-radius: 10px 0px 0px 10px;
          text-align: justify;
          font-size: 20px;
          vertical-align: middle;
          margin: 7px 248px -270px 0;
          padding: 20px 5px 0 5px;
          z-index: 1;
          position: relative;
          overflow: visible;
       }
       .credits {
          display: inline-block;
          width: 100px;
          height: 30px;
          border: 5px solid black;
          border-radius: 0px 10px 10px 0px;
          -moz-radius: 0px 10px 10px 0px;
          -khtml-radius: 0px 10px 10px 0px;
          font-size: 20px;
          text-align: right;
          margin: 60px 0 0 248px;
          padding: 20px 5px 0 5px;
          z-index: 1;
          position: relative;
       }

    /*Corps*/
       .corps{
          display: block;
          border: 5px solid black;
          width: 500px;
          margin: -100px 0 0 0;
          padding: 0 0 0 0;
          background-color: #FFF;
          z-index: 0;
          position: relative;
       }

    /*Message*/
       .titre {
          display: inline-block;
          text-align: center;
          margin: 0 0 0 0;
          padding: 30px 0;
          font-size: 28px;
          font-weight: bold;
       }
       .message {
          display: inline-block;
          text-align: justify;
          padding: 0 5px 0 0;
          font-size: 14px;
          width: 100%;
          height: 250px;
          overflow: scroll;
       }
       .bienvenue {
          display: inline-block;
          text-align: center;
          margin: 30px 0 0 0;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
       }
       .news{
          display: inline-block;
          text-align: center;
          margin: -30px 0 0 0;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
       }


    /*table*/
       .table {
          width: 100%;
          text-align: center;
          padding: 0 5px;
       }
       .left {
          text-align: right;;
          padding-right: 5px;
       }
       .right {
          text-align: left;
          padding-left: 5px;
       }
       .center {
          text-align: center;
       }
       .image {
          border: 3px solid black;
          width: 300px;
       }

    /*Partenaires*/
       .partenaires{
          border: 3px solid black;
          border-radius: 5px;
          margin-top: 5px;
          width: 230px;
       }

    /*contenu dynamique*/
       #content1{
          display: block;
          height: 300px;
          overflow: hidden;
          font-size: 11px;
          color: #3c506f;
       }
       #content2{
          display: none;
       }
       #accueil1:target #content1{
          display: block;
          height: 250px;
          overflow: hidden;
          font-size: 11px;
          color: #3c506f;
          opacity: 1;
          -moz-opacity: 1;
          -khtml-opacity: 1;
          filter: alpha(opacity=100);
          text-align: justify;
          padding: 10px;
       }
       #accueil2:target #content2{
          display: block;
          height: 250px;
          overflow: hidden;
          font-size: 11px;
          color: #3c506f;
          opacity: 1;
          -moz-opacity: 1;
          -khtml-opacity: 1;
          filter: alpha(opacity=100);
          text-align: justify;
          padding: 10px;
       }

    /*Onglets*/
       .ongl1, .ongl2{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: darkgreen;
       }
       .ongl1:hover, .ongl2:hover{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: grey;
    }
       .ongl1 a, .ongl2 a{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: darkgreen;
    }
       .ongl1 a:hover, .ongl2 a:hover{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: grey;
       }
       .info_accueil{
          padding: 5px;
          overflow: scroll;
          height: 290px;
       }
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Dim 2 Mar 2014 - 18:47

    Le premier est à mettre dans PA - Généralités 
    Le second - Css ? c'est bien cela ? :)
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Dim 2 Mar 2014 - 19:46

    Oui ^^
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Dim 2 Mar 2014 - 20:24

    http://forum-test-lpf.forumactif.org/
    Voici ce que ça donne ? scratch
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Dim 2 Mar 2014 - 23:42

    Oulà :o
    Qu'est-ce que c'est que ce bug ?
    Hum.. je vais regarder ça sur mon forum test pour faire les corrections.
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 3 Mar 2014 - 11:26

    Hum.. ça doit être une interférence au niveau de la feuille de css ^^'
    Retires le code css que je t'ai donné de ta feuille css et colles ceci :

    Code:
    <style type="text/css">
       
    /*Staff & Crédits*/   
       .staff {
          display: inline-block;
          width: 100px;
          height: 30px;
          border: 5px solid black;
          border-radius: 10px 0px 0px 10px;
          -moz-radius: 10px 0px 0px 10px;
          -khtml-radius: 10px 0px 0px 10px;
          text-align: justify;
          font-size: 20px;
          vertical-align: middle;
          margin: 7px 248px 0 0;
          padding: 20px 5px 0 5px;
          z-index: 1;
          position: relative;
          overflow: hidden;
       }
       .staff:hover {
          display: inline-block;
          width: 100px;
          height: 300px;
          border: 5px solid black;
          border-radius: 10px 0px 0px 10px;
          -moz-radius: 10px 0px 0px 10px;
          -khtml-radius: 10px 0px 0px 10px;
          text-align: justify;
          font-size: 20px;
          vertical-align: middle;
          margin: 7px 248px -270px 0;
          padding: 20px 5px 0 5px;
          z-index: 1;
          position: relative;
          overflow: visible;
       }
       .credits {
          display: inline-block;
          width: 100px;
          height: 30px;
          border: 5px solid black;
          border-radius: 0px 10px 10px 0px;
          -moz-radius: 0px 10px 10px 0px;
          -khtml-radius: 0px 10px 10px 0px;
          font-size: 20px;
          text-align: right;
          margin: 60px 0 0 248px;
          padding: 20px 5px 0 5px;
          z-index: 1;
          position: relative;
       }

    /*Corps*/
       .corps{
          display: block;
          border: 5px solid black;
          width: 500px;
          margin: -100px 0 0 0;
          padding: 0 0 0 0;
          background-color: #FFF;
          z-index: 0;
          position: relative;
       }

    /*Message*/
       .titre {
          display: inline-block;
          text-align: center;
          margin: 0 0 0 0;
          padding: 30px 0;
          font-size: 28px;
          font-weight: bold;
       }
       .message {
          display: inline-block;
          text-align: justify;
          padding: 0 5px 0 0;
          font-size: 14px;
          width: 100%;
          height: 250px;
          overflow: scroll;
       }
       .bienvenue {
          display: inline-block;
          text-align: center;
          margin: 30px 0 0 0;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
       }
       .news{
          display: inline-block;
          text-align: center;
          margin: -30px 0 0 0;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
       }


    /*table*/
       .table {
          width: 100%;
          text-align: center;
          padding: 0 5px;
       }
       .left {
          text-align: right;;
          padding-right: 5px;
       }
       .right {
          text-align: left;
          padding-left: 5px;
       }
       .center {
          text-align: center;
       }
       .image {
          border: 3px solid black;
          width: 300px;
       }

    /*Partenaires*/
       .partenaires{
          border: 3px solid black;
          border-radius: 5px;
          margin-top: 5px;
          width: 230px;
       }

    /*contenu dynamique*/
       #content1{
          display: block;
          height: 300px;
          overflow: hidden;
          font-size: 11px;
          color: #3c506f;
       }
       #content2{
          display: none;
       }
       #accueil1:target #content1{
          display: block;
          height: 250px;
          overflow: hidden;
          font-size: 11px;
          color: #3c506f;
          opacity: 1;
          -moz-opacity: 1;
          -khtml-opacity: 1;
          filter: alpha(opacity=100);
          text-align: justify;
          padding: 10px;
       }
       #accueil2:target #content2{
          display: block;
          height: 250px;
          overflow: hidden;
          font-size: 11px;
          color: #3c506f;
          opacity: 1;
          -moz-opacity: 1;
          -khtml-opacity: 1;
          filter: alpha(opacity=100);
          text-align: justify;
          padding: 10px;
       }

    /*Onglets*/
       .ongl1, .ongl2{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: darkgreen;
       }
       .ongl1:hover, .ongl2:hover{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: grey;
    }
       .ongl1 a, .ongl2 a{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: darkgreen;
    }
       .ongl1 a:hover, .ongl2 a:hover{
          display: inline-block;
          text-align: center;
          margin: 30px 10px 0 10px;
          font-size: 20px;
          font-weight: bold;
          text-decoration: underline;
          font-style: italic;
          color: grey;
       }
       .info_accueil{
          padding: 5px;
          overflow: scroll;
          height: 290px;
       }

    </style>
    <div align="center">
        <span class="staff">Staff</span> <span class="credits">Crédits</span>
    </div>
     
    <center>
       <div align="center" class="corps">
          <div id="accueil1">
             <div id="accueil2">
                <div id="content1">
                   <div id="content2">
                      <center>
                         <span class="titre">Les News du forum</span>
                      </center><br />
                      <div class="info_accueil">
                         Ici se trouve le contenu de votre second onglet.
                      </div>
                   </div>
                   
                   <center>
                      <span class="titre">Message de bienvenue</span>
                   </center><br />
                   <div class="info_accueil">
                      Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br />Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br />Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br />Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br />Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite.<br />
                   </div>
                </div>
                 <span class="ongl1"><a href="#accueil1">Bienvenue</a></span><span class="ongl2"><a href="#accueil2">News</a></span>
             </div>
          </div>
          
          <table class="table">
             
             <tbody>
                <tr>
                   
                   <td class="left">
                      <a href="">Règlement</a>
                   </td>
                   
                   <td rowspan="2" class="image">
                      <img style="width: 300px;" src="http://img15.hostingpics.net/pics/7357052601.gif" />
                   </td>
                   
                   <td class="right">
                      <a href="">Annonces</a>
                   </td>
                   
                </tr>
                
                <tr>
                   
                   <td class="left">
                      <a href="">Aides</a>
                   </td>
                   
                   <td class="right">
                      <a href="">Livre d'Or</a>
                   </td>
                   
                </tr>
                
                <tr>
                   
                   <td colspan="3" class="center">
                      <a href="">Présentations</a>
                   </td>
                   
                </tr>
                
             </tbody>
          </table><br /><br />
       </div>
       
       <div>
           <marquee style="height: 50px;" direction="down" scrollamount="2" class="partenaires">Partrenaire<br /> Partrenaire<br /> Partrenaire<br /> Partrenaire<br /> Partrenaire<br /></marquee>
       </div>
    </center>

    Dans ta PA.
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Lun 3 Mar 2014 - 11:37

    Je mets rien en CSS ?
    http://forum-test-lpf.forumactif.org/
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 3 Mar 2014 - 13:13

    Vu comment réagit le code tu dois avoir du css dans ta feuille qui perturbe le code que je t'ai fais.
    Ou tu as tout édité en mode wysiwyg.
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 3 Mar 2014 - 16:32

    Voila j'ai vérifié ton code et... tu avais collé et validé ta page en "wysiwyg" C'était juste ça qui bogait
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Lun 3 Mar 2014 - 16:52

    Ah désolé! :/
    C'est vraiment beau Bravo ! :) 

    Par contre Crédits ne s'écarte pas quand on passe le curseur dessus?
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 3 Mar 2014 - 16:53

    T'excuses pas je faisais la même erreur avant ^^'

    Ah tu  ne me l'avais pas précisé alors je n'ai pas fais le hover. Je vais la faire de ce pas.

    Puis je te ferais un topo entier sur comment j'ai fais mes codes que tu puisses les personnaliser à ta guise.
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Lun 3 Mar 2014 - 17:11

    D'accord super merci^^

    Aussi pour ne pas valider en  "wysiwyg"  il faut faire comment ? Razz Car je  n'ai jamais vu ce terme, donc je faisais peut être des fois des erreurs à cause de celui ci :)


    Bon courage, si tu n'y arrives pas t'inquiète pas^^
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Lun 3 Mar 2014 - 17:56

    PA > affichage > Généralité > Message d'accueil et tu vérifies que ce soit bien des codes qu'il y a.
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Mar 4 Mar 2014 - 12:54

    D'accord merci^^ 

    Est ce que le fond tu pourrais le mettre vert clair ? :) 
    Pourquoi Crédits et Staff ne sont au même niveau ?
    Merci Very Happy
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mar 4 Mar 2014 - 14:24

    J'ai vue ce détail je suis en train de bosse sur un code pour les mettre sur la même ligne (même hauteur). Pour le background je te montrerais comment il faut faire Wink C'est très simple tu verras.
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Ven 7 Mar 2014 - 19:29

    Ok :)
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Ven 7 Mar 2014 - 21:40

    Désolée j'ai eu pas mal d'imprévus ces derniers temps (taff, malaises, siestes imprévues). Je reprends donc du service ^^
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Sam 8 Mar 2014 - 11:03

    Salut^^
    Pas de problème Wink La santé avant tout :)
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 8 Mar 2014 - 11:39

    Je suis en train de revoir tout le code pour éviter que ça ne bug.
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Dim 9 Mar 2014 - 18:38

    Merci bcp :)
    • Revenir en haut
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mar 11 Mar 2014 - 13:31

    Je travaille toujours sur ton code PF
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Mar 11 Mar 2014 - 18:48

    Prends ton temps Wink
    • Revenir en haut
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Mar 18 Mar 2014 - 12:46

    Je remonte pour que ma commande ne parte pas dans les archives, bon courage Aelita Wink
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 16:33