Page 1 sur 1

Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 15:23
par diodon
Bonjour à tous

j'ai crée une pagination mais rien a faire depuis hier pas moyen de la centrer elle est collé à gauche j'ai essayé a plusieurs reprises diverses choses mais rien n'y fait
j'ai besoin de votre aide Merci :)

voici le code Php
<?php
// Affichage du pager
echo '<ul id="pagination-clean">';
$precedent = $current_page - 1;
$suivant = $current_page + 1;
if ($current_page != 1)
    echo '<li><a href="'.$_SERVER['PHP_SELF'].'?page=' . $precedent . '">Précédent</a></li>';
for ($i = 1 ; $i <= $nb_pages ; $i++) {
if ($current_page == $i)
    echo '<li class="active"><a href="'.$_SERVER['PHP_SELF'].'?page=' . $i . '">' . $i . '</a></li>';
else
    echo '<li><a href="'.$_SERVER['PHP_SELF'].'?page=' . $i . '">' . $i . '</a></li>';
}
if ($current_page != $nb_pages)
    echo '<li><a href="'.$_SERVER['PHP_SELF'].'?page=' . $suivant . '">Suivant</a></li>';
echo '</ul>';
?></div>

et voici le code CSS
/* pager */

ul{ border:0; margin:4; padding:0; }
 
#pagination-clean li
{
    border:0; 
    margin:0; 
    padding:0;
    font-size:1.1em;
    list-style:none;
}
 
#pagination-clean li, #pagination-clean a
{
    border:solid 1px #DEDEDE
    margin-right:2px;
}
 
#pagination-clean .previous-off, #pagination-clean .next-off 
{
    color:#888888
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
}
 
#pagination-clean .next a, #pagination-clean .previous a 
{
    font-weight:bold;
    border:solid 1px #FFFFFF;
}
 
#pagination-clean .active
{
    color:#00000
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
}
 
#pagination-clean a:link, #pagination-clean a:visited 
{
    color:#0033CC
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
}
 
#pagination-clean a:hover
{
    text-decoration:none;
}

voici en image elle est a gauche et je voudrais qu'elle soit a la place de la croix

Image

Merci pour votre aide

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 15:35
par dix2
salut,

pour centrer, c'est :
margin: 0 auto;
@+
dix2

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 15:57
par diodon
salut

merci pour ta réponse mais sa fonctionne pas :(

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 18:30
par sirakawa
Problème de syntaxe:
<head>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
.important {
  color: red
}[/color]
</style>
</head>

<body>
plus de détails:
http://fr.openclassrooms.com/informatiq ... l5-et-css3

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 19:11
par diodon
salut merci pour ta réponse

mais je vois pas ou es mon erreur dans mon code

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 19:26
par yann18
donne une largeur(width) à ul:
 ul{ 
  border:0;
  width:50%; /* la largeur à adapter en fonction de ton cas */
  margin:0 auto;
}

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 19:32
par diodon
donne une largeur(width) à ul:
 ul{ 
  border:0;
  width:50%; /* la largeur à adapter en fonction de ton cas */
  margin:0 auto;
}

ok je test merci

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 20:06
par diodon
sa fonctionne quand j'ai 7 page mais des que sa change que j'augmente le nombre de pages sa se met sur 2 lignes !! :(

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 20:22
par diodon
j'ai essayé ceci dans le fichier php rien non plus
echo '<div style="text-align:center;">';        

echo '</div>';


Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 21:07
par yann18
sa fonctionne quand j'ai 7 page mais des que sa change que j'augmente le nombre de pages sa se met sur 2 lignes !! :(
c'est le comportement normal des blocs : la largeur d'un bloc(li) ne peux pas excéder celle de son parent(ul). Il faut juste ajuster la largeur du bloc ul en fonction du contenu:
ul{
  border:0;
  width:50%; /*!!! largeur à augmenter*/
  margin:0 auto;
}

Re: Comment centrer avec ul et li ?

Posté : 27 nov. 2013, 21:28
par diodon
oui c'est bien ce que j'ai essayer mais quand le nombre de page augmente sa fonctionne plus et la pour le moment elle s'affiche a la verticale