Positionnement IFRAME

Version imprimable

Bonjour
à partir de cette discussion Centrer une frame, j'ai essayer de faire pareil avec une page de cadre a 3 cadres, en utilsant les iframes pour centrer un vieux site...j'ai bien compris le principe mais après je bloque sur le positionnement des frames
Code:

1 2 3 <iframe id="top" name="top" src="top.htm" frameborder="0"></iframe> <iframe id="gauche" name="gauche" src="gauche.htm" frameborder="0"></iframe> <iframe id="droite" name="droite" src="droite.htm" frameborder="0"></iframe>
il y aurai t'il moyen d'avoir des valeurs pour les positionnement? car je suis incapable de m'en sortir...

merci

Salut,

Tu confonds frame et iframe qui sont de tags html différents, le premier est déprécié et pas le deuxième.
Si c'est bien du tag iframe qu'il est question alors voici un exemple de positionnement facile à mettre en place et responsive de surcroît :

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap</title>
 
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
 
	<style>
 
.iframe1 {
        width: 100%;
}
.iframe2 {
        width: 100%;
}
.iframe3 {
        width: 100%;
}
 
        </style>
 
</head>
<body>
	<h1>Hello, world!</h1>
 
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-4">
				<iframe class="iframe1" src="iframe1.html"></iframe>
			</div>
			<div class="col-md-4">
				<iframe class="iframe2" src="iframe2.html"></iframe>
			</div>
			<div class="col-md-4">
				<iframe class="iframe3" src="iframe3.html"></iframe>
			</div>
		</div>
	</div>
 
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Le code d'une iframe :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap 101 Template</title>
	<style>
body {
        width: 100%;
        height: 300px;
        background-color: grey;
}
        </style>
</head>
<body>
	<h1>iframe1</h1>
</body>
</html>

Bonjour,
il y a peut être plus basique pour commencer

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>[...]</title>
<style>
htlm, body {
  margin:0;
  padding:0;
}
iframe {
  border:none;
  width:100%;
}
.droite,
.gauche {
  float:left;
  width:50%;
}
</style>
</head>
<body>
  <h1>Hello, world!</h1>
  <iframe src="iframe1.html"></iframe>
  <iframe class="gauche" src="iframe2.html"></iframe>
  <iframe class="droite" src="iframe3.html"></iframe>
</body>
</html>

Salut NoSmoking,

Effectivement si on ne cherche pas la responsivité c'est bien plus simple. +1.
Petite remarque, des éléments flottants sans clear: both ou clearfix c'est un peu chercher le bâton pour se faire battre ^^.

Avec clear both

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>[...]</title>
<style>
htlm, body {
  margin:0;
  padding:0;
}
iframe {
  border:none;
  width:100%;
}
.droite,
.gauche {
  float:left;
  width:50%;
}
.clear {
  clear: both;
}
</style>
</head>
<body>
  <h1>Hello, world!</h1>
  <iframe src="iframe1.html"></iframe>
  <iframe class="gauche" src="iframe2.html"></iframe>
  <iframe class="droite" src="iframe3.html"></iframe>
  <div class="clear"></div>
</body>
</html>

Avec clearfix

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>[...]</title>
<style>
htlm, body {
  margin:0;
  padding:0;
}
iframe {
  border:none;
  width:100%;
}
.droite,
.gauche {
  float:left;
  width:50%;
}
.clearfix {
  overflow: auto;
  zoom: 1;
}
</style>
</head>
<body>
  <h1>Hello, world!</h1>
  <iframe src="iframe1.html"></iframe>
  <div class="clearfix">
    <iframe class="gauche" src="iframe2.html"></iframe>
    <iframe class="droite" src="iframe3.html"></iframe>
  </div>
</body>
</html>