Pagination par onglets Aide

J'ai construit une liste de pagination simple et l'ai stylée en utilisant CSS. Cependant, j'ai rencontré un problème. Parce que je veux que les éléments de la liste soient centrés sur la page, j'ai utilisé un conteneur div avec le positionnement relative.Pagination par onglets Aide

est ici une illustration qui montre ce que j'ai en ce moment, et ce que je voudrais obtenir:

enter image description here

Notez que le manque apparent d'une frontière sur le numéro de page.

Voici le balisage HTML pour la liste:

<div class="pagination-cont"> 
    <ul class="pagination"> 
     <li class="disabled"><span>&lt; Previous</span></li> 
     <li class="current"><span>1</span></li> 
     <li><a href="#" title="Page 2">2</a></li> 
     <li><a href="#" title="Page 3">3</a></li> 
     <li class="separator">&hellip;</li> 
     <li><a href="#" title="Page 9">9</a></li> 
     <li><a href="#" title="Page 10">10</a></li> 
     <li><a href="#" title="Page 11">11</a></li> 
     <li><a href="#" title="Next Page">Next &gt;</a></li> 
    </ul> 
</div>

et voici le CSS:

div#content div.pagination-cont { 
    float: left; 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
    margin: 15px 0; 
    border-top: 1px solid #d1d1d3; 
    padding-bottom: 2px; 
    background-color: #e4e4e6; 
} 
    div#content div.pagination-cont ul.pagination { 
     clear: left; 
     float: left; 
     list-style: none; 
     padding: 0; 
     margin: 0; 
     position: relative; 
     left: 50%; 
     text-align: center; 
    } 
     div#content ul.pagination li { 
      display: block; 
      float: left; 
      list-style: none; 
      margin: 0; 
      padding: 0; 
      position: relative; 
      right: 50%; 
      font-size: 110%; 
      text-transform: uppercase; 
      font-weight: bold; 
     } 
      div#content ul.pagination li.disabled span, 
      div#content ul.pagination li.separator { 
       color: #bbb; 
       text-shadow: 1px 1px 0 #f2f2f2; 
       padding: 10px 20px; 
       display: block; 
      } 
      div#content ul.pagination li.separator { 
       border-left: 1px solid #d1d1d3 
      } 
      div#content ul.pagination li a { 
       display: block; 
       padding: 10px 20px; 
       color: #004276; 
       text-decoration: none; 
       border-left: 1px solid #d1d1d3; 
       margin-bottom: 1px 
      } 
       div#content ul.pagination li.current span { 
        display: block; 
        padding: 10px 20px; 
        border-left: 1px solid #d1d1d3; 
        background-color: #fff; 
        color: #999; 
        border-bottom: 1px solid #d1d1d3 
       }

Toute aide serait accueillie avec reconnaissance!

Source

2011-05-09 BenM

pardon, quelle est la différence entre les deux images ??, les deux sont même – diEcho

@diEcho - voir la phrase sous l'image: 'Notez l'absence apparente d'une bordure sur le numéro de la page en cours.' (c'est-à-dire sur l'image "Ce que je voudrais réaliser") – BenM

A obtenu maintenant.Veuillez voir la réponse :) – diEcho

Vous avez presque, retirer juste "overflow: hidden" de "div.pagination-suite" (qui maintient l'élément sélectionné de se déplacer vers le haut) et ajouter « top: - 1px; position: relative; » à: " ul.pagination durée de li.current", qui devrait faire l'affaire

Vous pouvez le voir comme http://jsfiddle.net/LGwDV/

Source

2011-05-09 08:16:57 leopic

Excellent, merci beaucoup pour votre aide! +1 :) – BenM

hey ne mentionne pas il – leopic

retirer le

border-top: 1px solid #D1D1D3;

div # content div.pagination-suite

et écrire ici

div#content ul.pagination li { 
      border-top: 1px solid #d1d1d3; 
     }

et aussi écrire une ligne dans

div#content ul.pagination li.current { 
        border-top: medium none;     
       }

DEMO

Source

2011-05-09 08:10:17 diEcho

Pagination par onglets Aide

Répondre

Questions connexes