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