Bonjour/Bonsoir tout le monde et joyeuses fêtes pour commencer 
Je viens demander un peu d'aide car après des heures à essayer de comprendre mon problème je sèche totalement...
J'ai juste un/des liens <a href> qui ne fonctionne pas et je n'ai absolument aucune idée de pourquoi, sur l'inspecteur d'élément de base mon lien à une taille de 0x0, je peux lui en attribuer une, le rendre visible avec un background par exemple, j'ai beau le passer en z-index 1000 il reste incliquable (il est bien en cursor pointer), MAIS il ne suit pas le déplacement de mon SVG qui est en position absolute, c'est peut-être la d'ou vient le problème mais j'ai pas trouvé comment le régler... Help
Modifié par Midnight17 (26 Dec 2017 - 15:48)
Je viens demander un peu d'aide car après des heures à essayer de comprendre mon problème je sèche totalement...
J'ai juste un/des liens <a href> qui ne fonctionne pas et je n'ai absolument aucune idée de pourquoi, sur l'inspecteur d'élément de base mon lien à une taille de 0x0, je peux lui en attribuer une, le rendre visible avec un background par exemple, j'ai beau le passer en z-index 1000 il reste incliquable (il est bien en cursor pointer), MAIS il ne suit pas le déplacement de mon SVG qui est en position absolute, c'est peut-être la d'ou vient le problème mais j'ai pas trouvé comment le régler... Help
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Demande Admin</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="css/cssHeader.css"/>
<link rel="stylesheet" href="css/cssAdminDemande.css"/>
</head>
<body id="jBodyAdminDemande">
<?php include "Header.html"; ?>
<div class="jWrapperAdminDemande">
<!-- Filtrage des demandes faites à l'admin -->
<div id="jNavRequestsAdminDemande">
<div>
<button>Toutes les demandes</button><button>Nouveau projet</button>
</div>
<div>
<button>Affectation projet</button><button>Suppression projet</button>
</div>
</div>
<div class="jContainerAdminDemande">
<div class="jBlockDemandeAdmin">
<div>
<img src="images/image3.png" alt="User name"/> <!-- Avatar de l'utilisateur -->
</div>
<div>
<!-- Contenu texte -->
<p> Prénom <span> Nom </span> </p>
<p> Demande de nouveau projet </p>
<!-- SVG -->
<div>
<div class="jBlockSVG1_DemandeAdmin"><a href="#"><img src="svg/check1.svg" alt=""/></a></div>
<div class="jBlockSVG2_DemandeAdmin"><a href="#"><img src="svg/check2.svg" alt=""/></a></div>
<div class="jBlockSVG3_DemandeAdmin"><a href="#"><img src="svg/eye.svg" alt=""/></a></div>
</div>
<!-- Date -->
<div class="jBlockDateDemandeAdmin">
<p> 07/04/2017 </p>
</div>
</div>
</div>
<div class="jBlockDemandeAdmin">
<div>
<img src="images/image4.jpg" alt="User name"/> <!-- Avatar de l'utilisateur -->
</div>
<div>
<!-- Contenu texte -->
<p> Prénom <span> Nom </span> </p>
<p> Demande de suppression du projet Maison sous l'eau </p>
<!-- SVG -->
<div class="jBlockSVG1_DemandeAdmin"><a href="#"><img src="svg/check1.svg" alt=""/></a></div>
<div class="jBlockSVG2_DemandeAdmin"><a href="#"><img src="svg/check2.svg" alt=""/></a></div>
<div class="jBlockSVG3_DemandeAdmin"><a href="#"><img src="svg/eye.svg" alt=""/></a></div>
<!-- Date -->
<div class="jBlockDateDemandeAdmin">
<p> 07/04/2017 </p>
</div>
</div>
</div>
<div class="jBlockDemandeAdmin">
<div>
<img src="images/image5.png" alt="User name"/> <!-- Avatar de l'utilisateur -->
</div>
<div>
<!-- Contenu texte -->
<p> Prénom <span> Nom </span> </p>
<p> Demande d'affectation au projet domotique </p>
<!-- SVG -->
<div class="jBlockSVG1_DemandeAdmin"><a href="#"><img src="svg/check1.svg" alt=""/></a></div>
<div class="jBlockSVG2_DemandeAdmin"><a href="#"><img src="svg/check2.svg" alt=""/></a></div>
<div class="jBlockSVG3_DemandeAdmin"><a href="#"><img src="svg/eye.svg" alt=""/></a></div>
<!-- Date -->
<div class="jBlockDateDemandeAdmin">
<p> 07/04/2017 </p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/scriptHeader.js"></script>
</body>
</html>
/* JE VOUS ÉPARGNE 200 LIGNES DE CSS (Header et filtrage) LE PROBLÈME NE VIENT SANS DOUTE PAS DE LA, MEME EN LES SUPPRIMANT DE MA PAGE IL PERSISTE */
/**************************************************
***************************************************
***************** REQUESTS ADMIN ******************
***************************************************
**************************************************/
html { height: 100%; } /* Pour permettre au contenu de se centrer au milieu de la page */
#jBodyAdminDemande
{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f6f6f6;
height: 100%; /* Pour permettre au contenu de se centrer au milieu de la page */
font-family: "Century Gothic";
color: #858585;
}
/* Enveloppe de la page */
.jWrapperAdminDemande
{
margin-left: 230px; /* Décalage pour l'écart avec la navbar */
margin-right: 30px;
display: flex; /* Pour permettre */
justify-content: center; /* au contenu de */
align-items: center; /* se centrer au */
min-height: 100%; /* milieu de la page */
}
/***************************************/
/***************************************/
/***** Requêtes envoyées à l'admin *****/
/***************************************/
/***************************************/
/* Container de la liste des demandes */
.jContainerAdminDemande
{
display: flex;
flex-direction: column;
width: 800px;
margin-top: 60px;
z-index: -4; /* z-index pour le scroll du filtrage */
}
/* Block qui contient chaque demande */
.jBlockDemandeAdmin
{
display: flex;
flex-direction: row;
margin: 30px 0; /* Espacement entre chaque block de demande */
}
/* Centrage de l'image par rapport à son bloc */
.jBlockDemandeAdmin div:first-child { display: flex; align-items: center; }
/* Image liée au bloc */
.jBlockDemandeAdmin div:first-child img
{
width: 75px;
height: 75px;
margin-right: 30px;
border-radius: 50%;
box-shadow: 3px 0 8px #ccc;
}
.jBlockDemandeAdmin div:nth-child(2)
{
background-color: white;
border-radius: 10px;
box-shadow: 3px 0 8px #ccc;
padding: 0 25px;
position: relative; /* position relative pour le placement de la date */
width: 100%; /* La div prend 100% de la largeur du parent */
}
.jBlockDemandeAdmin div:nth-child(2) p:first-child
{
font-weight: bold;
font-size: 17px;
}
.jBlockDemandeAdmin div:nth-child(2) p:nth-child(2) { font-size: 15px; }
.jBlockDemandeAdmin div:nth-child(2) p span { text-transform: uppercase; } /* Passe les noms de famille en majuscule */
/* Placement du block contenant la date */
.jBlockDateDemandeAdmin
{
position: absolute;
bottom: -23px;
left: 0;
width: 150px;
background-color: #00B297;
border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;
text-align: center;
z-index: -5; /* z-index pour le scroll du filtrage et cacher le background sur le bloc parent */
}
/* Gestion du style de la date et déplacement dans son block */
.jBlockDateDemandeAdmin p
{
margin: 0;
padding: 7px 0;
position: relative;
top: 3px;
color: white;
font-size: 13px !important;
}
/* 3 SVG sur la droite du bloc */
.jBlockSVG1_DemandeAdmin a { background-color: red; width: 50px; height: 50px; z-index: 1000; }
.jBlockSVG1_DemandeAdmin img
{
width: 30px;
height: 30px;
position: absolute;
right: 10px;
bottom: -13px;
box-shadow: 3px 0 8px #ccc;
background-color: #81e569;
border-radius: 50%;
padding: 8px;
cursor: pointer;
}
.jBlockSVG2_DemandeAdmin img
{
width: 15px;
height: 15px;
position: absolute;
right: 60px;
bottom: -13px;
box-shadow: 3px 0 8px #ccc;
background-color: #ec4747;
border-radius: 50%;
padding: 8px;
cursor: pointer;
}
.jBlockSVG3_DemandeAdmin img
{
width: 15px;
height: 15px;
position: absolute;
right: 110px;
bottom: -13px;
box-shadow: 3px 0 8px #ccc;
background-color: #00b297;
border-radius: 50%;
padding: 8px;
cursor: pointer;
}
Modifié par Midnight17 (26 Dec 2017 - 15:48)
Le z-index négatif de mon container était en cause 