Le css et les balises Iframe

Version imprimable

01/10/2012, 19h32
scoubi77

Le css et les balises Iframe

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
http://www.tufat.com/html_tutorials/images/frames2.jpg

merci à vous tous pour vos conseils et aides

Cordialement

scoubi
01/10/2012, 22h21
Torgar

Bonsoir,

Pourrais-t-on avoir le code HTML et CSS employé s'il te plait ? Nous pourrions plus facilement t'aider dans ton épreuve.
01/10/2012, 22h28
NoSmoking

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

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:

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

01/10/2012, 23h06
NoSmoking

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

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:

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

02/10/2012, 08h12
scoubi77

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

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

voici mon code :

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

02/10/2012, 22h09
NoSmoking
Citation:
Code:

1 2 iframe { height:100%;
à ton avis il vient d'où le problème !
03/10/2012, 05h41
scoubi77
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:

1 2 3 { min-height: 100%; }
J'avoue être un peu perdu, merci pour ton aide
03/10/2012, 17h14
scoubi77

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 :

http://www.tufat.com/html_tutorials/images/frames2.jpg

peux tu m'en dire plus Nosmoking merci par avance

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

Code:

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:

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).

03/10/2012, 21h02
scoubi77

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
05/10/2012, 18h43
scoubi77

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

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

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:

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://javascript.developpez.com/pub...nformation.png http://torgar.developpez.com/glossai...tionnement.php

06/10/2012, 12h42
scoubi77

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
06/10/2012, 20h52
scoubi77

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
07/10/2012, 16h13
scoubi77
Bonjour Nosmoking,

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

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
07/10/2012, 20h26
scoubi77

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