Le css et les balises Iframe

**scoubi77** · 01/10/2012, 19h32

Bonsoir à tous

J'avais utilisé les iframes avec du css pour centrer un autre site qui avait deux parties (right et left). Et je n'arrive pas à utiliser l'iframe pour faire une séparation en trois parties, afin de rajouter une bannière au dessus pour un autre projet, tout en le centrant grâce au css (le centrage fonctionne pour le right et left pour l'instant)

je voudrais obtenir un découpage comme ceci en iframe

merci à vous tous pour vos conseils et aides

Cordialement

scoubi

**Torgar** · 01/10/2012, 22h21

Bonsoir,

Pourrais-t-on avoir le code HTML et CSS employé s'il te plait ? Nous pourrions plus facilement t'aider dans ton épreuve.

**NoSmoking** · 01/10/2012, 22h28

Bonsoir,
une question me brûle les lèvres, les IFRAMEs sont obligatoires ?

**scoubi77** · 01/10/2012, 22h59

Bonsoir,

Un grand merci pour vos réponses, pour répondre a nosmoking les iframes malgré leur mauvaises réputation représentaient le meilleur moyen technique par rapport a mes maigres connaissances en php car j'ai suivi des exemples reprenant la construction d'une page avec des DIV mais les liens sont en php au sein de cette dernière, de ce fait j'ai donc préféré cette solution.

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta name="description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="image/favicon.ico" >
<title></title>
 
<style type="text/css">
html,body {
  background-color:#FFFFFF;
  height:100%;
  width:100%;
  overflow-y:hidden;
  margin:0;
  padding:0;
}
#page {
  width:1000px;
  margin:1% auto;
  padding:0px;
  height:97%;
  border:1px solid #FFFFFF;
}
iframe {
  height:100%;
  float:left;
  border:none;
  margin:0;
  padding:0;
}
#gauche {
  width:19%;/*  width:170px;/**/
}
#droite {
  width:81%;/*  width:830px;/**/
 
}
#haut {
  width:15%;/*  width:1000px;/**/
}
 
</style>
</head>
<body>
<div id="page">
<FRAMESET ROWS="15%,*">
  <iframe id="haut" name="haut" SRC="bagniere.htm" frameborder="0" scrolling="no"></iframe>
  <FRAMESET COLS="50%,*">
  <iframe id="gauche" name="gauche" src="menu.htm" frameborder="0" scrolling="no"></iframe>
  <iframe id="droite" name="droite" src="nav.htm" frameborder="0"></iframe>
  </FRAMESET>
</FRAMESET>
</div>
</body>
</html>

Hélas pour l'instant je n'ai pas le résultat escompté.
PS :
Pour Togar, j'avais écris mon post avec mon iphone et je vous présente mes plus plates excuses

**NoSmoking** · 01/10/2012, 23h06

attention, tu mélanges iFRAME et FRAME ce qui n'est pas la même chose du tout!

**scoubi77** · 02/10/2012, 07h09

Je sais bien, mais je test et je n'y arrive pas à déclarer le ROWS et COLS afin d'obtenir l'effet visuel recherché.
Je suis beaucoup plus à l'aise avec des FRAMES et je ne trouve pas d'exemples en IFRAMES

repartons donc ici :

Code :

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

1
2
3
4
5
6
7
<div id="page">
 
  <iframe id="haut" name="haut" SRC="bagniere.htm" frameborder="0" scrolling="no"></iframe>
<iframe id="gauche" name="gauche" src="menu.htm" frameborder="0" scrolling="no"></iframe>
  <iframe id="droite" name="droite" src="nav.htm" frameborder="0"></iframe>
 
</div>

je vais essayer dans ce cas de passer en FRAMES dans mon DIV

Merci pour ton aide

**scoubi77** · 02/10/2012, 08h12

Je retourne au point de départ, les FRAMES ne s'affichent pas, pour l'instant j'arrive à afficher droite et gauche sans problème en utilisant mes deux IFRAMES mais je n'arrive pas a afficher ma bannière en haut sur la totalité de mes deux éléments gauche et droite

**scoubi77** · 02/10/2012, 08h32

J'arrive à afficher mes trois IFRAMES mais elles ne sont pas affichées les unes sur les autres !!!

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta name="description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 
<title></title>
 
<style type="text/css">
html,body {
  background-color:#FFFFFF;
  height:100%;
  width:100%;
  overflow-y:hidden;
  margin:0;
  padding:0;
}
#page {
  width:1000px;
  margin:1% auto;
  padding:0px;
  height:97%;
  border:1px solid #FFFFFF;
}
iframe {
  height:100%;
  float:left;
  border:none;
  margin:0;
  padding:0;
}
#haut {
  width:15%;/*  width:1000px;/**/
}
 
#gauche {
  width:19%;/*  width:170px;/**/
}
#droite {
  width:81%;/*  width:830px;/**/
 
}
 
 
</style>
</head>
<body>
<div id="page">
<div id="iframe">
  <iframe id="haut" name="haut" src="ban.htm" frameborder="0" scrolling="no"></iframe>
  <iframe id="gauche" name="gauche" src="menu.htm" frameborder="0" scrolling="no"></iframe>
  <iframe id="droite" name="droite" src="nav.htm" frameborder="0"></iframe>
 
</div></div>
</body>
</html>

Des idées pour m'aider ?

**NoSmoking** · 02/10/2012, 22h09

Code :

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

1
2
iframe {
  height:100%;

à ton avis il vient d'où le problème !

**scoubi77** · 03/10/2012, 05h41

Bonjour et merci Nosmoking pour ta réponse.
Height à 100% par quoi le remplacer pour garder un centrage ?
La réduire en pourcentage ? ou lui donner comme valeur

Code :

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

1
2
3
{
  min-height: 100%;
}

J'avoue être un peu perdu, merci pour ton aide

**scoubi77** · 03/10/2012, 17h14

Re bonjour,

Je viens de tester différents pourcentage, rien n'y fait, j'ai besoin de centrer au centre de ma page le site consitué de ma bannière du menu et de la partie affichage du site comme suit :

peux tu m'en dire plus Nosmoking merci par avance

**NoSmoking** · 03/10/2012, 20h42

Si tu tiens à tout prix à tes IFRAMEs, tu peux essayer la structure suivante

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="page">
  <div id="div_haut">
    <iframe id="haut" name="haut" src="ban.htm"></iframe>
  </div>
  <div id="div_gauche">  
    <iframe name="gauche" src="menu.htm"></iframe>
  </div>
  <div id="div_droite">
    <iframe id="droite" name="droite" src="nav.htm"></iframe> 
  </div>
</div>

les DIVs sont là pour contenir les IFRAMEs

Le style correspondant sera dans ce cas

Code css :

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
html {
  height: 100%;
}
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y:hidden;  
}
#page {
  position:relative;
  width:1000px;
  margin:1% auto;
  padding:0px;
  min-height:97%;
  border:1px solid #E0E0E0;
}
iframe {
  border:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#div_haut{
  left:0;
  top:0;
  height:80px;
}
#div_gauche {
  position:absolute;
  top:80px;
  left:0;
  bottom:0;
  width:170px;
}
#div_droite {
  position:absolute;
  top:80px;
  left:170px;
  right:0;  
  bottom:0;
}

c'est du placement en absolute, donc pas bien malléable.

A tester sur les différents navigateurs quand même.

Si tu fais du PHP je pense que tu tirerais avantage à t'en servir (include).

**scoubi77** · 03/10/2012, 21h02

un grand merci, je rencontre un soucis de hauteur ma bannière est coupée en sa moitié, comment agrandir en hauteur cette dernière ?
si non le centrage est parfait un grand merci àtoi

**scoubi77** · 05/10/2012, 18h43

bonsoir Nosmoking,

aurais tu une solution pour ma bannière qui est coupée en son milieux à la moitiée de cette dernière, je n'arrives pas à l'afficher complètement ?

merci par avance

**NoSmoking** · 06/10/2012, 06h29

Pour le problème de hauteur du bandeau il te faut jouer sur la propriété height

Code :

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

1
2
3
4
5
#div_haut{
  left:0;
  top:0;
  height:80px;  /* METTRE LA VALEUR SOUHAITE */
}

il faut ensuite mettre la même valeur à la propriété top des DIVs gauche et droite

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#div_gauche {
  position:absolute;
  top:80px; /* METTRE LA MEME VALEUR */
  left:0;
  bottom:0;
  width:170px;
}
#div_droite {
  position:absolute;
  top:80px; /* METTRE LA MEME VALEUR */
  left:170px;
  right:0;  
  bottom:0;
}

http://torgar.developpez.com/glossai...tionnement.php

**scoubi77** · 06/10/2012, 12h42

Bonjour Nosmoking,

J'avais uniquement modifié la valeur de l'iframe haut
Et je comprend maintenant mon erreur je teste ce soir,
Merci pour tout

**scoubi77** · 06/10/2012, 20h52

Bonsoir Nosmoking,

Ça marche, il ne me reste plus qu'à trouver comment réduire la bannière qui dépasse un peu de la fenêtre droite ( div droite ) et remonter l'ensemble vers le haut de la page car l'espace entre le le site et le bord haut est trop important.
Si tu as une idée sur ce dépassement, de mon côté je vais continuer à chercher pourquoi mais je pense que en rajoutant width:170px; je devrais solutionner probleme dans la partie haut du code css merci pour tout
Scoubi

**scoubi77** · 07/10/2012, 16h13

Bonjour Nosmoking,

J'ai rouvé pour remonter vers le haut le site j'ai pour cela changé à 0% le margin

Code :

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

1
2
3
4
5
6
7
8
#page {
  position:relative;
  width:985px;
  margin:0% auto;
  padding:0px;
  min-height:97%;
  border:0px solid #E0E0E0;
}

Je continu à chercher pour la bannière un poil plus longue que mon menu et mon contenu de site

Merci

Scoubi

**scoubi77** · 07/10/2012, 20h26

C'est bon j'ai trouvé pour mon problème de bannière j'ai ajouté dans haut
width:968px; et j'ai réussi merci pour tout

Bonne soirée et un grand merci Nosmoking

Le css et les balises Iframe

CSS

Discussions similaires

Partager

Partager