Discussion :

[devin59]

Bonjour à tous !!

Voilà j ai un petit souci et j'espère me trouver sur le bon forum.

Je développe un petit site pour les anciens étudiants de mon bts et j ai donc la photo de l etudiant qui doit s afficher mais j aimerais que la photo s'affiche dans un cadre voir le schéma :



Le probleme c'est que mon cadre s'affiche sous la photo donc on ne le voit pas, et la question c'est comment faire pour mettre le cadre au dessus de la photo de l etudiant ?

Merci d'avance !!

[beeboo]

Salut,
Donne à ton cadre une propriété z-index élevée, cela devrait le faire.

[devin59]

Merci de te préoccuper de mon problème mais j ai jamais réussi à utiliser les z-index...

CSS :

Code css :

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
 
#cadreFiche
{
	margin-top : 15px;
	margin-left : 15px;
	width : 300px;
	height : 350px;
	float : left;
	background : url("images/fdPhoto.png");
	background-repeat : no-repeat;
	z-index : 10;
}
#cadreFiche a
{
	display : block;
	width : 100%;
	height : 30px;
	color : gray;
	text-decoration : none;
	text-align : center;
	background : url("images/fdLienFiche.png");
	margin-top : 300px;
}
#cadreFiche a:hover
{
	display : block;
	width : 100%;
	height : 30px;
	color : gray;
	background : url("images/fdLienFicheHover.png");
	margin-top : 300px;
}
#photoFiche img
{
	z-index : 1;
	display : block;
	position : relative;
	float : left;
	width : 100%;
	height : 300px;	
}
#cadreFiche a img
{
	z-index : 1;
	display : block;
	margin-left : 10px;
	float : left;
	width : 30px;
	height : 30px;	
}

et mon HTML :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="cadreFiche">
 
         <div id="photoFiche">
 
         <img src="images/<?PHP echo $image; ?>" alt="photo de <?PHP echo $donnees['nom']." ".$donnees['prenom']; ?>" title="photo de <?PHP echo $donnees['nom']." ".$donnees['prenom']; ?>" />
 
         </div>
 
          <a href="envoiMail.php?noEtud=<?PHP echo $donnees['noUtilisateur']; ?>"> <img src="images/mail.ico" alt="mail" title="mail" /> Envoyer un Mail </a>
 
</div>

Est ce bien comme cela qu'on utilise les z-index ??

Merci de t'intéresser à mon problème !

[Erwan31]

Bonsoir,
erreur classique : la propriété z-index n'a d'effet que sur les éléments positionnés (relative, absolute et fixed) Commences par ajouter un position:relative donc.

[devin59]

Merci pour la remarque Erwan31 mais ce n'est pas cela le problème. Je m'en suis rendu compte après avoir posté donc j ai testé avec les 3 (relative, absolute et fixed) mais aucun n'a fonctionné.

Si vous avez une autre idée je suis preneur

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
 
#cadreFiche
{
	position : relative;
	margin-top : 15px;
	margin-left : 15px;
	width : 300px;
	height : 350px;
	float : left;
	background : url("images/fdPhoto.png");
	background-repeat : no-repeat;
	z-index : 9;
}
#cadreFiche a
{
	display : block;
	width : 100%;
	height : 30px;
	color : gray;
	text-decoration : none;
	text-align : center;
	background : url("images/fdLienFiche.png");
	margin-top : 300px;
}
#cadreFiche a:hover
{
	display : block;
	width : 100%;
	height : 30px;
	color : gray;
	background : url("images/fdLienFicheHover.png");
	margin-top : 300px;
}
#photoFiche img
{
	z-index : 1;
	display : block;
	position : relative;
	float : left;
	width : 300px;
	height : 300px;	
}
#cadreFiche a img
{
	display : block;
	margin-left : 10px;
	float : left;
	width : 30px;
	height : 30px;	
}

Merci pour l'intêret que vous portez à mon petit souci.

[Erwan31]

Ce n'était pas une solution, je ne me suis pas encore penché sur ton problème.
Aurais tu un lien? ça faciliterait les choses.

Rq: pour faciliter la compréhension de ton code, penses à donner le code une fois interprété et non le code PHP

[devin59]

Désolé de ne répondre que maintenant j'étais en cours aujourd'hui.

Et excuses moi mais je n ai pas de lien à te passer, je travaille en local.

sinon en HTML cela donne :

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
 
<html>
  <head>
    titre, stylesheet, .....
  </head>
 
  <body>
    <div id="page">
<!--                   ¤¤¤  BANNIERE ET IDENTIFICATION   ¤¤¤                   --->
      <div id="banniere">
	<div id="identifiant">
           connecté en tant que <span class="rouge"> DUPOND Jean </span> <span class="deconnect"> <a href="deconnect.php?page=/anciens IG/fiche.php&noEtudiant=5" > [deconnexion] </a> </span>					
	</div>
	 <form method="post">
	 <div id="panelConnexion">
	    <div id="identifiants">
	         <label> Utilisateur : </label> <input type="text" name="nom" maxlength="15" size="11" /><br />
		 <label> Password : </label> <input type="password" name="pass" maxlength="15" size="11" />
	    </div>
            <input class="valider" name="connect" type="image" value="connect" src="images/connexion.png" alt="connexion" title="connexion" />
            <div id="btnsPanelConnexion">
	       <a href="nouveauCpte.php">nouveau compte</a> <a href="mdpOublie.php">mot de passe ?</a>
	     </div>
           </div>
	 </form>
      </div>	
 
<!--                   ¤¤¤                   MENU                   ¤¤¤                   --->
 
       <div id="menu">
          <a href="index.php"> Accueil </a>
	  <a href="tableauDeBord.php"> Tableau de bord </a> 
	  <a href="offres.php"> Offres </a> 
          <a href="recherche.php"> Recherche </a> 
          <a href="forums.php"> Forum </a> 
	</div>
 
<!--                   ¤¤¤                  CORPS                  ¤¤¤                   --->
 
	<div id="corps">
 
 
<!--                 ¤¤¤               AFFICHE PHOTO              ¤¤¤                --->
 
	  <div id="cadreFiche">						
	      <div id="photoFiche">					
	         <img src="images/nc.png" width="298" height="298" alt="photo de MARTIN Jacques" title="photo de MARTIN Jacques" />
              </div>
              <a href="envoiMail.php?noEtud=127"> <img src="images/mail.ico" alt="mail" title="mail" /> Envoyer un Mail </a>
          </div>
 
<!--           ¤¤¤           INFORMATIONS GENERALES           ¤¤¤             --->
 
	  <div id="FicheInfoGene">
		.............								
	   </div>
        </div>
       </div>
     </body>
</html>

Le css est sur mon message précédent.

Merci pour ton aide.

[Erwan31]

Est ce que tu as un doctype avant html?

[devin59]

Ben j ai déjà essayé de rajouter :

Code :

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

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mais ca ne change rien

[Erwan31]

Pas le temps de regarder ton problème, débrouilles toi pour placer l'image au dessus de ta photo

[devin59]

Ok merci de ton aide.

Si quelqu'un pouvait me rendre service ce serait sympa parce que là je ne m en sors vraiment pas...

Merci d'avance !!

[devin59]

Bonsoir à tous,

Excusez moi d'insister et de remonter la discussion comme ça mais je ne m'en sors pas, et j'aurais vraiment besoin d'aide...

Si quelqu'un pouvait m aider, ce serait vraiment cool.

Merci d'avance à tous.

[Erwan31]

Le mieux serait que tu fournisse un lien.