Définitions d'écrans multiples

Version imprimable

11/01/2007, 12h31
TheBigMac

Définitions d'écrans multiples

Bonjour

Voici mon problème:

Il y a 4 ans, j'ai créé, pour mon frère, un site HTML tout simple (seulement des calques), avec Dreamweaver 3, pour des affichages 600x800 et 1024x768.
Avec l'avènement des écrans plats, fleurissent des affichages autres: 1280, 1290 etc et ce site n'apparaît pas bien avec ces définitions d'écrans.

Ma question: Quelle serait pour moi la solution la plus simple pour que le site s'affiche correctement sur tous les écrans sous IE et Firefox?

Je vous remercie par avance pour vos conseils

PS pb supplémentaire: mon ensemble carte graphique-écran ne va pas au-delà du 1024
11/01/2007, 14h02
Bisûnûrs

Design fluide en pourcentage ?
11/01/2007, 14h51
TheBigMac

Merci Bisûnûrs.

Je ne suis pas un expert en html; j'avais bâti le site sur du texte et des photos, que je mettais avec Dreamweaver dans des calques, plus ou moins imbriqués, dans un calque global de 800 pixels de large.

Cela répond-t-il à ta question?

Jusqu'à présent le site était parfaitement vu en 800 et 1024, à la fois dans IE et Firefox. Simplement depuis quelques temps, des visiteurs ayant d'autres définitions d'écrans, mont signalé à mon frère ce problème.
11/01/2007, 14h58
Bisûnûrs

C'était une question rhétorique. Elle n'attendait pas de réponse mais te donnait un conseil.

Il faut faire un design fluide en pourcentage.
11/01/2007, 15h09
TheBigMac

Bien, d'accord.

Mais alors qu'elle méthode est la plus simple pour obtenir cette fluidité en pourcentage?

IL y a une semaine, j'ai cherché toute une matinée sur le Web sans trouver de véritable réponse pour mon niveau; les CSS me dépassent..

N'y a-t-il pas plus simple? un logiciel gratuit ou payant pourrait-il se charger de la conversion (ou d'une partie) ?

Merci d'avance
11/01/2007, 15h24
Eric Berger

Citation:

Envoyé par Bisûnûrs

Design fluide en pourcentage ?

Tu ne crois pas que c'est justement ce qu'il a actuellement (la largeur des pages s'adaptent à la largeur de la fenêtre) et qu'il en résulte des problèmes de mise en page?

Dans une telle situation j'obterais plutôt pour une largeur fixe quelle que soit la résolution, ça a l'avantage de garantir la mise en page et le désaventage de ne pas systématiquement exploiter la largeur disponible.

pour TheBigMac:
Pour appliquer ça, il faut forcer la largeur de l'élément englobant la page, idéalement un DIV, éventuellement un TABLE. S'il n'y a pas dans la version actuelle un élément qui englobe tous les autres, tu peux le créer (un DIV donc), tu lui ajoute la propriété style avec pour valeur "width:760px" par exemple (tu peux faire des essais et ajuster à ton goût).

C'est pas la solution idéale, mais la plus simple à mettre en oeuvre.
11/01/2007, 15h30
Bisûnûrs

Citation:

Envoyé par Eric Berger

Tu ne crois pas que c'est justement ce qu'il a actuellement (la largeur des pages s'adaptent à la largeur de la fenêtre) et qu'il en résulte des problèmes de mise en page?

Je pense plutôt qu'il a un design fixe vu qu'il a fait le code en fonction de deux résolutions.

Après ce ne sont que des suppositions, le plus apte à répondre à cette question est l'auteur du topic.

Donc :

@TheBigMac : On peut voir une partie du code de la page ? Ou bien peux-tu nous dire si les dimensions sont actuellement en % ou en px ?

Merci à tous les deux.

C'est surtout Dreamweaver qui a pondu le code!

En voici un echantillon:

--------------------------------------------------------

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000" background="photo/cairn_troiset1014.gif">
<div id="Layer3" style="position:absolute; width:649px; height:912px; z-index:3; left: 102px; top: 4px">
  <div id="Layer3" style="position:absolute; width:248px; height:67px; z-index:3; left: 196px; top: 90px; visibility: visible">
    <p align="center"><font color="#3333FF" size="4"><b>LOCATIONS VACANCES<br>
      </b></font><font size="4" color="#3333FF"><b>&agrave; CH&Acirc;TEAU-VERDUN<br>
      </b></font><font size="4" color="#3333FF"><b>en ARI&Egrave;GE</b></font></p>
  </div>
  <div id="Layer5" style="position:absolute; width:175px; height:131px; z-index:5; left: 465px; top: 99px; visibility: visible"><a href="photo/hiver_1.jpg" target="_blank"><img src="photo/hiver_1_t.jpg" width="180" height="135" border="0"></a></div>
  <div id="Layer4" style="position:absolute; width:231px; height:94px; z-index:4; left: 203px; top: 156px; visibility: visible">
    <div align="center">
      <p><font size="2"><b>appartement 1<font size="1"><br>
        AGR&Eacute;EMENT DE LA PR&Eacute;FECTURE D'ARI&Egrave;GE<br>
        N&deg;: 09603006</font><br>
        Classement :</b> <font size="4"><b><font color="#0000FF" size="3">*** &eacute;toiles</font><font color="#0000FF"><br>
        <font size="2" color="#000000">Conventionn&eacute; ch&egrave;ques vacances </font></font></b></font></font><font size="2"> <br>

------------------------------------------------------------------

Pouvez-vous en tirer des conclusions?

Je suis bien évidemment à votre disposition pour tout autre renseignement ou manip

[Eric Berger]Ajouté balises code, merci d'y penser à l'avenir

11/01/2007, 16h12
Eric Berger

J'ai regardé un peu mieux.... comment dire.... t'es dans la merde 8-)

Vu les connaissances que tu sembles avoir, ça va être difficile, tous les positionnements sont en absolu et les largeurs fixes...
11/01/2007, 16h17
trotters213

:salut:
Comme le dit Eric Berger avec tant de poésie (:mrgreen:) je crois que ça va être compliqué pour toi si tu n'as pas de connaissances en CSS et que tu ne veux pas t'y pencher dessus.
Tu peux toujours refaire ton site pour les nouvelles résolution mais ce n'est que repousser le problème jusqu'au jour où il y aura des résolution encore plus grandes que les actuelles.
11/01/2007, 16h25
TheBigMac

Ça je m'en doutais .. vu ce que j'ai lu la semaine dernière ..

Mais bon, j'ai le temps et je peux, je crois, reprendre tout le site (4 pages!);

Simplement alors 2 questions:

- est-ce que je peux reprendre Dreamweaver 3 pour assurer la programmation nécessaire

- où trouver la doc ou un petit guide pour une programmation en pourcentage

Merci
11/01/2007, 16h32
trotters213

Pour ta mise en page, regarde ce tuto tu pourras déjà t'en inspirer ensuite tu fais comme tout le monde pour trouver les informations que tu cherches : :google:
Essaie de ne pas utiliser d'éditeur WYSIWYG (type Dreamweaver) pour réaliser un site car il te le réalisera toujours en dur donc c'est pas top.
11/01/2007, 18h58
Eric Berger

Citation:

Envoyé par trotters213

Pour ta mise en page, regarde ce tuto tu pourras déjà t'en inspirer ensuite tu fais comme tout le monde pour trouver les informations que tu cherches : :google:
Essaie de ne pas utiliser d'éditeur WYSIWYG (type Dreamweaver) pour réaliser un site car il te le réalisera toujours en dur donc c'est pas top.

Tout le monde n'est pas passionné par le développement tu sais... apprendre un langage pour faire 4 pages, c'est pas forcément le meilleur choix.
12/01/2007, 11h29
trotters213

Citation:

Envoyé par Eric Berger

Tout le monde n'est pas passionné par le développement tu sais... apprendre un langage pour faire 4 pages, c'est pas forcément le meilleur choix.

J'en suis conscient ne t'en fais pas et si j'étais à sa place c'est sur que je n'apprendrais pas un langage juste pour faire 4 pages.