KioskeaKioskeaCommentCaMarcheInscrivez-vous, c'est gratuit !
Mardi 13 mai 2008 - 15:46:57

CSS: Alignement d'une liste <ul>

Rechercher : dans
CSS: Alignement d'une liste <ul>
par Pyrolizz
 Fil de Discussions
Statut : Non résolu
jeudi 27 décembre 2007 à 10:47:00
Bonjour,
J'ai beau chercher, je ne trouve pas de solution à ce stupide probleme.
Je dois aligner une liste <ul> à gauche (sans marge, vraiment collée à gauche, alignée comme un texte normal),
MAIS en gardant la particularité du <ul>, qui fait que la deuxieme ligne de la liste vient s'aligner sous la premiere, et non sous la puce.
Suis-je claire? :s

Merci d'avance

<p>Voici du texte normalement aligné (collé) à gauche. Et voici ci-dessous la liste qui se décale.</p>
<ul>
<li>Ligne 1, et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce. Mais surtout qu'elle soit collée à gauche comme le texte normal</li>
<li>Ligne 2. et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce.</li>
<li>Ligne 3. et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce.</li>
<li>Ligne 4 . et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce.</li>
</ul>
<p>Et revoilà le texte normalement aligné.</p>
Configuration: Windows XP
Firefox 2.0.0.11
Répondre à Pyrolizz  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par gluo, le jeudi 27 décembre 2007 à 11:13:12 Fil de Discussions
Si j'ai bien compris, tu veut tes listes alignées avec le texte normal, rajoute style="margin-left: -25px;" dans ton ul.
Ce qui donne :

<p>Voici du texte normalement aligné (collé) à gauche. Et voici ci-dessous la liste qui se décale.</p>
<ul style="margin-left: -25px;">
<li>Ligne 1, et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce. Mais surtout qu'elle soit collée à gauche comme le texte normal</li>
<li>Ligne 2. et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce.</li>
<li>Ligne 3. et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce.</li>
<li>Ligne 4 . et j'aimerais qu'elle vienne s'aligner sous la premiere ligne, et non sous la puce.</li>
</ul>
<p>Et revoilà le texte normalement aligné.</p>
Répondre à gluo

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par pashmina, le jeudi 27 décembre 2007 à 11:16:54 Fil de Discussions
joue avec padding et margin
Qui vole un boeuf est vachement costaud
Répondre à pashmina

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par madmaskx, le jeudi 27 décembre 2007 à 11:24:38 Fil de Discussions
Salut,
Si je t'ai bien compris tu veux une liste en "escalier". Nul besoin de css pour ça, tu peux integrer une liste dans une liste en HTML, ce qui devrait te donner un effet escalier.
Si au contraire tu veux un bloc texte dans ta liste il te suffit d'inserer une balise <p> entre tes balises <li>.
J'espère t'avoir bien compris, sinon n'hésite pas à reformuler car je dois avouer que je ne trouve pas la question hyper claire.
Répondre à madmaskx

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par Pyrolizz, le jeudi 27 décembre 2007 à 11:39:16 Fil de Discussions
Merci pour vos réponses rapides.
J'avais déjà tenté avec des text-indent et des margin-left, et meme des padding, mais disons que je me suis heurtée à certains caprices de l'éditeur que j'utilise, qui est une appli web, montée par la boite qui heberge le site.
Bref, j'ai finalement réussi à faire ce que j'avais demandé, comme ceci:

[code]
<ul style="margin-left: -5px; padding-left: 20px;">
<li>Écoutez le discours d’ouverture</li>
<li>pour accéder au programme des conférences <br>
pour accéder au programme des démonstrations</li>
<li>Posez vos questions, échangez vos expériences et discutez de nouvelles idées</li>
<li>services et d’applications à valeur ajoutée</li>
</ul>
[/code]

Donc ca marche et surtout ca se tient avec le reste de ma page, que vous ne voyez pas ici bien sur.

MERCI BEAUCOUP, parce que à la base c'est pas mon job, je remplace qqn pour la semaine sur le code, et c'est pas toujours évident :)
Répondre à Pyrolizz

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Par Dalida, le jeudi 27 décembre 2007 à 12:58:32 Fil de Discussions 
salut,

plutôt bizarre comme solution.
le décalage gauche tu peux le supprimer par {margin-left:0;} et la position de la puce se définit avec 'list-style-position'.

[ Mathieu ] « La vie, la santé, l'amour sont précaires,
pourquoi le travail échapperait-il à cette loi ? » LP, 30 août 2005.
Répondre à Dalida
Discussions pertinentes trouvées dans le forum
05/02 10h20[CSS] alignement label/inputWebmastering05/02 17h0023
07/09 14h14[CSS] Aligner image en bas a droiteWebmastering12/04 22h1112
07/05 16h41[CSS] Aligner un contenant au centreWebmastering17/05 04h571
15/12 18h31[CSS/HTML] Liste non indentéeWebmastering16/12 21h483
Plus de discussions sur « CSS: Alignement d'une liste <ul> » Discussion en cours Discussion fermée Problème résolu
Répondre
Titre du message :
Votre pseudo:
Votre email :
Message: 
  •  
  •  
Options: Recevoir les réponses par mail.
 

Aide