Comment enlever le saut de ligne après une puce <ul>
Fermé
super-sbg
Messages postés
13
Date d'inscription
lundi 8 novembre 2010
Statut
Membre
Dernière intervention
28 mars 2013
-
11 mars 2013 à 14:04
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 15 mars 2013 à 11:28
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 15 mars 2013 à 11:28
A voir également:
- Ul en ligne
- Site de vente en ligne particulier - Guide
- Partager photos en ligne - Guide
- Aller à la ligne excel - Guide
- Test performance pc en ligne - Guide
- Apparaitre hors ligne instagram - Guide
7 réponses
epitale
Messages postés
3943
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
915
11 mars 2013 à 15:14
11 mars 2013 à 15:14
bonjour super-sbg
ul {
margin-top:0;
}
--
ul {
margin-top:0;
}
--
super-sbg
Messages postés
13
Date d'inscription
lundi 8 novembre 2010
Statut
Membre
Dernière intervention
28 mars 2013
11 mars 2013 à 15:21
11 mars 2013 à 15:21
Ca ne marche pas !!!
j'ai beau rajouter des margin-top:0 dans toutes mes class CSS ul et li, ça ne fonctionne pas mieux, j'ai tjs mon retour à la ligne.
j'ai beau rajouter des margin-top:0 dans toutes mes class CSS ul et li, ça ne fonctionne pas mieux, j'ai tjs mon retour à la ligne.
epitale
Messages postés
3943
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
915
Modifié par epitale le 11/03/2013 à 16:16
Modifié par epitale le 11/03/2013 à 16:16
tu veux que ca donne :
Pour le farniente : - La mer,...
............................. - Le centre de Thalassothérapie de Cabourg,
?
dans ce cas tu peux utiliiser un <table>, ou
des div flottante
Pour le farniente : - La mer,...
............................. - Le centre de Thalassothérapie de Cabourg,
?
dans ce cas tu peux utiliiser un <table>, ou
des div flottante
super-sbg
Messages postés
13
Date d'inscription
lundi 8 novembre 2010
Statut
Membre
Dernière intervention
28 mars 2013
Modifié par super-sbg le 11/03/2013 à 16:31
Modifié par super-sbg le 11/03/2013 à 16:31
Je veux que ça donne :
Farniente : - la mer baratin sur
plusieurs lignes
- la thalasso
Sports : - la voile
- la plongée
Mais entre les puces, les blocks, les marges ... je m'y perds !!!! je n'y ARRIVE PAS ....
Farniente : - la mer baratin sur
plusieurs lignes
- la thalasso
Sports : - la voile
- la plongée
Mais entre les puces, les blocks, les marges ... je m'y perds !!!! je n'y ARRIVE PAS ....
epitale
Messages postés
3943
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
915
11 mars 2013 à 17:02
11 mars 2013 à 17:02
<table>
<tr><td>la mer</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
<tr><td>sport</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
</table>
avec des divs
<div id="alentour">
<div>la mer </div><div><ul>.......</ul></div>
<div>sport</div><div><ul>.......</ul></div>
</div>
#alentour {
width:400px;
}
#alentour div{
float:left;
width:200px;
}
ul{
margin:0;
padding:0;
}
<tr><td>la mer</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
<tr><td>sport</td><td><ul><li>....</li><li>....</li>.....</ul></td></tr>
</table>
avec des divs
<div id="alentour">
<div>la mer </div><div><ul>.......</ul></div>
<div>sport</div><div><ul>.......</ul></div>
</div>
#alentour {
width:400px;
}
#alentour div{
float:left;
width:200px;
}
ul{
margin:0;
padding:0;
}
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
11 mars 2013 à 15:45
11 mars 2013 à 15:45
Salut,
ul { margin:0; padding:0: }
super-sbg
Messages postés
13
Date d'inscription
lundi 8 novembre 2010
Statut
Membre
Dernière intervention
28 mars 2013
11 mars 2013 à 15:57
11 mars 2013 à 15:57
Ca ne marche toujours pas !!!!!!!!!!!
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
12 mars 2013 à 08:38
12 mars 2013 à 08:38
Si ca fonctionne, avant de poster mon message, j'ai vérifier sur mon ordinateur, et je n'ai pas de saut de ligne, ton erreur vient d'autre part...
Montre ton css
Montre ton css
voici mon code :
<ul class="listepuce" >
<li><u> Les Activités </u>
<ul id="listepuce2">
<li > Pour le farniente :
<ul id="puce">
<li><b>La mer </b>et ses grandes plages normandes :
A 300 m de l'appartement, grande plage du Home de Varaville et pour ceux qui préfèrent les plages plus fréquentées, la plage de Cabourg et sa célèbre promenade sont à 2 kms </li>
<li>Le centre de Thalassothérapie de Cabourg (1km) </li>
</ul>
</li>
et mon CSS :
.listepuce li {
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
list-style-type: none;
margin-top:0px;
margin-left:25px;
padding-top:0px;
padding-left: 4em;
}
#listepuce2 li{
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
}
#puce {
margin:0 px;
padding:0 px;
}
<ul class="listepuce" >
<li><u> Les Activités </u>
<ul id="listepuce2">
<li > Pour le farniente :
<ul id="puce">
<li><b>La mer </b>et ses grandes plages normandes :
A 300 m de l'appartement, grande plage du Home de Varaville et pour ceux qui préfèrent les plages plus fréquentées, la plage de Cabourg et sa célèbre promenade sont à 2 kms </li>
<li>Le centre de Thalassothérapie de Cabourg (1km) </li>
</ul>
</li>
et mon CSS :
.listepuce li {
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
list-style-type: none;
margin-top:0px;
margin-left:25px;
padding-top:0px;
padding-left: 4em;
}
#listepuce2 li{
font-family: Monotype Corsiva, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
}
#puce {
margin:0 px;
padding:0 px;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
super-sbg
Messages postés
13
Date d'inscription
lundi 8 novembre 2010
Statut
Membre
Dernière intervention
28 mars 2013
Modifié par super-sbg le 11/03/2013 à 16:32
Modifié par super-sbg le 11/03/2013 à 16:32
J'ai trouvé!!!!! partiellement
c'est le style="display:inline" qui marche, mais il faut pas le mettre dans le CSS, mais dans le body sur la balise UL ET sur la balise LI :
<ul style="display:inline">
<li style="display:inline">La mer ...
mais ça n'aligne pas le block qui doit tenir sur plusieurs lignes : à chaque retour de ligne il m'aligne à gauche et pas sous ma puce ...
grrrrrrr !!!!!!!!!!!!!
c'est le style="display:inline" qui marche, mais il faut pas le mettre dans le CSS, mais dans le body sur la balise UL ET sur la balise LI :
<ul style="display:inline">
<li style="display:inline">La mer ...
mais ça n'aligne pas le block qui doit tenir sur plusieurs lignes : à chaque retour de ligne il m'aligne à gauche et pas sous ma puce ...
grrrrrrr !!!!!!!!!!!!!
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
Modifié par ThEBiShOp le 12/03/2013 à 08:54
Modifié par ThEBiShOp le 12/03/2013 à 08:54
Olala ne met surtout pas ça dans ton body, tu vas avoir des problèmes par la suite si tu fais ça...
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
http://jsfiddle.net/PqnbC/
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
.listligne { display: inline; } .listligne>li { display: inline; }
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
http://jsfiddle.net/PqnbC/
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
14 mars 2013 à 12:58
14 mars 2013 à 12:58
Bonjour
Utilisez autre chose que des ul et li.....
Exemple:
<section>
<p>.............</p>
<p>.............</p>
</section>
et le style pour p dans section:
section p { .....style qui va bien..... }
Exemple:
section p { padding-left: 12px; }
A+
Utilisez autre chose que des ul et li.....
Exemple:
<section>
<p>.............</p>
<p>.............</p>
</section>
et le style pour p dans section:
section p { .....style qui va bien..... }
Exemple:
section p { padding-left: 12px; }
A+
oui, mais à l'intérieur de ma balise <p>, si je mets une autre balise p, j'ai un saut de ligne, si je mets une puce, j'ai aussi un saut de ligne et je TOUT sur la meme ligne mais avec un alignement du paragraphe, comme ça :
texte1 : texte 2 qui se poursuit sur 2 lignes alignées sous texte2
texte 3 : etc ...
texte1 : texte 2 qui se poursuit sur 2 lignes alignées sous texte2
texte 3 : etc ...
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
15 mars 2013 à 11:28
15 mars 2013 à 11:28
Je vais copier/coller ce que j'ai mis un peu plus haut...
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
.listligne {
display: inline;
}
.listligne>li {
display: inline;
}
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
démonstration : http://jsfiddle.net/PqnbC/
dans le ul et li ça suffit, d'ailleurs, tu peux le faire comme ça pour ne pas avoir à le mettre partout :
tu attribues une class à ton ul (listligne par exemple) ensuite dans le css de ta page, tu fais ceci :
.listligne {
display: inline;
}
.listligne>li {
display: inline;
}
et le tour est joué, pas besoin d'en mettre partout, juste dans le UL.
démonstration : http://jsfiddle.net/PqnbC/
15 mars 2013 à 11:19
le margin:0 ou margin-top:0 sur la puce ul n'a AUCUN EFFET ...