Discussion :

[pas30]

Bonjour,

Je travaille sur un tableau qui est centr� en milieu de page et qui scrolle correctement (position fixed), je voudrais que derri�re ce tableau de 600*400 se trouve un fond gris� afin de faire ressortir le contenu de mon tableau
Ce fond fera donc toute la taille de la page, je n'ai pas de probl�me pour r�cup�rer les tailles de la page quelque soit le navigateur
Dois-je faire un div de toute la page avec fond gris� et y int�grer le tableau de 600*400 en position centr� et si oui comment int�grer un tableau dans une div afin que ce contenu scrolle aussi car dans mon cas le fond gris� doit scroll� ainsi que le tableau ?
Merci

[Alt157]

C'est quoi le probl�me js dans l histoire ?

Le tableau est ins�r� dynamiquement avec javascript (sur un clic sur un lien ou un button par exemple ? Ou c'est un tableau que tu affiches directement dans ta page, au chargement.

Au chargement : Avec CSS tu peux mettre un background-color a ton body.

Dynamiquement : oui tu peux cr�er une div qui fera la largeur et la hauteur de ta page (avec z-index pour qu'il passe au dessus du reste de ta page ) et centrer de la meme fa�on que tu le fais actuellement normalement...

Tu centres comment ?

[le_chomeur]

pas compris non plus ??? un probl�me de z-index ? de scroll ?

[pas30]

Alors voil� du concret :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
document.write('<style type="text/css">\n'+
 '#popavenir \n'+
 '	{\n'+
 '	position:fixed;\n'+
 '	width:'+fenWidth+'px;\n'+
 '	height:'+fenHeight+'px;\n'+
 '	top:0px;\n'+
 '	left:0px;\n'+
 '	position: expression(IEFixedElementPos());;\n'+
 '	top: expression(scroll_fenetre());\n'+
 '  background-image: url(fondgris.gif);\n'+
 '	}\n'+
'</style>');

j'ai donc un style css "popavenir" qui prend la hauteur et la largeur de l'�cran
Ensuite je veux juste afficher un tableau centrer dans la hauteur et la largeur de la page comme ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.write("<div id='popavenir'><TABLE CELLPADDING=0 CELLSPACING=0 border=0><TR><TD bgcolor=#000000 width=300 height=15><div align=left><FONT face=Arial, Helvetica, sans-serif color=#ffffff size=2><b><a style=color:#FFFFFF href=<?php echo $domaine;?> target=_blank>xxx</a></b></font></div></TD><TD width=300 height=15 bgcolor=#000000><div align=right><FONT face=Arial, Helvetica, sans-serif color=#ffffff size=2><b><a id=ouvre style=color:#FFFFFF;display:none href=http://www.xxx.com target=_blank onClick=popclose()>Ouvrir le site</a> <a id=ferme style=color:#FFFFFF;display:none href=# onClick=popclose()>Fermer</a></b></font></div></td></TR><TR><TD colspan=2><iframe onLoad=fermevisible() width=600 height=400 src=http://www.xxx.com></iframe></TD></TR></TABLE></div>");

Donc voil� c'est assez simple ma div contient un tableau affichant des informations mais je dois le centrer tout simplement
Dois je d�finir un nouveau style css affect� � ce tableau afin de le positionner sachant que j'ai d�j� les valeurs de positionnement pour le centrage qui sont contenu dans les variables "hauteur" et "gauche"
Sinon pour cette partie :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

'  background-image: url(fondgris.gif);\n'+

J'aimerais mettre un border=0 � l'image de fond

[le_chomeur]

la bordure n'est pas plut�t sur ton lien ???

sinon si c'est sur l'image :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
#popavenir img{
border:0px;
}

[pas30]

Je veux avoir ma div avec fond gris� et par dessus mon tableau centr� dans la page et que lorsque l'on scrolle le tableau scrolle aussi ainsi que le fond gris�
J'ai d�j� le fond gris� mais je ne comprends pas la logique de javascript avec les div mais alors vraiment pas mais sinon �� ne doit pas �tre compliqu� du tout
Pour faire ce que je veux, vais je devoir faire deux divs ???
une div avec le fond gris� et une pour le tableau ? N'y a t il pas plus simple ???
En positionnant simplement le tableau au centre de la div gris�
Merci

[le_chomeur]

si !
jouer sur les z-index :

<div id="grise" style="z-index:1000;..."></div>
<tableau style="z-index:2000;..."></tableau>

[Alt157]

Bonjour !!

En html tout simple tu pourrais faire comme cela pour mettre un fond d'une couleur et centrer (en hauteur et largeur un tableau) :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
	<style type="text/css">
		body
		{
			margin				: 0px;
			padding				: 0px;
		}
		#fond
		{
			width 				: 100%;
			height 				: 100%;
			background-color	: #808080;
		}
		#tableau
		{
			margin				: auto;
			left				: 50%;
			height				: 50px;
			border				: none;
			padding				:0px;
			border-collapse		:collapse;
		}
		#tableau td
		{
			background-color	: #000000;
		}
		.celluleTexte
		{
			width				: 300px;
			height 				: 15px;			
		}
		.aligneGauche
		{
			text-align			: left;
		}
		.aligneDroite
		{
			text-align			: right;
		}
		#tableau td a
		{
			font-family			: Arial, Helvetica, sans-serif;
			color				: #ffffff;
			font-size			: 18px;
			font-weight			: bold;
		}
		.invisible
		{
			display				: none;
		}
	</style>
	<script type="text/javascript">
	<!--
		function hauteurPage()
		{
			var hauteur = document.documentElement.clientHeight;
			document.getElementById('fond').style.height = hauteur +'px';
			var hauteur = document.documentElement.clientHeight;
			hauteur = hauteur - document.getElementById('tableau').clientHeight;
 
			hauteur = hauteur / 2;
			document.getElementById('tableau').style.marginTop = hauteur +'px';
		}
		function popclose()
		{
			// TODO
		}
		function fermevisible()
		{
			// TODO
		}
	-->
	</script>
</head>
<body onload="hauteurPage()">
	<div id="fond">
		<table id="tableau">
			<tr>
				<td class="celluleTexte aligneGauche">
					<a href="http://www.ledomaine.com" onclick="window.open(this.href);return false;" >xxx</a>
				</td>
				<td class="celluleTexte aligneGauche">
					<a id="ouvre" class="invisible" href="http://www.xxx.com" target="_blank" onclick="popclose()">Ouvrir le site</a> 
					<a id="ferme" class="invisible" href="javascript:void(0);" onclick="popclose()"> Fermer </a>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<iframe width="600" height="400" src="http://www.xxx.com"></iframe>
				</td>
			</tr>
		</table>
	</div>	
</body>
</html>

D�sol� d'insister mais a quoi sert le document.write ? tu ne peux pas �crire directement en html ?

Si c'est lors d'un clic etc... Tu peux garder cette structire mais jouer avec les Z-Index pour passer au dessus du texte

[pas30]

Bon en fait voil� le code que je r�alise sera coll� sur des sites qui ne m'appartiennent pas
1 - Je dois faire une div en position fixed avec fond gris�, l'objectif �tant de d�sactiv� le site et ajouter un effet gris�
2 - J'ai un tableau qui doit s'afficher par dessus ce fond gris� afin d'afficher une image mais ce tableau devra �tre centr� dans la page pour �tre pile au milieu
Donc pour simplifier au maximum on aura une div qui sera sur toute la page et par dessus un tableau contenant une image ou autre que l'on pourra fermer cel� fermera alors le tableau et la div avec fond gris�
Est-ce obligatoire donc de cr�er deux styles css l'un pour le fond avec la taille de l'�cran et la position fixed et un autre avec un positionnement centr� de la taille de mon tableau ???
Voici le style css de mon tableau :
le tableau fait 600*415
fenHeight et fenWidth contienne les valeurs de hauteur et largeur de l'�cran :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
hauteur = (fenHeight-415)/2;
gauche = (fenWidth-600)/2;

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
document.write('<style type="text/css">\n'+
 '#pop \n'+
 '	{\n'+
 '	position:fixed;\n'+
 '	width:600px;\n'+
 '	height:415px;\n'+
 '	top:'+hauteur+'px;\n'+
 '	left:'+gauche+'px;\n'+
 '	position: expression(IEFixedElementPos());;\n'+
 '	top: expression(scroll_fenetre());\n'+
 '	}\n'+
'</style>');

Si je fais deux styles et donc que je cr�� un autre style :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
document.write('<style type="text/css">\n'+
 '#fond \n'+
 '	{\n'+
 '	position:fixed;\n'+
 '	width:'+fenWidth+'px;\n'+
 '	height:'+fenHeight+'px;\n'+
 '	top:0px;\n'+
 '	left:0px;\n'+
 '	position: expression(IEFixedElementPos());;\n'+
 '	top: expression(scroll_fenetre());\n'+
 '	}\n'+
'</style>');

Le probl�me c'est que �� risque de ramer sous internet explorer surtout car sous ie la position haute (top) est calcul�e � chaque scrolle dans la fen�tre car ie6 ne conna�t pas la position fixed
Donc ma fonction scroll_fenetre() r�gle ce souci
Votre avis s'il vous plait n'y a t il pas plus simple pour arriver au m�me r�sultat c'est une simple question
Et sinon je mets un document.write car le code attendu est du javascript