Pouvez vous m'aider à simplifier ce code ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Pouvez vous m'aider à simplifier ce code ?

Message par Guilde-Egregore le Dim 15 Mar 2015 - 18:58

Bonjour, j'ai besoin d'aide pour simplifier ce code. À vrais dire j'ai ajouté beaucoup trop de tableau pour faire la mise en forme que j'avais envie mais j'ai vu qu'il y a une méthode plus simple mais que je n'arrive pas à reproduire.

Au final j'ai besoin de cette mise en page pour reproduire plusieurs tableau.

Merci bonne fin de weekend !

Code:
<table border="1">
                            
   <tbody>
      <tr>
                                
         <td>
                                 
            <table _moz_resizing="true" style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15mar10.png'); background-repeat: repeat; width: 100%;" cellpadding="10" cellspacing="10">
                                                                                                                                                                                                                                                                                                                                                                                                                      
               <tbody>
                  <tr>
                                                                                                                                                                                                                                                                                                                                      
                     <td align="justify">
                                                                                                                                                                                <img src="http://i38.servimg.com/u/f38/18/73/48/08/hdv_gr11.png" />                                                                                                                                                       
                     </td>
                                                                                                                                                                                                                                                                                                                                        
                     <td style="font-size: 16px;" align="justify">
                                                                                                                                                                                <em><strong>  « Je souhaite consulter le catalogue de l'hôtel des trocs et des ventes du groupement Égrégore ! »</strong></em>                                                                                                                                                       
                     </td>
                                                                                                                                                                                                                                                                                                                                      
                  </tr>
                                                                                                                                                                                                                                                                                                                                                                                                             
               </tbody>
            </table>
                                 
            <table _moz_resizing="true" style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png'); background-repeat: repeat; width: 100%;" cellpadding="20" cellspacing="20">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
               <tbody>
                  <tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                     <td align="justify">
                                                                                                                                                                                                                                                                                                                                        <span style="font-size: 16px;">« Gleps ! Regarde à droite en sortant de la maison dans les marchandises, tu le trouvera sans doute.<br /><br />Et ne fais pas comme tout les autres, rapporte le moi ! Et ne pique rien, de toute manière je peux te voir de la fenêtre ! Eh ! Tu m'écoutes quand... »</span><br /> <br />     
                        <div align="center">
                               <span style="font-size: 16px;"><em>Tu viens de sortir et les marchandises sont à ta droite.</em></span>   
                        </div>
                               
                        <hr />
                                             
                        <table style="width: 100%;">
                                                                                                                                                                                                                                                                                                                                                        
                           <tbody>
                              <tr>
                                                                                                                                                                                                                                                                                                                                                                                                            
                                 <td align="center">
                                                      <br />    <a href="http://guilde-egregore.forumactif.org/t282-hotel-des-trocs-et-des-ventes-du-groupement-egregore#1116" target="_blank" title="Chercher le catalogue dans les marchandises, le trouver puis le consulter.">    <img src="http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png" alt="L'affichage de l'image ne se fait pas correctement veuillez contacter l'administrateur pour obtenir de l'aide." onmouseout="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png';" onmouseover="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvtr10.png';" /></a>                                                                                                                                                                                                                               
                                 </td>
                                                                                                                                                                                                                                                                                                      
                              </tr>
                                                                                                                                                                                                                                                                                                                                                                       
                           </tbody>
                        </table>
                                                                                                                                                                                                                                                                                                                                                                         
                     </td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
                  </tr>
                                                                                                                                                                 
               </tbody>
            </table>
                                                                                 
         </td>
                                
      </tr>
                           
   </tbody>
</table>


Dernière édition par Guilde-Egregore le Ven 20 Mar 2015 - 13:15, édité 1 fois

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pouvez vous m'aider à simplifier ce code ?

Message par demeter1 le Dim 15 Mar 2015 - 19:08

En utilisant html validator, voici ce que l'on obtient. Maintenant, à savoir quel résultat final tu souhaites avoir.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title></title>

<style type="text/css">
 table.c6 {background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png'); background-repeat: repeat; width: 100%;}
 table.c5 {width: 100%;}
 div.c4 {text-align: center}
 span.c3 {font-size: 16px;}
 table.c2 {background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15mar10.png'); background-repeat: repeat; width: 100%;}
 td.c1 {font-size: 16px;}
</style>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>
<table class="c2" cellpadding="10" cellspacing="10">
<tbody>
<tr>
<td align="justify"><img src="http://i38.servimg.com/u/f38/18/73/48/08/hdv_gr11.png" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
<td class="c1" align="justify"><em><strong>« Je souhaite consulter le catalogue de l'hôtel des trocs et des ventes du groupement Égrégore ! »</strong></em></td>
</tr>
</tbody>
</table>
<table class="c6" cellpadding="20" cellspacing="20">
<tbody>
<tr>
<td align="justify"><span class="c3">« Gleps ! Regarde à droite en sortant de la maison dans les marchandises, tu le trouvera sans doute.<br>
<br>
Et ne fais pas comme tout les autres, rapporte le moi ! Et ne pique rien, de toute manière je peux te voir de la fenêtre ! Eh ! Tu m'écoutes quand... »</span><br>
<br>
<div class="c4"><span class="c3"><em>Tu viens de sortir et les marchandises sont à ta droite.</em></span></div>
<hr>
<table class="c5">
<tbody>
<tr>
<td align="center"><br>
<a href="http://guilde-egregore.forumactif.org/t282-hotel-des-trocs-et-des-ventes-du-groupement-egregore#1116" target="_blank" title="Chercher le catalogue dans les marchandises, le trouver puis le consulter."><img src="http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png" alt="L'affichage de l'image ne se fait pas correctement veuillez contacter l'administrateur pour obtenir de l'aide." onmouseout="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png';" onmouseover="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvtr10.png';"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>


demeter1
+ Hyperactif +

Masculin
Messages : 8224
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pouvez vous m'aider à simplifier ce code ?

Message par Guilde-Egregore le Dim 15 Mar 2015 - 19:53

Merci pour cette réponse aussi rapide.

Je vais essayer ça et pour l'ensemble aussi.

Édition : Le code est toujours aussi compliqué, même plus car il y a des codes que je ne connais pas. Merci tout de même.

#MlleAlys avait fait une super réduction d'un de mes tableaux.

Voici ce que je dois mettre en page correctement mais vu le boulguiboulgua que c'est j'ai un peu de mal.

http://guilde-egregore.forumactif.org/h4-rendez-vous-en-quatre-moins-dix-sept

C'est enfaite le code avec les images :

Code:
<table style="table-layout: fixed; width: 100%; height: 600px;" border="1">
                                                                                              
   <tbody>
             
      <tr>
                                                                                                        
         <td rowspan="2" style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/statue13.jpg'); background-size:cover; background-position: center center; width:250px; position:relative;">
                                                                                      <img src="http://i38.servimg.com/u/f38/18/73/48/08/teteoi11.gif" style="position:absolute; top:60px; left:80px;" />                                                                     
            <div style="font-size:24px; font-family:gigi,georgia; color:#FFFFFF; text-align:center; font-style:italic; font-weight:bold; background:rgba(255,255,255,0.3); position:absolute; left:0; right:0; top:400px; padding:5px;">
                                                                                             « Astrub, la cité de la paix.<br />Rendez-vous des oiseaux migrateurs... »                                                                         
            </div>
                                                                                                               
         </td>
                                                                                                        
         <td style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/laport12.jpg'); background-size:cover; background-position: right top; width:450px; height:350px;">
                                                                             
         </td>
                                                                                                        
         <td rowspan="2" style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/audess12.jpg'); background-size:cover; background-position:  left center;">
                                                                                                                       
            <div class="marquee">
                                       <img src="http://img11.hostingpics.net/pics/884365audessusastrubnuages1600x600.png" />                                   
            </div>
                                                                                                               
         </td>
                                                                                                    
      </tr>
                                                                                               
      <tr>
                                                                                                      
         <td style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/enchan13.png'); background-size:cover; background-position: left center; height: 250px;">
                                                                             
         </td>
                                                                                                    
      </tr>
                                                                                           
   </tbody>
</table>

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pouvez vous m'aider à simplifier ce code ?

Message par Scoubifitz le Mar 17 Mar 2015 - 3:28

Bonjour,

un code sans aucun tableau :

Code:
<div style="border:3px double #aaa;max-width:800px;margin:auto;font-size:16px;">

  <div style="background: url('http://i38.servimg.com/u/f38/18/73/48/08/t15mar10.png');padding:10px 0 20px;">
<img src="http://i38.servimg.com/u/f38/18/73/48/08/hdv_gr11.png" align="left" hspace="20"/>
    <p style="font-weight:bold;font-style:italic;"> « Je souhaite consulter le catalogue de l'hôtel des trocs et des ventes du groupement Égrégore ! »</p>
  </div>

  <div style="background:url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png');padding:20px;text-align:justify">
    <p>« Gleps ! Regarde à droite en sortant de la maison dans les marchandises, tu le trouvera sans doute.</p>
    <p>Et ne fais pas comme tout les autres, rapporte le moi ! Et ne pique rien, de toute manière je peux te voir de la fenêtre ! Eh ! Tu m'écoutes quand... »</p>

    <div style="text-align:center;margin:30px 0 20px;font-style:italic;">
      Tu viens de sortir et les marchandises sont à ta droite.
    </div>

    <hr/>

    <div style="text-align:center;margin:30px 0 20px">
      <a href="http://guilde-egregore.forumactif.org/t282-hotel-des-trocs-et-des-ventes-du-groupement-egregore#1116" target="_blank" title="Chercher le catalogue dans les marchandises, le trouver puis le consulter."><img src="http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png" alt="L'affichage de l'image ne se fait pas correctement veuillez contacter l'administrateur pour obtenir de l'aide." onmouseout="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png';" onmouseover="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvtr10.png';"/></a>
    </div>

  </div>
</div>

un cadre principal , un cadre pour l'image et le fond beige , un cadre pour le texte et le fond "cahier" ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pouvez vous m'aider à simplifier ce code ?

Message par Guilde-Egregore le Ven 20 Mar 2015 - 13:12

Merci je vais tester ça. Pardonnez-moi pour le temps de réponse !

Édition : C'est beaucoup plus compréhensible de cette manière ! Merci !

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum