Encore un problème de calque - HTML/CSS - Programmation
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à.
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?
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).
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.
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.
Ensuite, je ne vois pas pourquoi ceux qui sont en 800/600 seraient gênés par une configuration au centre.
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
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. |
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.
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.
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... |
ê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).
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>
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. |
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 :
|
et ensuite dans le code HTML :
Code :
|
Tu appliques ce principe à ta page s'exemple, et tu la postes ici pour qu'on puisse passer à la suite.
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>
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>
Marsh Posté le 03-02-2004 à 15:36:33
Code :
|
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
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 :
|
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.
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.