Div qui ne veut pas se positionner au dessus de tout

**lonyc** · 09/10/2008, 22h24

Bonjour,

Pour mon site j'ai créer une fiche qui se compose ainsi

Code :

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

1
2
3
4
5
6
7
8
9
<div name="fiche">
  <div name="titre"></div>
   <div> qui oglobe mes 2 colonnes (je pense ne qu'elle sert à rien)
<div>Celui qui me pse probleme</div>
        <div name="colonne 1 "> en float left qui contient une photo + 1 autre div en dessous de la photo</div>
        <div name="colonne 2 "> en float left qui contient 2 div texte</div>
   </div>
</div>

voila en gros mon code, tout est bien placé j'ai pas de problemes particuliers

Mais voilà, je veux faire un script qui dit "quand je passe sur la photo, rend visible un div qui viens se mettre dans la fiche au dessus de tout"

C'est pas le script qui pose probleme (enfin pour le moment

)
C'est ce satané div que je veux placé au dessus de tout qui me pose probleme, il se met bien dans ma fiche mais mes colonnes se place en dessous de lui les unes en dessous des autres !!! Je veux qu'elle passe derriere.

J'ai tout essayé de la position absolute, avec le z-index rien a faire.

Si vous avez une idée ?

Merci et bonne soirée

**E.Bzz** · 10/10/2008, 10h27

Bonjour,

Envoyé par lonyc

J'ai tout essayé de la position absolute, avec le z-index rien a faire.

Si vous avez une idée ?

Non, 2

:

Donne aussi le code CSS que tu as définis pour ces div, sinon pas possible de t'aider
Utilise des ID au lieu de NAME pour tes div (les CSS utilisent les id et non les name comme référence + le name n'est plus permis pour un div)

A+

**HiRoN** · 10/10/2008, 14h18

As-tu une page en ligne ? (afin de voir le comportement du moment)

Non, 2 :

* Donne aussi le code CSS que tu as définis pour ces div, sinon pas possible de t'aider
* Utilise des ID au lieu de NAME pour tes div (les CSS utilisent les id et non les name comme référence + le name n'est plus permis pour un div)

+ 1

**lonyc** · 10/10/2008, 15h57

bon voilà j'y suis presque, je vous donne l'adresse, c'est après la validation du formulaire, il faut surtout mettre une photo en jpg moins de 2000 ko si on veux que ca marche (j'ai pas fini)

Vous avez le bon résultat sous FF mais sous IE ca marche pas encore.
Ce que je veux c'est quand on passe la souris sur la photo il m'affiche la grande photo

Voici le lien de ma page : http://pts.annonces.free.fr/insert.php
Je vais rebosser dessus ce soir donc il y auras des changements le lien ne correspondras peut être plus au code.

Voici mon code (juste pour la fiche)
Le CSS :

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
div#fiche_fiche{
	width:640px;
	height:280px;
	border-width: 1px; 
	border-style: solid; 
	border-color: #ba55d3; 
	text-align:left; 
	display:table; 
 
 
	}
div#g_photo{
	position: absolute; 
	z-index: 100;
	margin-top:40px;
	margin-left:50px;
	width:500px;
	height:10px; 
	display:block;
 
}	
div#fiche_haut{ 
 
	width:640px;
	height:20px;
	padding-top:1px; 
	background-color:#e6e6fa;
	border-width: 1px;
	border-style: solid;
	border-color: #ba55d3;
	border-top-width:0;
	border-left-width:0;
	border-right-width:0;
 
	}
 
div#fiche_titre{ 
 
	text-align:left;
	width:500px; 
	float:left;
	font-weight:bold;
 
	} 	
div#fiche_genre{
	text-align:right;
	width:100px;
	float:left;
	font-weight:bold;
 
	}
div#fiche_gauche{
	float:left;
	width:200px; 
	margin-top:20px;
	margin-left:10px;
 
	} 	
div#fiche_photo{
	width:200px; 
	border-width: 1px; 
	border-style: solid; 
	border-color: #000000;
 
	}
div#fiche_prix{
 
	width:200px; 
	margin-top:10px;
	}		 
div#fiche_option{
 
 
	width:195px; 
	height:40px;
	padding-top:5px;
	padding-left:5px;
	margin-top:5px; 
	background-color:#fff;
	text-align:left;	
	font-weight: bold;
	border-width: 1px; 
	border-style: solid; 
	border-color: #ba55d3; 
	}
div#fiche_droite{
 
 
	float:left;
	width:400px;
	margin-top:20px;
	margin-left:10px;
	text-align:center;
 
	}
div#fiche_description{  
 
 
	width:400px;
	height:222px;
	background-color:#fff6ff;
	padding-left:5px; 
	text-align:left;
	display:table; 
	border-width: 1px; 
	border-style: solid; 
	border-color: #ba55d3; 
	}	
div#fiche_contact{
 
 
	width:300px;
	height:50px;
	margin-left: auto;
    margin-right: auto;
    margin-top:15px;
	margin-bottom:30px;
	padding-top:5px; 
	padding-left:25px;
	background-color:#e6e6fa;
	text-align:left;
	border-width: 1px; 
	border-style: solid; 
	border-color: #ba55d3; 
	display:table; 
	}

Le code 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
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
 
function ficheannonce($titre,$cp,$photo,$description,$tel,$genre,$prix) //Control mon formulaire 
{
?>
 
<div name="fiche_fiche" id="fiche_fiche">  
 
<!--Titre-->
	<div name="fiche_haut" id="fiche_haut">
		<div name="fiche_titre" id="fiche_titre">&nbsp;&nbsp;<?echo $titre;?></div>
		<div name="fiche_genre" id="fiche_genre"><?echo $genre;?>&nbsp;&nbsp;</div> 
	</div> 
<!--LIGNE PHOTO ET DESCRIPTION-->
 
<!--gauche-->
<div>   
<div name="fiche_gauche" id="fiche_gauche"> 
 
		<!--photo-->
		<div  name="fiche_photo" id="fiche_photo" onMouseOver="document.getElementById('g_photo').style.visibility='visible';"	
onMouseOut="document.getElementById('g_photo').style.visibility='hidden'";><?if (isset($photo)){echo '<img src="Photos/'.$photo.'"width="200px" >';}
		else {echo '<img src="images/nophoto.gif" width="200px">';}
		?>
		</div>
		<!--prix-->
		<div  name="fiche_prix" id="fiche_prix">
		<? if (isset($prix)){?><p style="font-weight : bold;">Prix : <?echo $prix;?>&nbsp;€</p>
		<? }
		else{?><p style="font-weight : bold;">Faire une offre</p>
		<?}?>
		</div> 
 
		<!--options-->
		<div  name="fiche_option" id="fiche_option">
		Envoyer à un ami<br/>  
		Sauvegarder
		</div> 
</div>
 
 
<!--droite--> 
<div name="fiche_droite" id="fiche_droite"> 
			<!--Description-->
			<div name="fiche_description" id="fiche_description">
			<p><b>Code postal : </b><?echo $cp;?></p>
			<p><b>Description : </b><?echo $description;?></p> 
 
			</div>
			<!--Contact-->
			<div name="fiche_contact" id="fiche_contact">
			<p style="margin-left:30px;" >
			<? if ((isset($tel))&&($tel<>"0")) {?>
 
			<p style="width:200px;height:18px;margin-left: auto;margin-right:auto;margin-bottom:5px;background-color:#ffffff;text-align:center;pading-top;2px;border-width: 1px; border-style: solid; border-color: #ba55d3;font-weight: bold;">Contactez le vendeur</p>
			<?}?>
			<b>Envoyez un Email au vendeur</b><br/>
			<? if ((isset($tel))&&($tel<>"0")) {?>
			<b>Par télephone au : </b><?echo $tel;}?></p>
			</div>  
 
</div>
<?if (isset($photo)){?>
<div name="g_photo" id="g_photo" style="visibility:hidden;"><img src="Photos/<?echo $photo;?>"><div>   
<?}?>
</div> 
</div>
<?
} 
?>

En même temps si vous voyez des bugs dites les moi, quand on teste son propre code on ne pense pas à tout les bugs qui pourrais y avoir

Div qui ne veut pas se positionner au dessus de tout

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager