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
Bonjour,

Je voudrais supprimer le saut de ligne généré automatiquement par la balise <ul>.

Voici un extrait de mon code

<li > Pour le farniente :
<ul> ----- je voudrais enlever ce saut de ligne !!!!
<li><b>La mer </b>et ses grandes plages normandes :
A 350 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>
<li> Pour les sportifs :


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
bonjour super-sbg

ul {
margin-top:0;

}

--
0
Ca ne marche pas !!!
le margin:0 ou margin-top:0 sur la puce ul n'a AUCUN EFFET ...
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
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.
0
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
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
0
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
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 ....
0
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
<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;
}
0
je vais essayer la solution DIV car j'ai cru comprendre que les tableaux n'étaient pas faits pour la présentation ...
Merci !!
0
Super ça marche , mille MERCI !!!!!!!!!!!!
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
Salut,
ul {
	margin:0;
	padding:0:
}
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
Ca ne marche toujours pas !!!!!!!!!!!
0
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
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
0
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;
}
0

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
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 !!!!!!!!!!!!!
0
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
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 :

            .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/
0
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
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+
0
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 ...
0
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
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/
0