Bonjour !

Alors je peux t'aider à obtenir ce que tu veux mais pourrais-tu me montrer ce que tu as fais en code? Comme ça, je pourrais t'aider à avancer, à t'améliorer, à avoir le rendu que tu veux obtenir =D Quel est ton niveau de codage sinon? Est-ce que tu maîtrises le css ou c'est un animal bizarre qui de fait peur/Que tu essayes d'apprivoiser?

Coucouuuuuu alors j'ai réussi!!! C'est pas optimale super pro mais ça fonctionne, du coup,je pense pas déranger et je vais juste annuler! (j'avise que mon code doit etre dégueue pour un pro mais bon XD)

De toutes façons la version forum que j'ai fais chie dans la colle sur mobile, je suis obligée de tout recommencer :'( bref XD

Merci beaucoup, je comptais passer retirer ma demande en rentrant, ce que je fais ^^^mais c'est gentil de m'avoir proposé ton aide!

Alors si tu veux, je peux regarder ton code et t'aider à le rendre meilleur et moins lourd dans ce cas

Ah oui!Je suis en train de le recoder parce qu'il ne s'adapte plus à ce que j'avais voulu faire! Je veux bien que tu me dises aprs ce que je peu faire pour améliorer! Je reposte dés que j'ai finis

Cinq heures plus tard! XD Voici ma pa visible en place ici: http://ambrtest.forumactif.com/

HTML

Code:

<div class="tablopa">
                                  
   <table>
                                     
      <tbody>
                                        
         <tr>
                                           
            <td valign="top" style="width: 100%;">
                                              
               <div class="pa1">
                                                 
                  <div class="contextepa">
                                                    
                     <div style="font-family: 'poiret one';font-size: 20px;color: #000000;text-align : Center;">
                                        Periode de jeu               
                     </div>
                                     Nous sommes à l'automne 438 AM  <br />             
                     <div style="font-family: 'poiret one';font-size: 20px;color: #000000;text-align : Center;">
                                        Statistiques               
                     </div>
                                     23 joueurs - 8 DC<br />29 validés - 2 Inactifs <br />7 Grands - 10 Dignitaires <br /> 9 Peuple - 3 Pupilles <br /><br /> <a href="http://www.sawen.net/les-chroniques-d-ambrosia-s3121.html" target="_blank"><img src="http://i.imgur.com/w4jNMxc.png" alt="Annuaire forum RPG" title="Annuaire forum RPG" border="0" style="width:40px" data-pin-nopin="true" /></a><a href="http://frole-pbf.net/?showpage=list&id=732" target="_blank"><img src="http://i.imgur.com/y5i8AXp.png" alt="Annuaire forum RPG" title="Annuaire forum RPG" border="0" style="width: 40px; height: ;" data-pin-nopin="true" /></a><br /> <a href="https://www.infinite-rpg.fr/clans/les-chroniques-dambrosia-steampunk-politics" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/uAFqDKR.png" border="0" alt="" data-pin-nopin="true" style="width:40px" /></a> <a href="https://fr.pinterest.com/chroniqueam/" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/Gpsv1WO.png" border="0" alt="" data-pin-nopin="true" style="width:40px" /></a>                   
                  </div>
                                                   
               </div>
                                              
            </td>
                                           
            <td valign="top" style="width: 100%;">
                                              
               <div class="pa2">
                                                 
                  <div class="contextepa2">
                                                      
                     <div style="font-family: 'poiret one'; font-size: 20px; color : #796c5d; letter-spacing: 2px; padding : 10px;text-align : center;">
                                        Staff du forum               
                     </div>
                                       <br />               
                     <div style=" margin-top: -7px;margin-left: -8px;">
                                        <a href="http://chroniqueambrosia.forumactif.org/u2"><img src="http://i.imgur.com/zwiTOxb.jpg" /></a><a href="http://chroniqueambrosia.forumactif.org/u3"><img src="http://i.imgur.com/SLcBt6i.jpg" /></a>               
                        <div>
                                                          
                           <div style="font-size: 8px; color : #ffefcd;text-transform: uppercase;margin-top: 6px;margin-right:22px; padding : 10px;text-align : right;    text-shadow: 1px 1px 0 #000000;">
                                              Story         
                           </div><br />               
                           <div style=" font-size: 10px; color : #e4d5b4; padding : 10px; text-transform: uppercase;margin-top:-20px; margin-left:42px;text-align : left;    text-shadow: 1px 1px 0 #000000;">
                                              Guide         
                           </div><br />               
                           <div style="font-size: 10px; color : #e4d5b4;  text-transform: uppercase; padding : 10px;text-align : center; margin-left:36px;margin-top:-55px;    text-shadow: 1px 1px 0 #000000;">
                                              Visiteurs         
                           </div><br />                 
                           <div style="color: #e4d5b4; text-transform:uppercase; font-size: 12px; padding : 10px;text-align : right;margin-top:-2px;margin-right:px;  text-shadow: 1px 1px 0 #000000;">
                                              Reglement       
                           </div><br />               
                           <div style="font-size: 14px; color : #e4d5b4;  padding : 10px;text-align : left;margin-top:-22px;margin-left:42px;    text-transform: uppercase;  text-shadow: 1px 1px 0 #000000;">
                                              Registres               
                           </div>
                                                          
                        </div>
                                                       
                     </div>
                                                    
                  </div>
                                                 
               </div>
                                              
            </td>
                                           
            <td valign="top" style="width: 100%;">
                                              
               <div class="pa3">
                                                 
                  <div class="contextepa3">
                                         •Optimisation Chrome-Mozilla <br /><br />    •Steampunk, Victorien, Politique<br /><br />    •Création originale de Lilith de Choiseul et Everard Zullheimer<br /><br />    •Design par Lilith de Choiseul<br /><br />    •Contexte par Everard Zullheimer<br /><br />    •Codage par Skaemp et Never Utopia<br /><br />    • Ouvert le 22/01/2017<br /><br /> <img src="http://img11.hostingpics.net/pics/529848731.png" data-pin-nopin="true" style="width:35px" /> <img src="http://img15.hostingpics.net/pics/5731735415.png" data-pin-nopin="true" style="width:35px" />               
                  </div>
                                                     
               </div>
                                              
            </td>
                                           
            <td valign="top" style="width: 100%;">
                                              
               <div class="pa4">
                                                 
                  <div class="contextepa4">
                                                                                                                                                                                                                  
                     <div style="font-family: 'poiret one'; font-size: 20px; color : #; letter-spacing: 2px; padding : 2px;text-align : center">
                                                                                                                                                Prédéfinis                                                                                                                 
                     </div><a rel="nofollow" target="_blank" class="postlink" href="http://chroniqueambrosia.forumactif.org/t39-libre-aurelius-saint-clair-ministre-des-finances"><img alt="" src="http://i.imgur.com/yyzAtTg.jpg" border="0" /></a> <a href="http://chroniqueambrosia.forumactif.org/t182-libre-toussain-saint-pierre-ambassadeur-raclusien" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/yyzAtTg.jpg" alt="" border="0" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://chroniqueambrosia.forumactif.org/t38-libre-lucius-chevalier-peintre-promis-a-la-grandeur"><img alt="" src="http://i.imgur.com/yyzAtTg.jpg" border="0" /></a> <a href="http://chroniqueambrosia.forumactif.org/t218-till-ivarson-employe-aux-arguments" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/yyzAtTg.jpg" alt="" border="0" /></a>  <a href="http://chroniqueambrosia.forumactif.org/f10-passeports-ambrosiens" class="postlink" target="_blank" rel="nofollow">D'autres? </a> - <a href="http://chroniqueambrosia.forumactif.org/f76-pre-liens?tid=3a30a7ccfb38fff6aa33ec5aaaf6acb4" class="postlink">Pré-liens</a>    <br /><br /> 
                     <div style="font-family: 'poiret one';font-size: 20px;color: #000000;letter-spacing: 2px;padding : 10px;text-align : Center; ">
                                        Top partenaires               
                     </div>
                                                    
                     <div class="partenairetaille">
                                          <a href="http://marbrume.forumrpg.org/"><img src="http://i21.servimg.com/u/f21/12/99/58/89/bouton11.jpg" /></a><a href="http://taavt.forumactif.org/"><img src="http://img15.hostingpics.net/pics/157608logo1.png" /></a>  <a href="http://irydae.forumactif.org/" target="_blank"><img src="http://img15.hostingpics.net/pics/896416partenariats100x35.png" /></a><a href="http://weirdtales.forumactif.org/"><img src="http://i68.servimg.com/u/f68/19/30/69/14/part310.png" /></a><a href="http://redioactif.forumactif.org"><img src="http://img15.hostingpics.net/pics/799310Redioactif8831.png" /></a><a href="http://chroniqueambrosia.forumactif.org/" target="_blank"><img src="http://img11.hostingpics.net/pics/1248038210.jpg" /></a>                <br /><a href="http://chroniqueambrosia.forumactif.org/t47-annuaireuuuuuuuuuuuu#69/" target="_blank">Plus?</a>-<a href="http://chroniqueambrosia.forumactif.org/t30-demandes-de-partenariat" target="_blank"> Vous?</a>                   
                     </div>
                                        
                  </div>
                                                     
               </div>
                                              
            </td>
                                                                       
         </tr>
                                        
      </tbody>
                                     
   </table>
</div>

CSS

Code:


.tablopa{
    background-image: url(http://i.imgur.com/z4sTCXI.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 880px;
  margin-left: -30px;}

.pa1{
      color: #645f57;
    font-family: marcelus sc;
    font-size: 15px;
    height: 260px;
    margin-left: 10px;
    margin-top: 10px;
    opacity: .8;
    overflow: auto;
    padding: 3px 2px 0 3px;
    text-align: justify;
    width: 200px;
}

.contextepa{ 
      color: #190f06;
    font-family: marcelus sc;
    font-size: 11px;
    height: 240px;
    margin-left: 5px;
    overflow: auto;
    padding: 10px;
    text-align: center;
    width: 160px;
}

.pa2{

    border-radius: 20px;
    color: #645f57;

    font-size: 15px;
    height: 280px;
      overflow: auto;
    padding: 3px 2px 0 3px;
    text-align: justify;
    width: 210px;
}

.contextepa2{ 
    border-radius: 15px;
    color: #88786c;
    font-family: marcelus sc;
    font-size: 11px;
    height: 250px;
    margin-left: -9px;
    overflow: auto;
    padding: 10px;
    width: 200px;
    text-align: justify;

}
.pa3{
   
  color: #645f57;
    font-family: marcelus sc;
    font-size: 15px;
    height: 290px;
    margin-left: -10px;
    margin-top: 10px;
    opacity: .8;
    overflow: auto;
    padding: 3px 2px 0 3px;
    text-align: justify;
    width: 200px;
}

.contextepa3{ 

        color: #150e06;
    font-family: marcelus sc;
    font-size: 12px;
    height: 250px;
    line-height: 10px;
    margin-left: -5px;
    margin-top: 10px;
    overflow: auto;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    width: 170px;
}

.pa4{
 
    color: #645f57;
    font-family: marcelus sc;
    font-size: 15px;
    height: 280px;
    margin-left: -20px;
    margin-top: 10px;
    opacity: .8;
    overflow: auto;
    padding: 3px 2px 0 3px;
    text-align: justify;
    width: 250px;
}

.contextepa4{ 
   
        color: #000000;
    font-family: marcelus sc;
    font-size: 11px;
    height: 250px;
    margin-left: 6px;
    /* margin-top: 7px; */
    overflow: auto;
    padding: 10px;
    text-align: center;
    width: 220px;
}



.partenairetaille img{
  width: 60px;}


Me revoilà ! Désolée pour le retard j’ai été prise ses derniers jours :S Alors j’ai regardé ton code et c’est vraiment pas mal du tout ! Bravo tu t’en es très bien tirée je trouve ! A mes débuts, je ne savais pas du tout en faire autant :) Ce n’est pas parfait, mais il est bien. Je vais essayer de t’aider à l’améliorer du coup ^^
Alors, tout d’abord, pour tes titres, je te conseille de faire aussi une div class, que tu vas créer en css. Le code est le même pour tous, alors autant faire une class, comme ça tu allèges ton code (j’entends par titre « Période de jeu, Statistiques ect.)
Tu peux aussi réduire les liens que tu as inséré, quand ils mènent sur ton forum et non vers l’extérieur. Par exemple tu peux transformer « http://chroniqueambrosia.forumactif.org/u2 » en « /u2 » tout simplement =D Bien sûr, cela ne fonctionnera QUE sur ton forum. Mais vu que, d’après ce que j’ai compris, cette mini PA n’a pas lieu d’être exportée ailleurs, tu peux te le permettre !
J’ai vu que tes images staff dépassées un peu du cadre fait. Veux-tu les faire remonter, ou cela te convient ainsi ? Ce n’est pas choquant du tout hein ! Je te demande « en cherchant les petits bêtes » pour voir comment t’aider un peu plus !
Tu n’as pas mis de liens sur « guide », « visiteurs » « registres » « règlement ». Un oubli ? Ou tu n’y es pas arrivé ? Là encore, je te conseille pour eux de mettre une div class pour tout ce qu’il y a de commun et d’ajouter un petit style pour changer la taille et la position. Je te conseille aussi d’enveler les < / br > qui sont entre tes div, vu que tu détermines déjà leur position en style. Par exemple

Code:

 <div class="titreliens" style="font-size: 8px; margin-top: 6px;margin-right:22px; text-align : right;"> Story </div>             
                              <div class="titreliens" style="margin-top:-20px; margin-left:42px;text-align : left; ">Guide </div>
                              <div class="titreliens" style=" text-align : center; margin-left:36px;margin-top:-55px;"> Visiteurs </div>


Et en css par exemple :

Code:

.titreliens{
font-size: 10px;
color : #e4d5b4; 
text-transform: uppercase;
padding : 10px;}

Tu vois ce que je veux ?

Tu ouvres deux div en même temps, qui sont aussi fermés en même temps. pa2 et contextepa2 . Sachant que tu détermines déjà des attributs aux éléments à l’intérieur avec d’autres div, je pense qu’elles sont useless et que tu peux les enlever. Tu n’as pas besoin d’arrondi ici, ni de couleur (défini autre part), ni de la taille de ton texte, ni de scroll barr, ni de justifier ton texte Donc tu peux les enlever de ton code et de ton css (sans oublier d’enlever leur < / div > associé !)

Même remarque du coup pour pa4 et contextepa4. Je te conseille de n’en garder qu’une pour définir la taille des petits textes de liens « d’autres – préliens – plus ? – vous ? »

Ça c’est pour la partie html. Maintenant la partie css. Nous allons l’alléger en enlever les codes qui ne te servent à rien ici =D
Dans le code pa1, tu peux enlever, à mon avis, opacity (tu n’en as pas besoin), owerflow, (idem) text-align (tu as tout centré donc le justifié ne sert à rien).
Je supprimerais totalement contextepa si tu gardes pa1 ou inversement. L’un et l’autre sont des doublons comme je te l’ai dis pour les autres plus haut (il m’a échappé dans ton html omme quoi c’est bien de regarder plusieurs fois xD)

Pa2 / contextepa2, tu peux en enlever l‘un des deux + retirer border radius que tu n’utilises pas ici, overflow idem, text-align.

Pa3/contextepa3 je te dirais la même chose. Tu peux en retirer l’un des deux et le vider de ce que tu t’utiliser pas (je pense ici supprimer pa3 et overflow auto à l’intérieur)

Pa4/contextepa4 même combat encore une fois =D

Sinon de manière générale, je te conseille de rassembler les codes qui vont ensembles, pour que ton css soit plus simple à aborder. Je te donne un exemple. Pour contextepa4 (c’est le code que j’ai actuellement sous les yeux donc je le prends en exemple ) je commencerais par les codes définissant la taille en mettant d’abord la largeur et ensuite la hauteur. Ensuite, je mettrais tout ce qui correspond au positionnement de la div, en faisant « général / droite / gauche / haut / bas ». ensuite, je rassemble ce qui correspond au texte. Cela donnera du coup

Code:

 .contextepa4{
width: 220px;
height: 250px;
padding: 10px;
overflow: auto;
margin-left: 6px;
text-align: center;
color: #000000;
font-size: 11px;
font-family: marcelus sc;
}

Tu vois un peu ce que je veux dire en rangeant tes codes ? C’est plus lisible et c’est plus « cohérent ». Et tu t’y retrouveras mieux !

Coucou!!! Je vais la retravailler dans l'aprem, je viens de passerla matinée à refaire un tuto pour arranger le fond du fofo qui merdait grave à tout se décalé mais je sais même pas si ça marche j'attennds les retours HAHA

Kanala a écrit:Me revoilà ! Désolée pour le retard j’ai été prise ses derniers jours :S Alors j’ai regardé ton code et c’est vraiment pas mal du tout ! Bravo tu t’en es très bien tirée je trouve ! A mes débuts, je ne savais pas du tout en faire autant :) Ce n’est pas parfait, mais il est bien. Je vais essayer de t’aider à l’améliorer du coup ^^

Merci! Je dois avouer que c'est le deuxième truc que je prend le temps de vraiment coder moi-meme, ça fait sept ans que je touche au codemais destout faits! Donc changer couleur machin pas pareil quoi là!

Kanala a écrit:
Alors, tout d’abord, pour tes titres, je te conseille de faire aussi une div class, que tu vas créer en css. Le code est le même pour tous, alors autant faire une class, comme ça tu allèges ton code (j’entends par titre « Période de jeu, Statistiques ect.)

J'ai eu la flemme mais j'y avais pensé

Kanala a écrit:
Tu peux aussi réduire les liens que tu as inséré, quand ils mènent sur ton forum et non vers l’extérieur. Par exemple tu peux transformer « http://chroniqueambrosia.forumactif.org/u2 » en « /u2 » tout simplement =D Bien sûr, cela ne fonctionnera QUE sur ton forum. Mais vu que, d’après ce que j’ai compris, cette mini PA n’a pas lieu d’être exportée ailleurs, tu peux te le permettre !

Je connaissais pas ça trop bien merci!!

*et là mon message a cafouillé....*

Pour les div:

J'ai pas vu :omais j'arrangerais

Pour les saut à la ligne:

je vois! Enfin je crois, les br ne servent à rien là vu que je bouge chaque mot c'est ça?

POuruqoi y a des trucs en plus:

Là encore la flemme. parce qu'à la base pr me repérer pour faire l'image j'avais fait plusieur "boite/cadre" pour positionner en fait XD bref

pour les doublons:

J'ai pas besoin de faire une boite dans une boite c'est ça? :Dhuhu

Pour ranger:

Merci du conseil, je suis du genre bordéllique, donc ça se voit dans mon code mdr !

Je vais prendre mon temps pour corriger je te remercie de ton aide c'est méga cool sympa -l'expression de vieille XD- Désolé pour le message ça m'a sauté tous mes codes quand j'ai posté, j'ai vite corrigé là sorry

Hellow there ~

C'est toujours d'actualité?

Pas de nouvelles, j'archive.