Centrer une frame

Version imprimable

Voir 40 message(s) de cette discussion en une page

toutes mes escuses

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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "http://www.w3.org/TR/REC-html40/frameset.dtd">
<head>
<TITLE>nav</TITLE>
<html>
</HEAD>
<FRAME FRAMEBORDER=no  BORDER=0 SCROLLING="no"  >
<meta name="description" CONTENT="">
<META HTTP-EQUIV="IMAGETOOLBAR"CONTENT="no" >
<META NAME="keywords" CONTENT="">
 
<!-- DEBUT DU SCRIPT --><SCRIPT LANGUAGE="JavaScript">
public class test extends JFrame{
     public test(){
         setSize(100,100);
         setLocationRelativeTo(this);
      }
}
</script> 
<!-- DEBUT DU SCRIPT --><SCRIPT LANGUAGE="JavaScript">
 
function yaunclick()	{	alert('reproduction interdite');	}function noclick(scx)	{
 
	if (navigator.appName == "Netscape" && scx.which == 3)		{		yaunclick();
 
		return false; 		}
 
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2)		{
 
		yaunclick();		return false; 		}	}document.onmousedown = noclick</SCRIPT>
 
<!-- FIN DU SCRIPT -->
 
<script language="JavaScript1.2">
function refresh()
  {
  document.location.reload();
                return false;
  }
document.oncontextmenu = refresh;
</script> 
<script type="text/javascript">
<!--
function removeelements(){
  var remove_el=document.all.remove
  if (remove_el!='' && remove_el.length==null){
    remove_el.style.display='none'
  }else{
    for (i=0;i<remove_el.length;i++){
      remove_el[i].style.display='none';
    }
  }
  document.bgColor="white";
  document.body.style.background='';
}
 
function revertback(){
  setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;
 
// -->
</script> 
<style type="text/css">
        body { 
                width:69%
 
                background: #FFFFFF; 
                color: #000000;
                font-family: Verdana;
        }
 
</style> 
 
 
<FRAMESET COLS="37%,62%" FRAMEBORDER=no  BORDER=0 SCROLLING="yes" NORESIZE align="center"> 
<FRAME align="center" SRC="gauche.htm"NAME="gauche"> 
<FRAME align="center" SRC="droite.htm"NAME="droite"> 
 
 
   </FRAMESET> 
 
 
 
 
 
 
 
 
 
</body>
</html>

27/12/2011, 22h22
NoSmoking

:koi: tiens j'aurais juré que l'on avait parlé d'IFRAME et non de ~~FRAME~~.

Citation:

Envoyé par NoSmoking

:koi: tiens j'aurais juré que l'on avait parlé d'IFRAME et non de ~~FRAME~~.

Je confirme.
Code:

1 2 3 4 5 <div style="width: 890px; margin-left: auto; margin-right: auto;"> <iframe name="gauche" src="gauche.html" style="width: 210px; border: none; float: left;" frameborder="no" ></iframe> <iframe name="droite" src="droite.html" style="width: 680px; border: none; float: left;" frameborder="no"></iframe> <div style="clear: both;"></div> </div>
En revanche, pour la hauteur, il faudra t'orienter vers du javascript pour qu'elle s'adapte en fonction de la hauteur de ton contenu. Une recherche sur Developpez te donnera les informations nécessaire.

27/12/2011, 22h37
scoubi77

c'est bien pour cela que je disais hier que suite a des recherches infructueuses pour la hauteur je voulais me tourner vers une autre solution que les iframes
28/12/2011, 22h23
scoubi77

bonsoir,

après moulte recherches qui malgrès de très nombreux tests non rien donné
peut être par maladresse de ma part.
un point positif le centrage a été éprouvé sur une multitude de pc 4/3, 16/9...
et il est correct.

Le point noir reste l'affichage. j'ai fouillé beaucoup de documents ou ils parlent éffectivement d'un code java mais je n'arrive a ne rien trouver qui pourais de près ou de loin m'aider snif snif

quelqu'un aurait il une solution miraculeuse même si je dois re partire d'une autre solution ?

merci

amicalement scoubi77
29/12/2011, 11h41
Torgar

:recherch:
http://www.developpez.net/forums/d22...teur-variable/

Tu donnes un id à ton iframe et tu adaptes si besoin.
29/12/2011, 15h32
NoSmoking

Il n'est point besoin de redimensionner les IFRAMEs, l'astuce est de déclarer un overflow-y:hidden; pour le BODY contenant les IFRAMEs et de déclarer une height:100%; pour celles ci, de la sorte on ne scroll plus via la page mais via l'IFRAME.

J'essaie de préparer un exemple sur base des pages présentées par scoubi77.

Voici l'exemple
J'ai viré TOUT le javascript qui ne sert à RIEN en ce qui concerne la "protection" du document, et qui est plus pénible qu'autre chose.

index.html

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Index]</title>
<style type="text/css">
html,body {
  background-color:#f0f0f0;
  height:100%;
  width:100%;
  overflow-y:hidden;
  margin:0;
  padding:0;
}
#page {
  width:800px;
  margin:1% auto;
  padding:0px;
  height:97%;
  border:1px solid #e0e0e0;
}
iframe {
  height:100%;
  float:left;
  border:none;
  margin:0;
  padding:0;
}
#gauche {
  width:22%;/*  width:170px;/**/
}
#droite {
  width:78%;/*  width:630px;/**/
}
</style>
</head>
<body>
<div id="page">
  <iframe id="gauche" name="gauche" src="gauche.html" frameborder="0"></iframe>
  <iframe id="droite" name="droite" src="droite.html" frameborder="0"></iframe>
</div>
</body>
</html>

gauche.html

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
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
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Menu]</title>
<style type="text/css">
body {
  width:100%;
  background:#FFF;
  color:#000;
  font-family:Verdana;
  font-size:1em;
  border:none;
  margin:0;
  padding:0;
}
a {
  text-decoration:none;
  color:#000;
}
#page {
  width:150px;
  height:100%;
  background:#D3D3D3;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  -moz-box-shadow:0 0 10px #555;
  -webkit-box-shadow:0 0 10px #555;
  box-shadow:0 0 10px #555;
  margin:40px 10px 40px 10px;
}
#nav {
  padding:20px;
}
p {
  font-size:.8em;
  text-align:center;
}
</style>
</head>
<body>
  <div id="page">
    <div id="nav">
      <p><a href="droite.htm" target="droite" title="accueil">Accueil</a></p>
      <p><a href="asso.htm" target="droite">L'association</a></p>
      <p><a href="deroulement.htm" target="droite">Déroulement du week-end à thémes</a></p>
      <p>Hébergement</p>
      <p><a href="mad.htm" target="droite"> Les matériels <br>à disposition</a></p>
      <p><a href="iftech.htm" target="droite"> Infos techniques</a></p>
      <p>Votre Equipement <br>à prévoir</p>
      <p>Tarifs</p>
      <p>Les week-ends vus par les <br>participants</p>
      <p>Location du site <br>à la semaine</p>
      <p>Mes images</p>
      <p><a href="village.htm" target="droite"> Le village</a></p>
      <p>Me contacter</p>
    </div>
  </div>
</body>
</html>

droite.html

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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>[Observatoire]</title>
<style type="text/css">
body {
  width:100%;
  background:#FFF;
  color:#000;
  font-family:Verdana;
  font-size:1em;
  border:none;
  margin:0;
  padding:0;
}
h1 {
  font-family:Garamond;
  font-size:1.8em;
}
#page {
  width:590px;
  margin:40px 5px;
}
#entete {
  text-align:center;
  background:#D8BFD8;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  -moz-box-shadow:0 0 10px #555;
  -webkit-box-shadow:0 0 10px #555;
  box-shadow:0 0 10px #555;
  padding:20px;
}
#corps {
  font-size:.8em;
  background:#FFFACD;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  -moz-box-shadow:0 0 10px #555;
  -webkit-box-shadow:0 0 10px #555;
  box-shadow:0 0 10px #555;
  margin-top:40px;
  padding:20px;
}
#copyright {
  margin-top:40px;
  text-align:center;
  font-size:.8em;
}
p {
  text-align:left;
}
img {
  display:block;
  border:none;
  width:197px;
  height:300px;
  margin: auto;
}
</style>
</head>
<body>
  <div id="page">
    <div id="entete">
      <h1>OBSERVATOIRE ASTRONOMIQUE DE BAUDUEN (83630)</h1>
    </div>
    <div id="corps">
      <p>L'observatoire astronomique de Bauduen situé dans le Haut Var, au cœur du Parc du Verdon, organise des week-ends à thèmes : Astronomie ; Photographie ; Randonnée. L'hébergement se réalise sur place, se qui facilite les observations nocturnes du ciel. </p>
      <p>Les animations ont été mises en place par Olivier PLANCHON, animateur scientifique. Olivier a travaillé pour diverses centres d'astronomie ; le Conseil Régional ; Le CCSTI de Marseille ainsi que sur le site de Bauduen pendant 7 ans de 1991 à 1998. </p>
      <p>Il y aura des animations en période estivale suivant la disponibilité des logements du site qui sont mis chaque année en location saisonnière. </p>
      <p>L'observatoire situé loin des lumières des villes et le télescope de classe semi professionnel ultra lumineux mis à votre disposition, vous permettront de superbes observations des objets célestes. </p>
      <p>Bonnes observations à tous<br>La présidente<br></p>
      <p><img src="image/image.jpg" alt="La présidente"></p>
      <p>Télescope Ø 62 cm ouvert à F/D : 3,3 et 20 Newton / Nasmith, sur monture à fourche. Moteurs pas à pas, entrainement en &#x1F71; par couronne dentée. Masse de 1300 kg. Construction : Olivier PLANCHON. Optiques de Dany CARDOEN, Télescope sous coupole de Ø 5 mètres.</p>
      <div id="copyright">
        Copyright © 2012 - Olivier Planchon / BAUDUEN / France Tous droits réservés - All rights reserved - Informations légales - Legal info
      </div>
    </div>
  </div>
</body>
</html>

il y aura certainement quelques aménagements à faire.

Bonne analyse.

30/12/2011, 17h33
scoubi77
un grand merci,

je suis entrain d'essayer de digérer ce code.
J'ai voulu agrandir l'iframe de droite en essayant de redéfinir dans cette proportion
Code:

1 2 3 4 5 #gauche { width:22%;/* width:170px;/**/ } #droite { width:78%;/* width:930px;/**/
Code:

1 2 3 4 5 6 7 #page { width:1100px; margin:1% auto; padding:0px; height:97%; border:1px solid #FFFFFF; }
suite a cela j'ai bien agrandi la taille de la page et du fait agrandi l'iframe droite mais cela décentre vers la gauche?

merci pour tout

amicalement zephir77
31/12/2011, 09h59
NoSmoking
Le calcul est simple et fait de la façon suivante
```
// données de base de index.html
page   = 800px;
droite = 170px;
gauche = 630px;
// calcul
droite/page = .2125 on garde 22%
gauche/page = .7875 on garde 78%
// données de base dans gauche.html
#page {
  width:150px; /* 170-20 */
}
// données de base dans droite.html
#page {
  width:590px; /* 630-40, 40 et non 20 because la barre de scroll éventuelle*/
}
```
il te suffit de refaire le calcul avec ta nouvelle valeur, 1100px, et de remettre les bonnes valeurs dans les fichiers, une feuille de style commune aiderait à mieux gérer cela.

Autre remarque, ceci est un exemple de ce que l'on peut faire, mais une question est à se poser, l'IFRAME de gauche est-elle réellement nécessaire dans ton cas ?
02/01/2012, 19h48
scoubi77

Un grand merci pour la réponse et désolé du temps de latence pour la mienne.
J'ai connu un 31 et 1 difficile au travail
une simple régle de trois :oops:

autre question y a t-il une solution pour déplacer le scrool de l'iframe gauche vers le bord de l'écran ?

la frame de gauche et bien si tu as soultion pour la virer et conserver le cahier des charges je suis à ton écoute
:ccool:
04/01/2012, 20h21
NoSmoking
dans la page index, supprimes la width et observes
Code:

1 2 3 4 5 6 7 #page { /* width:1100px;/* A SUPPRIMER */ margin:1% auto; padding:0px; height:97%; border:1px solid #e0e0e0; }
Citation:

une simple régle de trois :oops:

eh oui pas de lézard...

Citation:

la frame de gauche et bien si tu as soultion pour la virer et conserver le cahier des charges je suis à ton écoute

intègres le contenu directement dans la page index, quant au cahier des charges, c'est à toi de le respecter, moi je ne fais que te donner des indices, astuces, de résolution.
06/01/2012, 17h39
scoubi77

Bonsoir ,

En premier lieu meilleur voeux et bonne année à tous,

un grand merci a toi pour tes conseils très éclairés
je vais tester cela.
Je rencontre un problème que je n'arrive pas à résoudre, as tu la solution ?
sur mon ipad ou iphone le scrooling n'apparait pas, c'est le site entier qui scrool ?

Merci pour ton aide

Voir 40 message(s) de cette discussion en une page