Lien caché - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Lien caché

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Lien caché (Lu 3146 fois)

Lien caché
« sur: le 16-11-2013 a 17:51:13 »

Ksos
Membre récent

Hors-Ligne

Messages: 7

Bonjour,

Pour les rubriques de mon site, j'ai créé dans un bloc <nav>:
- un bloc de background (en-dessous avec z-index)
- des blocs en 'display: table-cell' pour chaque rubrique (au milieu)

Et à l'extérieur j'ai créé:
- un bloc pour faire un reflet (au-dessus).

J'ai associé au texte de mes blocs en 'display:table-cell" des liens bien sûr, mais le problème est que quand la souris passe au niveau du reflet cela cache les liens !!!

Auriez-vous une solution pour palier à ce problème ? Est-il possible de rendre le bloc reflet complètement inactif ?

Merci d'avance.

Rapporter au modérateur

Re:Lien caché
« Répondre #1 sur: le 16-11-2013 a 18:00:07 »

Ksos
Membre récent

Hors-Ligne

Messages: 7

Voici mes lignes HTML:

Code:
<div id="reflet"></div>
<nav>
<div id="rubriques">
                  <a href="#"><div class="rub" id="home">home</div></a>
                  <a href="#"><div class="rub" id="presta">prestations</div></a>
                  <a href="#"><div class="rub" id="cv">cv</div></a>
                  <a href="#"><div class="rub" id="contact">contact</div></a>
</div>
            </nav>

Et pour mes lignes CSS:

Code:
nav
{
   display: inline-block;
   position: relative;
   border: solid;
   border-radius: 15px 15px 0 0;
   border-width: 1px 1px 0 1px;
   border-color: black;
   background: url(file:///.../image.jpg);
   width: 1235px;
   height: 50px;
   text-align: left;
   margin-top: 60px;
   margin-bottom: 0px;
}
#rubriques
{
   position: relative;
   left: 20px;
}
#reflet
{
   display: inline-block;
   position: relative;
   left: 0px;
   top: 95px;
   margin-left: 20px;
   height: 20px;
   width: 1200px;
   z-index: 4;
   background: url(file:///.../image.png);
}

.rub
{
   display: table-cell;
   position: relative;
   right: 20px;
   font-size: 1.1em;
   z-index: 3;
}

nav a
{
   color: white;
   text-decoration: none;
}

#home,
{
   width: 75px;
   height: 50px;
   text-align: center;
   vertical-align: middle;
   left: 20px;
}

#home:hover
{
   background: url(file:///.../image.png);
}

« Dernière Édition: le 16-11-2013 a 18:07:45 par Ksos »

Rapporter au modérateur

Re:Lien caché
« Répondre #2 sur: le 18-11-2013 a 18:14:47 »

Ksos
Membre récent

Hors-Ligne

Messages: 7

Je me suis démerdé !!!

Mais si quelqu'un sait, qu'il me dise, ça m'intéresse.

Rapporter au modérateur

Re:Lien caché
« Répondre #3 sur: le 23-11-2013 a 11:00:31 »

gadsi
Membre récent

Hors-Ligne

Sexe: Male

Messages: 13

petites réflexions en passant ...

Je ne voies pas bien le sens de tes z-index ?
Ton flux html a l'air ok, pourquoi imposer des choses avec le z-index. ?
C'est parce que tu as voulu donner une dimension à ta div reflet en la passant en inline-block ? Mais tu mettais ta nav dans la div reflet, ca n'irait pas mieux ?

Ensuite, tu as des éléments table-cell, mais on ne voit pas le parent défini en table.

bon courage ...