problème positionnement en fonction de la résolution

**zodd** · 06/10/2006, 16h34

Salut,

Voilà j'utilise un arriere plan dans un frameset.
Certains éléments des frames doivent être positionnés en fonction de l'image d'arrière plan.

Or, autant quelque soit la résolution, l'image fait la même taille et reste centrée, que mes autres éléments se décalent en fonction de la résolution..
Comment faire pour que tout colle qqsoit l'écran ou la résolution utilisée?
Cordialement
Zodd

**JackBeauregard** · 06/10/2006, 23h11

Salut,
Avant même d'entrer dans la technique à mon avis tu fais fausse route sur le principe. Coller quoi que ce soit sur ta page qui soit censé s'adapter à un arrière plan me parait avoir peu de sens, au pire tu as un arrière plan pour un élément précis, les deux étant indissociables.
Et en plus des résolutions, il y a aussi les tailles de police susceptible d'écarter tous les éléments les uns des autres.

Bref tu devrais faire un truc bien souple en CSS et si pour une partie précise tu souhaites un arrière plan particulier, alors tu utilises une div ayant la propriété css background-image (url).

**trotters213** · 07/10/2006, 12h19

tu peux tout redimensionner en fonction de la taille de ta fenêtre en utilisant javascript et en donnant des tailles dynamiques.
Pour récupérer la taille de ta fenêtre tu peux utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.body.clientWidth;
document.body.clientHeight;

Par contre je suis dac' avec JackBeauregard quand il dit que tu c'est pas une bonne solution.

**zodd** · 07/10/2006, 20h37

Je comprend.. Mais mon problème est que je veux piloter à distance un systeme embarqué. Sa face avant réelle est composée de voyants.. et sur ma page web , j'ai un dessin représentant cette face avant.. et j'ai des voyants à positionner sur cette face avant.. du coup je charge telle ou telle image de voyant ( éteint ou allumé ) en fonction de l'état du systéme...
Si vous avez une autre idée que d'utilisé une image d'arrière plan par dessus laquelle je "colle" des images.. ( J'ai déjà testé d'avoir une image "globale" de la face avant pour chaque état du système.. mais le temps de chargement fait que l'image clignote et cela n'est pas trés esthetique.. )

**Candygirl** · 07/10/2006, 23h08

Euh, pourrais-tu montrer un screen ou un lien de ton truc ? Je crains de ne pas avoir très bien compris à quel niveau interviennent tes frames, leur utilité ?

Pourquoi ne pas positionner tes images en absolute sur un div centré avec ton image de fond et leur donner la visibilité ou non selon l'état des leds ? Exemple:

pour le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#system {
  background: url(faceavant.pgn) no-repeat top left; /* image avec les voyants éteints */
  width:300px; height:150px; /* taille de ton image de fond */
  margin:0 auto; /* pour le centrage horizontal */
  position:relative; /* pour qu'elle serve de référence au positionnement des images */
}
 
#system img {
  position:absolute;
  top:60px;
  visibility:hidden; /* cachée par défaut */
}
 
#l3 {
  left:50px;
  visibility:visible; /* la led 3 est allumée */
}

le html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="system">
  <img src="ledon.png" alt ="voyant 1" width="20" height="20" id="l1">
  <img src="ledon.png" alt ="voyant 2" width="20" height="20" id="l2">
  <img src="ledon.png" alt ="voyant 3" width="20" height="20" id="l3">
  <img src="ledon.png" alt ="voyant 4" width="20" height="20" id="l4">
  <img src="ledon.png" alt ="voyant 5" width="20" height="20" id="l5">
</div>

(code tapé en live donc possibles erreurs dedans...)

**zodd** · 09/10/2006, 08h59

En fait, j'utilise des frames car le site étant stocké dans un microcontrôleur, je préfere minimiser l'espace à rafraîchir.
J'utilise deux fichiers CGI, un pour les commandes avec la method get, et l'autre pour l'affichage des états avec la meta refresh ( toute les 3 secondes ).

Par contre je suis un peu embeté car je n'ai pas le droit de mettre une image en ligne :s

**zodd** · 09/10/2006, 09h56

Re salut

,
Alors voilà.. j'utilise ( enfin j'essaie ) plus que des feuilles de style pour placer mes Voyants.. Mais ca ne marche pas ils se calent tous sur la gauche...
voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
dans le *.css:
#ton_nom{
	background: url(IHMWebTx.JPG) no-repeat top left; /* image avec les voyants éteints */
	width:300px; height:150px; /* taille de ton image de fond */
	margin:0 auto; /* pour le centrage horizontal */
	position:relative; /* pour qu'elle serve de référence au positionnement des images */
}
 
#system img {
  position:absolute;
  top:60px;
  visibility:hidden; /* cachée par défaut */
}
 
#l3 {
  position:relative;
  left:200px;
  visibility:visible; /* la led 3 est allumée */
}
 
dans le fichier "principal":
 
<script type="text/javascript">
function ConfigLed(val) {
if(val)
{
	Led_image=new Image(104,102);
	Led_image.src="Led.jpg";
	document.write('<img src=\"'+Led_image.src+'\" alt=\"voyant 1\" width=\"20\" height=\"20\" id=\"l3\">');
}
else
{
	Led_image=new Image(104,102);
	Led_image.src="Led3.jpg";
	document.write('<img src=\"'+Led_image.src+'\" alt=\"voyant 1\" width=\"20\" height=\"20\" id=\"l3\">');
}
</script>

**Candygirl** · 09/10/2006, 12h08

Envoyé par zodd

Re salut

,
Alors voilà.. j'utilise ( enfin j'essaie ) plus que des feuilles de style pour placer mes Voyants.. Mais ca ne marche pas ils se calent tous sur la gauche...

Oui, j'ai un peu raccourci mon css par flemme

Voici un petit exemple pour te montrer comment tu pourrais jouer avec les styles css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
  text-align:center;
}
#system {
  background: url(faceavant.png) no-repeat top left;
  width:300px; height:150px;
  margin:0 auto;
  position:relative;
	background-color:#666666;
}
 
#system img {
  position:absolute;
  top:60px;
  visibility:hidden;
	background-color:#FFFFCC;	
}
 
#l1{left:20px;}
#l2{left:60px;}
#l3{left:100px;}
#l4{left:140px;}
 
-->
</style>
<script type="text/javascript">
<!--
function onoff(led){
 var etat = document.getElementById(led).style;
 if (!etat.visibility || etat.visibility=='hidden') etat.visibility='visible';
 else etat.visibility = 'hidden';
}
-->
</script>
</head>
 
<body>
  <a href="#" onclick="onoff('l1')">bouton1</a> <a href="#" onclick="onoff('l2')">bouton2</a> <a href="#" onclick="onoff('l3')">bouton3</a> <a href="#" onclick="onoff('l4')">bouton4</a>
  <div id="system">
    <img src="ledon.png" alt="1" width="20" height="20" id="l1" />
    <img src="ledon.png" alt="2" width="20" height="20" id="l2" />
    <img src="ledon.png" alt="3" width="20" height="20" id="l3" />
    <img src="ledon.png" alt="4" width="20" height="20" id="l4" />
	</div>
</body>
</html>

maintenant je ne sais pas sous quelle forme tu récupères les états (la programmation tu dois maîtriser mieux que moi

), ça c'est juste pour montrer comment jouer avec le visibility.

Je n'ai pas capté ça:

Par contre je suis un peu embeté car je n'ai pas le droit de mettre une image en ligne :s

Tu veux dire que tu n'as pas le droit de mettre une image en dur dans le html ? pourquoi ? Si c'est ça je ne comprends pas trop l'intérêt?

Tu peux aussi jouer avec les images de fond alors dans ce cas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
  text-align:center;
}
#system {
  background: url(faceavant.png) no-repeat top left;
  width:300px; height:150px;
  margin:0 auto;
  position:relative;
	background-color:#666666;
}
 
#system div {
  position:absolute;
	width:20px;height:20px;
  top:60px;
  visibility:hidden;
	background:#FFFFCC url(ledon.png) no-repeat center center;	
}
 
#l1{left:20px;}
#l2{left:60px;}
#l3{left:100px;}
#l4{left:140px;}
 
-->
</style>
<script type="text/javascript">
<!--
function onoff(led){
 var etat = document.getElementById(led).style;
 if (!etat.visibility || etat.visibility=='hidden') etat.visibility='visible';
 else etat.visibility = 'hidden';
}
-->
</script>
</head>
 
<body>
  <a href="#" onclick="onoff('l1')">bouton1</a> <a href="#" onclick="onoff('l2')">bouton2</a> <a href="#" onclick="onoff('l3')">bouton3</a> <a href="#" onclick="onoff('l4')">bouton4</a>
  <div id="system">
    <div id="l1">1</div>
    <div id="l2">2</div>
    <div id="l3">3</div>
    <div id="l4">4</div>
	</div>
</body>
</html>

**zodd** · 09/10/2006, 17h43

Voilà j'ai testé... ca marche pas trop mal.. sauf le id="l1".. etc.. j'ai beau mettre n'importe quelle valeur à l'attribut left.. rien n'y fait mes LED gardent toujours le meme emplacement..

**Candygirl** · 09/10/2006, 18h42

Envoyé par zodd

Voilà j'ai testé... ca marche pas trop mal.. sauf le id="l1".. etc.. j'ai beau mettre n'importe quelle valeur à l'attribut left.. rien n'y fait mes LED gardent toujours le meme emplacement..

Tu peux poster ton code, stp; c'est pas normal...

?

**zodd** · 09/10/2006, 18h54

voilà..
et merci d'avance

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
  text-align:center;
}
#system {
  background: url(IHMWebTx.JPG) no-repeat top left;
  width:300px; height:150px;
  margin:0 auto;
  position:relative;
}
 
#system img {
  position:absolute;
  top:100px;
  visibility: hidden;
}
 
#l1{left:20px;}
#l2{left:40px;}
#l3{left:120px;}
#l4{left:160px;}
 
-->
</style>
<script type="text/javascript">
<!--
function onoff(led){
 var etat = document.getElementById(led).style;
 if (!etat.visibility || etat.visibility=='hidden') etat.visibility='visible';
 else etat.visibility = 'hidden';
}
-->
</script>
</head>
 
<body>
  <a href="#" onclick="onoff('l1')">bouton1</a> <a href="#" onclick="onoff('l2')">bouton2</a> <a href="#" onclick="onoff('l3')">bouton3</a> <a href="#" onclick="onoff('l4')">bouton4</a>
  <div id="system">
    <img src="led.jpg" alt="1" width="20" height="20" id="l1" />
    <img src="led.jpg" alt="2" width="20" height="20" id="l2" />
    <img src="led.jpg" alt="3" width="20" height="20" id="l3" />
    <img src="led.jpg" alt="4" width="20" height="20" id="l4" />
	</div>
</body>
</html>

**MasterOfChakhaL** · 09/10/2006, 20h07

je n'ai pas regardé ton code dans le détail, mais il semblerait qu'il y ait une petite erreur dans ton javascript:

tu écris:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

etat.visibility

eu lieu de:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

etat.style.visibility

EDIT:
Ben j'avais mal vu... le style était bien présent... ne prends pas en compte cette remarque...

**MasterOfChakhaL** · 09/10/2006, 20h21

sinon, une idée comme ca:

tu fais des images qui ressemblent à ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
+---+
|   |
+---+
| * |
+---+

(l'astérisque représente la led allumé)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<style>
  #system span {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('led.jpg');
  }
 
  #l1{left:20px;}
  #l2{left:40px;}
  #l3{left:120px;}
  #l4{left:160px;}
 
  #system .ON {
    background-position: -20px 0;
  }
 
  #system .OFF {
    background-position: 0 0;
  }
</style>
 
<a href="#" onclick="onoff('l1')">bouton1</a>
<a href="#" onclick="onoff('l2')">bouton2</a>
<a href="#" onclick="onoff('l3')">bouton3</a>
<a href="#" onclick="onoff('l4')">bouton4</a>
 
<div id="system">
    <span id="l1" class="ON"  >&nbsp;</span>
    <span id="l2" class="OFF" >&nbsp;</span>
    <span id="l3" class="OFF" >&nbsp;</span>
    <span id="l4" class="OFF" >&nbsp;</span>
</div>

et le petit javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function onoff( led_id )
{
  var my_led = document.getElementById( led_id );
  if ( my_led.className == 'OFF' )
  {
    my_led.className = 'ON';
  }
  else
  {
    my_led.className = 'OFF';
  }
}