Scroll avec iframe de bonne taille

**DjChat** · 24/04/2008, 12h28

Bonjour a tous, je suis entrain de faire un site qui utilise une iframe.

Cette iframe est de cette taille width="460" height="470" et dedans je lui fait aparaitre toujours la meme image de fond qui a exatement la meme taille, c'est juste le contenu que je rajoute, genre texte qui change.

J'ai fait ma premiere page qui va dans l'iframe avec cette image et son contenu qui est un formulaire et aucun souci, j'ai fait une deuxieme page avec la meme image et j'ai juste rajouter du texte et la sous IE il me met un scroll alors que sur Firefox et Opéra il n'y en a pas...

Dans l'iframe j'ai mi scroll auto au cas ou j'ai une page qui en a besoin, je l'ai mi en no pour tester et la come par magie la page dans l'iframe est positionner nickel sans bordure, la j'vous avou que je suis un peu perdu, parc'que je suis casi obligé de garder le scroll auto...

J'vous met mon html et mon css, si vous avez une idée je suis preneur!!!

Mon HTML:

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
 
<body>
 
<table id="page-table"><tr><td id="page-td">
 
<div id="conteneur">
 
 
<div id="menu_gauche"><a href="pages/association.html" target="contenu">contact</a></div>
 
 
<div id="contenu">
 
<iframe name="contenu" src="http://www.google.fr" marginheight="0" marginwidth="0" width="460" height="470" scrolling="auto" frameborder="0">accueil</iframe>
 
</div>
 
 
 
 
</div>
 
</td></tr></table>
 
</body>

Le CSS de mon site:

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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
 
{
    list-style-type: none;
    margin : 0px;
    padding:0px;
}
 
html {
    height: 100%;
}
 
 
body{
 
    font-family: "Times New Roman", Times, serif;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
 
}
 
/*------------ Les 3 étapes suivantes sont pour centrer le contenu de la page */
 
.centrer {
  margin-left: auto;
  margin-right: auto;
  width : 1000px;
  text-align : left;  /* pour résoudre le bug de centrage de IE */
}
 
 
#page-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}
 
/* -----------  Div principal (ou conteneur)*/
 
#conteneur{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 810px;
    height: 610px;
 
}
 
/*-------------Div du menu gauche */
 
#menu_gauche{
    width: 280px;
    height: 610px;
    background-image: url(../images/menu_gauche.jpg);
 
} 
 
/*-------------------Div du menu du haut */
 
#menu_haut{
    position: absolute;
    top: 0px;
    width: 460px;
    height: 90px;
    margin-left: 280px;
    background-image: url(../images/menu_haut.jpg);
}
 
 
#menu_droit{
    position: absolute;
    top: 0px;
    margin-left: 740px;
    width: 70px;
    height: 610px;
    background-image: url(../images/menu_droit.jpg);
 
}
 
#contenu{
    position: absolute;
    margin-left: 280px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 0px;
    top: 90px;
    width: 460px;
    height: 470px;
    background-image: url(../images/iframe_contenu.jpg);
}
 
#bas_page{
    position: absolute;
    margin-left: 280px;
    top: 560px;
    width: 460px;
    height: 50px;
    background-image: url(../images/bas.jpg);    
}

Mon deuxieme css qui est pour les pages qui sont aplé dans l'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
20
21
22
23
24
25
26
27
28
29
 
 
{
    list-style-type: none;
    margin : 0px;
    padding:0px;
}
 
body{
 
    height: 100%;
    margin: 0px;
    padding: 0px;
}
 
 
#conteneur{
    width: 460px;
    height: 470px;
    margin: 0px;
    background-image: url(../images/contact.jpg);
 
}
 
#iframe{
    width: 460px;
    height: 470px;
    margin: 0px;
    }

Merci d'avance!!!

**DjChat** · 28/04/2008, 09h58

J'me demandais si il etait possible de metre deux iframe au meme endroit et de lancer soit l'une soit l'autres par raport au lien que je click, comme sa j'en met une en scroll auto et l'autre en no.

Seulment il m'ouvre les iframes les une en desous des autres, y a t'il moyen de le faire en html ou faut t'il que je mette une condition en PHP?

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 id="menu_gauche"><a href="pages/contact.html" target="contenu">contact</a></div>
 
<a href="pages/association.html" target="contenu2">association</a>
 
 
<div id="contenu">
 
<iframe name="contenu" src="" marginheight="0" marginwidth="0" width="460" height="470" scrolling="auto" frameborder="0">accueil</iframe>
 
<iframe name="contenu2" src="" marginheight="0" marginwidth="0" width="460" height="470" scrolling="no" frameborder="0">association</iframe>
 
</div>

Merci d'avance!!!!

**hakurou** · 28/04/2008, 13h54

bonjour,

désormais les iframes ne sont plus conseillées, tu peux faire une equivalence avec un <div style="overflow:auto;width:460px;height:470px;"></div>
enfin renseigne toi sur overflow puis tu verras.

oui tu peux faire apparaitre soit l'un soit l'autre avec du javascript.
voir la propriété CSS/DHTML : display

j'ai testé tes codes, le scroll que je vois c'est celui de l'iframe google et c'est normal qu'il apparaisse vu que la page est plus grande sous IE

**DjChat** · 28/04/2008, 14h20

Oui je sais que les iframes sont plus conseillé, mais c'est le client qui a exigée de les utlisées...

J'irai jeter un oeuil sur ta solution en javascript dès que j'ai un ptit moment...

Et pour le scroll sur Goolge je sais que c'est normal, c'est quand j'apel ma page association dans l'iframe, qui est une image de la taille exacte de l'iframe qui a un scroll alors qu'elle ne devrai pas...

**hakurou** · 28/04/2008, 14h56

sans le code de ta page association c'est plus dur de trouver le truc qui va pas !

mais cette image, est ce une simple image ou une image mise en background ?

si c'est une simple image essaie de voir en lui mettant un css border:none;

**DjChat** · 28/04/2008, 15h49

Ben j'ai pas mi le code de la page, vu que c'est une simple image, j'ai mi un border none et ca n'a rien changé...

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
 
 
<body>
 
<div id="iframe">
 
 
<img src="../images/association.jpg" alt="association Art'Kateo" />
 
 
 
 
 
 
</div>
 
</body>

Comme je disais plus haut j'ai utilisée la meme image de depart sur une autre pages et j'ai pas eu de souci de scroll, elles sont toute les deux de la meme taille et elles sont le meme css...

Scroll avec iframe de bonne taille

Défilement en CSS

Vue hybride

Discussions similaires

Partager

Partager