IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

z-index sur élément suivant dans une liste


Sujet :

Positionnement en CSS avec z-index

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre chevronné
    Inscrit en
    Septembre 2006
    Messages
    685
    Détails du profil
    Informations forums :
    Inscription : Septembre 2006
    Messages : 685
    Par défaut z-index sur élément suivant dans une liste
    Bonsoir,

    Je rencontre un léger problème pour mettre en premier plan un élément a dans une liste par rapport à l'élément a qui le suit.

    Mon but est de faire un petit effet en agrandissant légèrement l'élément survolé dans une liste de numérotation de page.

    J'ai mit une image pour bien comprendre le problème.

    Le code en question :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <ul class="pagination">
       <li><a href="page.php?page=1#com" class="">1</a></li>
       <li><a href="page.php?page=2#com" class="">2</a></li>
       <li><a href="page.php?page=3#com" class="">3</a></li>
       <li><span>4</span></li>
       <li><a href="page.php?page=5#com" class="">5</a></li>
    </ul>

    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
    51
    52
    53
    ul.pagination{
       background: none;
       border: none;
       list-style-type: none;
       font-size: 13px;
       height: 22px;
       z-index: 1;
    }
     
    ul.pagination li{
       position: relative;
       float: left;
       text-align: center;
       z-index: 1;
       width: 16px;
       height: 22px;
    }
     
    ul.pagination li span{
       font-weight: 700;
       display: block;
       width: 16px;
       height: 20px;
       line-height: 20px;
       border: 1px solid #d0d0d0;
       background: #f0f0f0;
       z-index: 1;
    }
     
    ul.pagination li a{
       display: block;
       width: 16px;
       height: 20px;
       line-height: 20px;
       border: 1px solid #d0d0d0;
       border-right: 1px solid transparent;
       background: #f0f0f0;
       z-index: 1;
    }
     
     ul.pagination li a:hover{
       position: absolute;
       top: -1px;
       left: -2px;
       width: 20px;
       height: 22px;
       line-height: 22px;
       z-index: 2 !important;
     }
     
     ul.pagination .last{
       border-right: 1px solid #d0d0d0;
    }

    Le z-index du a:hover ne prime pas sur le z-index du a ou span suivant.

    Auriez-vous une idée, de comment forcer ceci ?

    Merci d'avance.
    Images attachées Images attachées  

Discussions similaires

  1. Réponses: 10
    Dernier message: 20/09/2019, 22h36
  2. [Débutant] copier l'élément sélectionner dans une liste
    Par Henry9 dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 29/04/2007, 21h49
  3. Ouvrir fichier sur lien hypertexte dans une liste
    Par JimmyB dans le forum Access
    Réponses: 10
    Dernier message: 18/10/2006, 15h28
  4. Recherche sur 2 elements dans une liste box.
    Par molarisapa dans le forum Access
    Réponses: 2
    Dernier message: 29/05/2006, 18h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo