Mise en page en fonction de la taille de la fenêtre et organisation globale.

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

Résolu Mise en page en fonction de la taille de la fenêtre et organisation globale.

Message par Guilde-Egregore le Sam 24 Oct 2015 - 12:45

Bonjour, je n'arrive pas à organiser mon message d'annonce correctement. La partie qui m'intéresse pour le moment c'est celle de gauche avec les images.

En effet j'ai voulu faire en sorte de garder des mesures proportionnelles pour que lors d'un changement de taille de fenêtre l'affichage soit garantit.

Pour la partie de gauche je souhaite que la la créature avec les petites antennes soit toujours visible et que le texte qui est autour ai l'apparence de bulle de bande dessinée le tout sans problème d'affiche en fonction de la taille de la fenêtre.

Après s'il faut changer l'image de fond et ajouter une image de la créature aux antennes indépendante du fond, c'est possible.

Pour finir c'est du bricolage et s'il y a un moyen de rendre le tout facilement compréhensible ce n'est pas de refus !

Bon weekend !

Code:
<script src="http://tinyurl.com/var-fa" type="text/javascript"></script> <span class="ONLINE"></span>
<div style="white-space: normal; height: 300px;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
   <table style="width: 100%; height: 100%;" _moz_resizing="true">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
      <tbody>
         <tr align="center">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
            <td align="center" style="width:40%;">
                                                                                                                                                                                                                                             
               <table border="0" style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/annonc19.png'); background-repeat: no-repeat; background-size: cover; width: 100%; height: 95%;">
                                                                                                                                                                                                                                                                                                                                                                                                                              
                  <tbody>
                     <tr>
                                                                                                                                                                                                                                                                                                          
                        <td valign="top" align="center">
                                                                                                                                                                                                                                                                                                           
                           <table style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t25bla10.png'); background-repeat: repeat; width: 100%;">
                                                                                                                                                                                                                                                                                                                                                                                                                                          
                              <tbody>
                                 <tr>
                                                                                                                                                                                                                                                                                                                      
                                    <td align="center">
                                                                                                                                                                                                                                                                                                 
                                       <table style="width: 95%;">
                                                                                                                                                                                                                                                                                                                                                                                                            
                                          <tbody>
                                             <tr>
                                                                                                                                                                                                                                                                                                            
                                                <td align="justify">
                                                                                                                                                                                      <span style="font-size: 13px;">« Merci <span class="USERNAME"></span> pour ta présence  sur le forum de la guilde Égrégore ! Tu as envoyé actuellement <span class="USERCOUNTPOST"></span> messages, mais mes petites antennes me disent que tu peux faire mieux ! »</span>                                                                                                                                            
                                                </td>
                                                                                                                                                                                                                                                                                                            
                                             </tr>
                                                                                                                                                                                                                                                                                                                                                                                                             
                                          </tbody>
                                       </table>
                                                                                                                                                                                                                                                                                                       
                                    </td>
                                                                                                                                                                                                                                                                                                                      
                                 </tr>
                                                                                                                                                                                                                                                                                               
                              </tbody>
                           </table>
                                                                                                                                                                                                                                                                                                                                                                                   
                        </td>
                                                                                                                              
                     </tr>
                                             
                     <tr>
                                                                                                                                                                                                                                                                                                          
                        <td valign="top" align="right">
                                                                                                                                                                     <br />                                                                                                                                      
                           <table style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t25bla10.png'); background-repeat: repeat; width: 40%; height: 100%;">
                                                                                                                                                                                                                                                                                                                                                                                                                                          
                              <tbody>
                                 <tr>
                                                                                                                                                                                                                                                                                                                      
                                    <td align="center">
                                                                                                                                                                                                                                                                                                 
                                       <table style="width: 95%;">
                                                                                                                                                                                                                                                                                                                                                                                                            
                                          <tbody>
                                             <tr>
                                                                                                                                                                                                                                                                                                            
                                                <td align="justify">
                                                                                                                                                                                      <span style="font-size: 13px;">« Le dernier candidat à s'être enregistré est <span class="FORUMLASTUSERLINK"></span>.<br /><br />Les membres de la guilde doivent, si ce n'est pas déjà fait, accueillir comme il se doit les candidats en votant et en commentant leur fiche de candidature. Cette fiche est rendue disponible par le service de recrutement dans le forum <a href="http://guilde-egregore.forumactif.org/f29-etat-des-candidatures">état des candidatures</a>. »</span>              
                                                </td>
                                                                                                                                                                                                                                                                                                            
                                             </tr>
                                                                                                                                                                                                                                                                                                                                                                                                             
                                          </tbody>
                                       </table>
                                                                                                                                                                                                                                                                                                       
                                    </td>
                                                                                                                                                                                                                                                                                                                      
                                 </tr>
                                                                                                                                                                                                                                                                                               
                              </tbody>
                           </table>
                                                                                                                                                                                                                                                                                                                                                                                   
                        </td>
                                                                                                                              
                     </tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                  </tbody>
               </table>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
            </td>
                                                                                                                                                                                                                                                                                                                                                                                                  
            <td style="width: 25%;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
               <table cellspacing="4" cellpadding="0" style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png'); background-repeat: repeat; width: 220px; height: 100%;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                  <tbody>
                     <tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                        <td valign="top" align="justify">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                           <div align="center" style="font-size: 13px;">
                                                                                                                                                                                                                                                              <strong><span style="text-decoration: underline;">ACCUEIL DES CANDIDATS</span></strong>                                                                                                                                                                                                                                
                           </div>
                                                                                                 
                           <div align="right">
                                                                                               <img src="http://i18.servimg.com/u/f18/18/73/48/08/edicin10.png" />                                                                                                                                                                                                  
                           </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                        </td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                     </tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
                  </tbody>
               </table>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
            </td>
                                                                                                                                                                                                                                                                                                                                            
            <td style="width:25%;">
                                                                                                                                                                                                                                                                                                                                                                                                   
               <table cellspacing="0" cellpadding="0" style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png'); background-repeat: repeat; width: 220px; height: 100%;" _moz_resizing="true">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                  <tbody>
                     <tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                        <td valign="top" align="justify">
                                             <iframe style="width: 100%; height: 100%;" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" frameborder="0" src="https://docs.google.com/presentation/d/1qza0fjtxPOOy3Y5n_3V_VZXibHZJDmvULvjm4PluIp8/embed?start=true&loop=true&delayms=5000"></iframe>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                        </td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                     </tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
                  </tbody>
               </table>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
            </td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
         </tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
      </tbody>
   </table>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
</div>


Dernière édition par Guilde-Egregore le Dim 25 Oct 2015 - 15:25, é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: Mise en page en fonction de la taille de la fenêtre et organisation globale.

Message par Scoubifitz le Sam 24 Oct 2015 - 23:28

Bonsoir,

Si j'ai bien compris , seule la partie de gauche devra s'adapter à une certaine largeur d'affichage .
Les deux autres parties resteront fixes avec une largeur de 220px .

Ce qui ferait une largeur de 220 + 220 + environ 220 minimum pour la partie de gauche , donc 660 mini .

Un tableau avec 3 colonnes suffirait pour tout ça .
Pas besoin de mettre des tableaux dans des tableaux ... Ça alourdit le code , et le rend difficile à déchiffrer .

Une div (un cadre) pour la première bulle ,
une div spéciale pour créer une flèche vers le bas , flottant à une certaine marge de la gauche ,
une div pour la bulle de droite , flottant à droite ,
et une div spéciale pour créer une flèche vers la gauche , flottant à droite , à une certaine marge du haut .

On arrondit les div "bulles" , et on les empêche de déborder le texte avec un overflow.

En résumé :
au dessus de 800px , la colonne de gauche s'élargit , le fond aussi , les bulle s'adaptent à la cellule du tableau .
de 800 à 670px , le contenu des bulles aura une barre de défilement .
en dessous de 670 px , le 2 colonnes de droite s'adapteront .

Pour la colonne du milieu , on peut mettre la signature en image de fond ...

Un essai ?

Code:
<script src="http://tinyurl.com/var-fa" type="text/javascript"></script>
<span class="ONLINE"></span>
<div style="white-space: normal;">
   <table style="width: 100%;height:300px">
   <tbody>
   <tr>
      <td valign="top" style="background: url('http://i21.servimg.com/u/f21/12/14/82/30/annonc10.png') no-repeat left bottom; background-size: cover;min-width:220px;">
         <div style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t25bla10.png'); background-repeat: repeat;padding:5px;margin:5px 5px 0;text-align:justify;max-height:50px;overflow:auto;border-radius:20px">
            <span style="font-size: 13px;">« Merci <span class="USERNAME"></span> pour ta présence sur le forum de la guilde Égrégore ! Tu as envoyé actuellement <span class="USERCOUNTPOST"></span> messages, mais mes petites antennes me disent que tu peux faire mieux ! »</span>
         </div>
         <div style="width: 0px;height: 0;border-style: solid;border-width: 50px 10px 0 10px;border-color: rgba(255,255,255,0.7) transparent;margin:0 0 0 20% ;float:left; ">
         </div>
         <div style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t25bla10.png'); background-repeat: repeat; width: 45%;padding:5px;margin:5px 5px 5px 0;text-align:justify;height:210px;overflow:auto;float:right;border-radius:20px;font-size: 13px;">
            « Le dernier candidat à s'être enregistré est <span class="FORUMLASTUSERLINK"></span>.<br/><br/>Les membres de la guilde doivent, si ce n'est pas déjà fait, accueillir comme il se doit les candidats en votant et en commentant leur fiche de candidature. Cette fiche est rendue disponible par le service de recrutement dans le forum <a href="http://guilde-egregore.forumactif.org/f29-etat-des-candidatures">état des candidatures</a>. »
         </div>
         <div style="width: 0;height: 0;border-style: solid;border-width: 10px 50px 10px 0;border-color:transparent rgba(255,255,255,0.7) transparent;margin:135px 0 0;float:right;">
         </div>
      </td>
      <td style="background-image:url('http://i18.servimg.com/u/f18/18/73/48/08/edicin10.png'),url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png'); background-repeat: no-repeat,repeat;background-position: bottom right, center; width: 220px;" valign="top">
         <div style="text-align:center;font-size: 13px;font-weight:bold;text-decoration: underline;">
            ACCUEIL DES CANDIDATS
         </div>
      </div>
   </td>
   <td style="width: 220px;">
      <iframe style="width: 100%; height: 100%;" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" frameborder="0" src="https://docs.google.com/presentation/d/1qza0fjtxPOOy3Y5n_3V_VZXibHZJDmvULvjm4PluIp8/embed?start=true&loop=true&delayms=5000">
      </iframe>
   </td>
</tr>
</tbody>
</table>
</div>

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: Mise en page en fonction de la taille de la fenêtre et organisation globale.

Message par Guilde-Egregore le Dim 25 Oct 2015 - 9:49

Bonjour ! C'est magnifique ce que vous avez réalisé ! Shocked cheers

C'est en partie ce que je souhaitais mais il est vrais que je n'ai pas été clair dans mon message initial ! J'avais eu un sucis de redimensionnement l’image ne s'affichait pas correctement sur les différentes taille d'écrans. J'ai déjà une bonne base bien plus clair que celle que j'avais bricolé. Smile

Il n'y aura que deux colonnes, je pensais l'avoir enlevé dans le code que j'ai fournis à mon premier message.

Hier après-midi j'avais essayé quelques trucs de mon coté, sans succès et j'ai eu quelques nouvelles idées.

Pour finir je vais essayer de faire mes deux trois petites modifications en me servant de ce que vous avez fait.

Édition : Je n'arrive pas à modifier la partie pour la rendre 440x300, sans barre de défilement et que la bulle blanche du dessous s'adapte au texte.

Finalement je pense à un maximum de w700xh300 pour l'annonce. avec une colonne entre les deux partie qui évolue en largeur en focntion de la taille de la fenêtre.
(La largeur du forum est de 80%, je ne sais pas exactement ce que ça représente.)


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.
  • 0

Résolu Re: Mise en page en fonction de la taille de la fenêtre et organisation globale.

Message par Guilde-Egregore le Dim 25 Oct 2015 - 15:24

C'est bon ! Merci beaucoup pour votre aide ! Smile

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