Positionnement IFRAME

**cool93** · 10/03/2015, 06h02

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 :

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

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

**lilalex** · 14/03/2015, 12h34

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 :

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
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 :

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
<!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>

**NoSmoking** · 15/03/2015, 10h12

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

Code html :

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
<!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>

**lilalex** · 15/03/2015, 11h16

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 :

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
<!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 :

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
<!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>

Positionnement IFRAME

HTML

Vue hybride

Discussions similaires

Partager

Partager