Encore un problème de calque

Encore un problème de calque - HTML/CSS - Programmation

Marsh Posté le 03-02-2004 à 10:47:08    

Et oui, encore un problème de calque.
Je vous détaille la situation, je dois reproduire les plaquettes commerciales de ma société sous forme de page HTML, le problème étant que pour reproduire une mise en page assez compliquée je me suis servi des calques (en forte quantité).
 
Aujourd'hui se pose le problème de la gestion des différentes résolutions d'écran : je me retrouve avec des pages pleines de calques et j'aimerai que ceux ci gardent la même mise en page quelle que soit la résolution employée.
 
Hors je pense que ce raisonnement à des limites : si on prend l'exemple de deux calques mis cote à cote sachant que chacun à une largeur de 400 pixels, je suppose que si l'utilisateur est en 640*480 il aura des ascenseurs obligatoirement.
 
Je ne vois qu'un seul moyen : se débrouiller pour que les calques soit dimensionnés automatiquement.
 
Faite moi part de vos méthode SVP
 
PS : Sauriez vous ou je peux me procurer de la documentation sur les méthodes de développement appliquées au web, du style quelle langage utiliser pour telle situation ou encore quelle solution pour tel problème... en fait je débute en matière de développement WEB et je me débrouille pour me former alors ce genre de documentation serai la bienvenue.

Reply

Marsh Posté le 03-02-2004 à 10:47:08   

Reply

Marsh Posté le 03-02-2004 à 11:01:48    

Si pour toi la mise en page est importante, je te déconseille FORTEMENT de raisonner avec des valeurs exprimées en % pour tes calques, car dans le cas d'un écran trop petit (640 / 400 (rarissime)), tu auras des sauts de lignes partout et une hauteur globale prodigieuse, et dans celui d'un écran trop grand (1600 / 1200 par exemple), tu auras tout sur une ou deux lignes.
 
Le plus raisonnable quand on tient à garder toujours la même mise en page est de faire son site pour une résolution de 800/600. En pratique, cela signifie qu'on prévoit une page avec une largeur maximum de 760 px. La hauteur d'un site web n'existe pas. En effet, avec les différentes toolbars qu'on rencontre d'un navigateur à l'autre, plus les google too bar... il n'y a pratiquement jamais la même hauteur chez tout le monde. De plus, ceux qui ont un grand écran navigue en mode fenêtré et n'utilise pas tout leur écran pour surfer.
 
Voilà.

Reply

Marsh Posté le 03-02-2004 à 13:22:01    

Donc selon toi mieux vaudrait travailler en pixels et imposer une optimisation 800*600 avec une mise en page fixe, même si je me retrouve avec des marges tres importantes en 1024*768 (sic...!) du coté droit de la page?

Reply

Marsh Posté le 03-02-2004 à 13:23:20    

frere tuck a écrit :

Donc selon toi mieux vaudrait travailler en pixels et imposer une optimisation 800*600 avec une mise en page fixe, même si je me retrouve avec des marges tres importantes en 1024*768 (sic...!) du coté droit de la page?  


 
oui (tu peux centrer le contenu global dans ta page aussi pour avoir une marge répartie à gauche et à droite).


Message édité par Hermes le Messager le 03-02-2004 à 13:23:50
Reply

Marsh Posté le 03-02-2004 à 13:36:03    

bon et bien merci beaucoup je pense que je vais opter pour un alignement à gauche parce que les utilisateurs qui sont en 800*600 auront plus de facilités pour lire le contenu de cette façon. Il est qd même bien dommage que je ne puisse pas utiliser de tableau pour faire ce genre de mise en page au moins mon problème aurait été vite réglé. Merci beaucoup pour ton aide.

Reply

Marsh Posté le 03-02-2004 à 14:02:22    

frere tuck a écrit :

bon et bien merci beaucoup je pense que je vais opter pour un alignement à gauche parce que les utilisateurs qui sont en 800*600 auront plus de facilités pour lire le contenu de cette façon. Il est qd même bien dommage que je ne puisse pas utiliser de tableau pour faire ce genre de mise en page au moins mon problème aurait été vite réglé. Merci beaucoup pour ton aide.


 
Je ne vois vraiment pas ce que les tableaux viennent faire là dedant. Que tu exprimes de px ou de % sur un div ou sur un tableau ne change rien.  :heink:  
 
Ensuite, je ne vois pas pourquoi ceux qui sont en 800/600 seraient gênés par une configuration au centre.  :heink:

Reply

Marsh Posté le 03-02-2004 à 14:13:22    

Pour ce qui est des marges, dans le cas des calques, si je travaille en position fixe et que je centre mes calques sur la page, lorsqu'un utilisateur en 800*600 verra la page, il ne verra pas la moitié des informations car les calques ne bougeront pas et resteront au centre de la page, forçant l'utilisateur à se servir des ascenseurs horizontaux.
 
C'est la qu'est la différence avec des tableaux, car dans leur cas lorsque tu utilises des tableaux pour faire ta mise en page tu peux les centrer au milieu de la page et laisser des marges de chaque cotés, elles seront éliminées lors du changement de résolution.
 
Dis moi si je fais fausse route ou si je suis dans le vrai car j'ai essayer de trouver une solution pour centrer mes calques au milieu de la page, mais lors du changement de résolution ils bouges et se chevauchent parfois... en foutant en l'air toutes ma pagination

Reply

Marsh Posté le 03-02-2004 à 14:19:00    

frere tuck a écrit :

Pour ce qui est des marges, dans le cas des calques, si je travaille en position fixe et que je centre mes calques sur la page, lorsqu'un utilisateur en 800*600 verra la page, il ne verra pas la moitié des informations car les calques ne bougeront pas et resteront au centre de la page, forçant l'utilisateur à se servir des ascenseurs horizontaux.
 
C'est la qu'est la différence avec des tableaux, car dans leur cas lorsque tu utilises des tableaux pour faire ta mise en page tu peux les centrer au milieu de la page et laisser des marges de chaque cotés, elles seront éliminées lors du changement de résolution.
 
Dis moi si je fais fausse route ou si je suis dans le vrai car j'ai essayer de trouver une solution pour centrer mes calques au milieu de la page, mais lors du changement de résolution ils bouges et se chevauchent parfois... en foutant en l'air toutes ma pagination


 
La position fixe n'est pas supportée de la même manière par tous les navigateurs. Tu voulais sans doute parler de la position "absolute".
En position absolute, il est tout à fait possible de définir les positionnement en fonctione du div conteneur et non de la page elle-même.
 
Si tes calques se chevauchent parfois et foutent en l'air ta pagination, c'est uniquement lié à ton incompétence et rien d'autre. Faut arrêter de mettre tout sur le dos de ces pauvres divs qui permettent de faire bcp plus de choses que les tableaux.
 
Et puis d'ailleurs là on parle dans le vide. Montre nous ta page, ce sera plus parlant.

Reply

Marsh Posté le 03-02-2004 à 14:28:13    

Pas la peine de monter sur tes grands chevaux, je te l'ai dis que j'étais newb' en développement web, dans mon premier post je demande même si on peut me conseiller de la documentation...
 
J'aime fort peu que l'on emploi des tons aussi agressifs pour une connerie pareille.
 
Sur ce je ne dis pas que c'est la faute des div ou n'importe quoi d'autre je dis simplement que je n'ai pas trouvé la solution à mon pb, SIMPLEMENT !
 
Quant-à mon incompétece elle t'emmerde.

Reply

Marsh Posté le 03-02-2004 à 14:31:40    

frere tuck a écrit :

Pas la peine de monter sur tes grands chevaux, je te l'ai dis que j'étais newb' en développement web, dans mon premier post je demande même si on peut me conseiller de la documentation...
 
J'aime fort peu que l'on emploi des tons aussi agressifs pour une connerie pareille.
 
Sur ce je ne dis pas que c'est la faute des div ou n'importe quoi d'autre je dis simplement que je n'ai pas trouvé la solution à mon pb, SIMPLEMENT !
 
Quant-à mon incompétece elle t'emmerde.


 
être incompétent est normal quand on débute. Je ne te le reproche pas, et tu n'as pas besoin d'insulter dès que quelque chose ne te convient pas.
 
Seulement avant de vouloir faire quelque chose qui tient debout, c'est pas du luxe d'aller faire un tour sur les tutos qui trainent un peu partout dans la FAQ et d'EXPERIMENTER AVANT de se lancer.
 
De plus, il est généralement admis ici qu'il est nettement préférable d'amener avec soi sa réalisation, plutôt que parler dans le vide, ce qui t'évitera déjà de sortir des énormités.
 
Bref :
 
1) tu te calmes.
 
2) Tu viens avec ta page d'exemple pour qu'on puisse voir où se situe réellement ton/tes problème(s).

Reply

Marsh Posté le 03-02-2004 à 14:31:40   

Reply

Marsh Posté le 03-02-2004 à 14:46:14    

J'ai fait les posts de long en large (enfin tous ceux concernant les calques) et rien n'a marché, pareil pour les tuto qui ne traite en aucun cas d'une page de meme type que celle que je dois faire.  
 
C'est pourquoi j'ai essayé avec un exemple plus simple, sans guère de succès d'ailleurs.
 
Voici le code de cet exemple :
 
<body>
<table width="100%" height="100%" border="1">
  <tr>
    <td>
 <div style=" position:relative; ">
 <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; top:50%; left:10%;"><img src="Alcool/page2image2.jpg" width="195" height="123"></div>
 <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; top:20%; left:10%;"><img src="Alcool/page2image2.jpg" width="195" height="123"></div>
 </div>
 </td>
  </tr>
</table>
</body>

Reply

Marsh Posté le 03-02-2004 à 14:52:18    

frere tuck a écrit :

J'ai fait les posts de long en large (enfin tous ceux concernant les calques) et rien n'a marché, pareil pour les tuto qui ne traite en aucun cas d'une page de meme type que celle que je dois faire.  
 
C'est pourquoi j'ai essayé avec un exemple plus simple, sans guère de succès d'ailleurs.
 
Voici le code de cet exemple :
 
<body>
<table width="100%" height="100%" border="1">
  <tr>
    <td>
 <div style=" position:relative; ">
 <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; top:50%; left:10%;"><img src="Alcool/page2image2.jpg" width="195" height="123"></div>
 <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; top:20%; left:10%;"><img src="Alcool/page2image2.jpg" width="195" height="123"></div>
 </div>
 </td>
  </tr>
</table>
</body>


 
Alors déjà, dans un premier temps on SEPARE le contenu et les CSS.
 
Pour ton exemple, commence par faire :
 
entre <head> et </head> :
 

Code :
  1. <style type="text/css" media="screen"><!--
  2. .layer1
  3. {
  4. position:absolute;
  5. width:200px;
  6. height:115px;
  7. z-index:1;
  8. top:50%;
  9. left:10%;
  10. }
  11. --></style>


 
et ensuite dans le code HTML :
 

Code :
  1. <div class="Layer1">


 
Tu appliques ce principe à ta page s'exemple, et tu la postes ici pour qu'on puisse passer à la suite.

Reply

Marsh Posté le 03-02-2004 à 15:01:24    

C'est fait :
 
<body>
<table width="100%" height="100%" border="1">
  <tr>
    <td>
 <div style=" position:relative; ">
 <div class="Layer1" ><img src="Alcool/page2image2.jpg" width="195" height="123"></div>
 <div class="Layer2"><img src="Alcool/page2image2.jpg" width="195" height="123"></div>
 </div>
 </td>
  </tr>
</table>
</body>
</html>

Reply

Marsh Posté le 03-02-2004 à 15:02:02    

Ou sont les CSS ?

Reply

Marsh Posté le 03-02-2004 à 15:13:45    

Les voilà j'évitais de charger :
 
<style type="text/css">
.conteneur1{ text-align:center;}
.centre1{
margin-left:0;
margin-right:0;
width: 100%;
height: 100%;
text-align: center;
}
</style>
 
<style type="text/css" media="screen"><!--  
   
  .layer1  
  {  
     position:absolute;  
     width:200px;  
     height:115px;  
     z-index:1;  
     top:50%;  
     left:10%;  
  }  
   
  .layer2  
  {  
     position:absolute;  
     width:200px;  
     height:115px;  
     z-index:1;  
     top:50%;  
     left:10%;  
  }  
   
  --></style>  
 

Reply

Marsh Posté le 03-02-2004 à 15:36:33    

Code :
  1. <html>
  2. <title>test</title>
  3. <head>
  4. <style type="text/css" media="screen"><!-- 
  5. html,body
  6. {
  7. margin : 0px;
  8. padding : 10px;
  9. }
  10. .tbl
  11. {
  12. width : 100%;
  13. height : 100%;
  14. border : 1px solid #000000;
  15. }
  16. .cell
  17. {
  18. text-align : center;
  19. }
  20. .conteneur-centre
  21. {
  22. text-align : left;
  23. width : 500px;
  24. height : 145px;
  25. border : 1px solid #000000;
  26. margin-left : auto;
  27. margin-right : auto;
  28. }
  29.   .layer1 
  30.   { 
  31.      position : absolute; 
  32.      width : 200px; 
  33.      height : 115px; 
  34.      margin : 10px 10px 10px 10px;
  35.   } 
  36.  
  37.   .layer2 
  38.   { 
  39.      position : absolute; 
  40.      width : 200px; 
  41.      height : 115px; 
  42.      margin : 10px 0px 0px 290px;
  43.   } 
  44.  
  45.   --></style> 
  46.  </head>
  47. <body>
  48. <table class="tbl" cellspacing="0" cellpadding="0">
  49.   <tr>
  50.     <td class="cell">
  51.    <div class="conteneur-centre">
  52.    <div class="Layer1" ><img src="Alcool/page2image2.jpg" width="195" height="123" border="1"></div>
  53.    <div class="Layer2"><img src="Alcool/page2image2.jpg" width="195" height="123" border="1"></div>
  54.    </div>
  55.   </td>
  56.   </tr>
  57. </table>
  58. </body>
  59. </html>

Reply

Marsh Posté le 03-02-2004 à 16:15:03    

apparemment j'avais répondu mais y a eut un pb excuse pour le délai.
 
Ca j'avais réussi à le faire, pour la résolution ça passe, mais lorsque tu redimensionnes ta page tu as toujours un problème, tes calques changent de position

Reply

Marsh Posté le 03-02-2004 à 16:42:12    

Bien sûr qu'il bouge, puisqu'il est centré dans la page par rapport à une table à 100% de haut et 100% de large.
 
Faudrait savoir ce que tu veux...
 
On peut pas avoir des valeurs exprimées en % et avoir un design totalement fixe.
 
Si tu veux que la mise en page ne bouge pas, tu fais comme ça :
 

Code :
  1. <html>
  2. <title>test</title>
  3. <head>
  4. <style type="text/css" media="screen"><!-- 
  5. html,body
  6. {
  7. margin : 0px;
  8. padding : 10px;
  9. text-align : center;
  10. }
  11. .tbl
  12. {
  13. margin-left : auto;
  14. margin-right : auto;
  15. width : 760px;
  16. border : 1px solid #000000;
  17. }
  18. .cell
  19. {
  20. text-align : center;
  21. }
  22. .conteneur-centre
  23. {
  24. text-align : left;
  25. width : 500px;
  26. height : 145px;
  27. border : 1px solid #000000;
  28. margin-top : 150px;
  29. margin-bottom : 150px;
  30. margin-left : auto;
  31. margin-right : auto;
  32. }
  33.   .layer1 
  34.   { 
  35.      position : absolute; 
  36.      width : 200px; 
  37.      height : 115px; 
  38.      margin : 10px 10px 10px 10px;
  39.   } 
  40.  
  41.   .layer2 
  42.   { 
  43.      position : absolute; 
  44.      width : 200px; 
  45.      height : 115px; 
  46.      margin : 10px 0px 0px 290px;
  47.   } 
  48.  
  49.   --></style> 
  50.  </head>
  51. <body>
  52. <table class="tbl" cellspacing="0" cellpadding="0">
  53.   <tr>
  54.     <td class="cell">
  55.    <div class="conteneur-centre">
  56.    <div class="Layer1" ><img src="Alcool/page2image2.jpg" width="195" height="123" border="1"></div>
  57.    <div class="Layer2"><img src="Alcool/page2image2.jpg" width="195" height="123" border="1"></div>
  58.    </div>
  59.   </td>
  60.   </tr>
  61. </table>
  62. </body>
  63. </html>

Reply

Marsh Posté le 03-02-2004 à 17:01:17    

OK merci beaucoup cela confirme bien que ce que je voulais faire n'est pas possible à moins d'opérer un redimensionnement dynamique de mes images (ainsi que des calques) je te remercie donc de ton aide.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed