PHPfrance

la communauté d'entraide francophone dédiée au PHP

Comment centrer avec ul et li ?

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Comment centrer avec ul et li ?

Re: Comment centrer avec ul et li ?

par diodon » 27 nov. 2013, 21:28

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

Re: Comment centrer avec ul et li ?

par yann18 » 27 nov. 2013, 21:07

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 ?

par diodon » 27 nov. 2013, 20:22

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 ?

par diodon » 27 nov. 2013, 20:06

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 ?

par diodon » 27 nov. 2013, 19:32

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 ?

par yann18 » 27 nov. 2013, 19:26

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 ?

par diodon » 27 nov. 2013, 19:11

salut merci pour ta réponse

mais je vois pas ou es mon erreur dans mon code

Re: Comment centrer avec ul et li ?

par sirakawa » 27 nov. 2013, 18:30

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 ?

par diodon » 27 nov. 2013, 15:57

salut

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

Re: Comment centrer avec ul et li ?

par dix2 » 27 nov. 2013, 15:35

salut,

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

Comment centrer avec ul et li ?

par diodon » 27 nov. 2013, 15:23

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