> Tous les forums > Forum des Webmasters
 pb avec espacement entre lignes et listesSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
laurent34
  Posté le 12/04/2011 @ 22:35 
Aller en bas de la page 
Astucien

,

de nouveau moi...

J'ai un soucis que je n'arrive pas à résoudre :

Quand je souhaite mettre une liste à puce (ou numérotée, c'est pareil), il y a un décalage entre la ligne "de début" (voir ci-dessus) et la liste...

Même chose quand j'écris un paragraphe à la suite...

C'est cet espace vertical que j'aimerai réduire mais je n'ai pas trouvé la ou les manips...

Si quelqu'un a des idées...

Publicité
elle
 Posté le 12/04/2011 à 22:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Avec le margin et le padding...

laurent34
 Posté le 12/04/2011 à 22:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

,

oui mais comment?

Dans le code en html ou avec une css?

J'ai fait des tests mais je dois mal m'y prendre...

elle
 Posté le 12/04/2011 à 22:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Dans le CSS.

midnightblue
 Posté le 12/04/2011 à 22:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

<ol>
Ligne de début<br>
<li>a</li>
<li>b</li>
<li>c</li>
<br>Suite...
</ol>
et fin !!! :-)))



Modifié par midnightblue le 12/04/2011 22:49
laurent34
 Posté le 12/04/2011 à 22:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

midnightblue,

effectivement, ça avance :

<ul>Ligne de début :
<li>gna</li>
<li>gnagna</li>
<li>gnagnagna</li>
Suite...
</ul>

mais au niveau affichage, cela me décale tout :

elle
 Posté le 12/04/2011 à 23:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

midnightblue a écrit :

<ol>
Ligne de début<br>
<li>a</li>
<li>b</li>
<li>c</li>
<br>Suite...
</ol>
et fin !!! :-)))

Tu ne dois pas insérer autre chose que des li dans une liste.

elle
 Posté le 12/04/2011 à 23:02 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Laurent, donne-nous ton code HTML et le CSS correspondant.

midnightblue
 Posté le 12/04/2011 à 23:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

<<Tu ne dois pas insérer autre chose que des li dans une liste.>>

et tu ne dois pas pêcher, ma soeur, ni par pensées, ni par actions. Que le W3C soit avec toi pour les siécles et les siécles. Amen. :-)))

laurent34
 Posté le 12/04/2011 à 23:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle a écrit :

Dans le CSS.

je viens de me rendre compte que ma question est... comment dire...

Sinon :

je créé une classe "interligne" (les valeurs sont purement indicatives)

.interligne {
padding: 1px;
margin: 1px;
}

**********

Je viens de faire les tests :

.interligne {
margin-top: -15px;
margin-bottom: -15px;
}

en jouant uniquement là-dessus, j'ai la réponse...

<p>Ligne de début :</p>
<ul class="interligne">
<li>gna --> classe interligne dans la balise &quot;ul&quot;</li>
<li>gnagna</li>
<li>gnagnagna</li>
</ul>
<p>et la suite n'a plus un interligne trop grand... YAAAAAAAAAAAAAAAA!!!!!!!!!!!!!!!!!!!!!!!!</p>

Le lien de la page :

http://lolo-test.pagesperso-orange.fr/test06-mise-en-page-paragraphe/essai01.html

elle
 Posté le 12/04/2011 à 23:19 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Alors, c'est OK?

laurent34
 Posté le 12/04/2011 à 23:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle a écrit :

Laurent, donne-nous ton code HTML et le CSS correspondant.

c'est fait (voir mon message précédent avec le lien de la page où j'ai fait les tests)

midnightblue a écrit :

<<Tu ne dois pas insérer autre chose que des li dans une liste.>>

et tu ne dois pas pêcher, ma soeur, ni par pensées, ni par actions. Que le W3C soit avec toi pour les siécles et les siécles. Amen. :-)))

Juste pour info (et ce n'est pas une agression de ma part), j'ai créé le site de mon bahut avec dreamweaver --> il est opérationnel mais avec beaucoup d'erreurs dans le codage html et css (erreurs de débutant car je me suis formé tout seul).

J'essaie maintenant de le créer avec toutes les validations correctes pour ma satisfaction personnelle avec l'aide de certains astuciens et astuciennes qui sont bien mieux calés que moi.

Ta proposition m'a fait avancer tout de même.

laurent34
 Posté le 12/04/2011 à 23:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle a écrit :

Alors, c'est OK?

En utilisant les propriété "margin-top" et "margin-bottom", ça marche.

Mais tu m'as conseillé d'utiliser la propriété "padding" --> j'ai fait quelques tests et ça me fausse tout (décalages divers et variés) donc j'avoue que je ne vois pas trop comment tu l'utiliserais à ma place...(si tu peux éclairer ma lanterne ou au choix)

--------------------------------

Ensuite, une question subsidiaire :

j'ai réglé les deux marges sur "-15px" en effectuant des essais --> ça colle mais j'y suis arrivé au pif.

Il me semble qu'on peut régler les marges avec "x em" mais je ne me rappelle plus la valeur de l'interligne par défaut...

midnightblue
 Posté le 12/04/2011 à 23:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

mais au niveau affichage, cela me décale tout :

<ol style="list-style-position:inside">
Ligne de début<br>
<li>a</li>
<li>b</li>
<li>c</li>
<br>Suite...
</ol>
et fin !!! :-)))

elle
 Posté le 12/04/2011 à 23:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

laurent34 a écrit :

En utilisant les propriété "margin-top" et "margin-bottom", ça marche.

Mais tu m'as conseillé d'utiliser la propriété "padding" --> j'ai fait quelques tests et ça me fausse tout (décalages divers et variés) donc j'avoue que je ne vois pas trop comment tu l'utiliserais à ma place...(si tu peux éclairer ma lanterne ou au choix)

Margin ou padding au choix, dans la ul ou les li, selon tes besoins...

laurent34
 Posté le 13/04/2011 à 00:00 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

@midnightblue :

mais en continuant à taper du texte, il y a toujours ce décalage après la liste (numérotée ou simple). (voir mon lien précédent - j'ai collé ton texte et ai actualisé la page)

De plus, je préfère (j'aurai du le préciser dès le départ) avoir la liste avec un retrait plus net par rapport à la 1ère ligne qui est décalée comme la liste d'ailleurs...

Et ton code ne passe pas à la validation w3c sur le html (voir ma remarque précédente sur mon objectif personnel).

----------------------------------------------------

@elle :

en continuant à effectuer des tests, j'en étais arrivé à la même conclusion.

----------------------------------------------------

Juste une dernière question :

avec le css --> ok c'est bon.

Mais peut-on y arriver uniquement avec du code html "correct" (validation w3c - désolé)?

midnightblue
 Posté le 13/04/2011 à 00:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

<<Mais peut-on y arriver uniquement avec du code html "correct" (validation w3c - désolé)?>>

Dans le cas que tu soumets et si tu veux être valide W3C, le CSS est nécessaire et le conseil de @elle@ est judicieux. en effet le HTML "correct" traite par défaut la liste comme un paragraphe avec en général un titre (+ <> modèle block). Mais si, outre les recommandations du W3C, on veut respecter le code typographique, un espace est requis entre un titre et un paragraphe ou une liste. D'où l'affichage HTML afférent. Mais bon...

*µ*



Modifié par midnightblue le 13/04/2011 00:45
elle
 Posté le 13/04/2011 à 00:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Juste pour préciser, concernant le padding : si tu veux obtenir un affichage identique sur tous les navigateurs, il vaut mieux le préciser afin de ne pas laisser les valeurs définies par défaut par le navigateur s'appliquer.

laurent34
 Posté le 15/04/2011 à 12:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

,

je viens de vérifier l'affichage avec quatre navigateurs (toujours avec l'exemple que j'avais réalisé) :

firefox -->

ie9 -->

google chrome -->

opéra -->

Je sais qu'il y a des différences de "rendu" selon les navigateurs et les effets css choisis mais cela me parait bizarre que les puces par défaut soient légèrement différentes...

Je continue des tests pour avec le margin et le padding sinon.

laurent34
 Posté le 17/04/2011 à 18:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle a écrit :

Juste pour préciser, concernant le padding : si tu veux obtenir un affichage identique sur tous les navigateurs, il vaut mieux le préciser afin de ne pas laisser les valeurs définies par défaut par le navigateur s'appliquer.

,

j'ai continué mes tests :

http://lolo-test.pagesperso-orange.fr/test06-mise-en-page-paragraphe/essai02.html

mais j'avoue que si tu pouvais m'apporter quelques précisions (j'ai testé l'affichage avec firefox, ie9, google chrome et opera et aucunes différences que ce soit en utilisant le padding ou le marging et avec différentes tailles d'écran)...

PS : j'ai retrouvé la valeur de l'interligne par défaut... atroce la mémoire...

Dreamer
 Posté le 17/04/2011 à 18:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Je vais te poser une question idiote ......Et si tu n'utilisais pas de liste, mais plutôt une balise sympa qui s'appelle :

text-indent et qui te permet de faire un retrait de texte sur un paragraphe et comme toi tu n'utilises qu'une ligne ...

Et je crois que c'est pareil sur tous les navigateurs .....

laurent34
 Posté le 17/04/2011 à 19:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

,

ce n'est pas une question idiote.

(je vais en poser plein moi)

Mais sur le site dont je m'occupe, il y a pas mal de listes de ce genre :

J'y avais pensé à la balise "text-indent" mais quand il y a une liste de plus de six ou sept lignes, cela me paraissait "fouilli" sans l'affichage des puces...

Et l'autre "inconvénient" est que je mets en ligne des documents "officiels" qui ont une certaine présentation et donc on m'a demandé de reprendre cette présentation.

Dreamer
 Posté le 17/04/2011 à 19:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Vu, alors bonjour les hacks !! {#}

laurent34
 Posté le 17/04/2011 à 19:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Dans quel sens?

Je ne te suis pas là.

EDIT : j'ai trouvé...

http://www.zonecss.fr/courscss/cours_feuille_css_31.html

http://www.alsacreations.com/astuce/lire/39-hacks-css-definition-usage.html



Modifié par laurent34 le 17/04/2011 20:50
elle
 Posté le 17/04/2011 à 22:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Dreamer a écrit :

Vu, alors bonjour les hacks !! {#}

Pour les listes?

Dreamer
 Posté le 17/04/2011 à 22:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :
Dreamer a écrit :

Vu, alors bonjour les hacks !! {#}

Pour les listes?

Poue ses listes !!

elle
 Posté le 17/04/2011 à 22:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Comprends pas...

laurent34
 Posté le 17/04/2011 à 23:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Dreamer a écrit :
elle a écrit :
Dreamer a écrit :

Vu, alors bonjour les hacks !! {#}

Pour les listes?

Pour ses listes !!

En fouillant, je n'ai rien trouvé sur le net...

Par rapport à la dernière page dont j'ai donné le lien, je comptais me "limiter" à ce code css :

.liste03 {
	margin-top: -1em;
	margin-bottom: -1em;
	margin-left: 50px;
}

J'ai testé l'affichage sur différents navigateur en changeant la taille d'affichage par défaut à chaque fois et n'ai vu aucun problème.

Si tu pouvais éclairer mes maigres connaissances en la matière...

laurent34
 Posté le 18/04/2011 à 22:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

,

j'ai peut être compris :

je mélange des positions avec des pixels et des pourcentages (ou des "em") d'où (sûrement) des risques de différences d'affichages selon le navigateur.

J'ai testé ce code :

.liste05 {
	margin-top: -1em;
	margin-bottom: -1em;
	margin-left: 5em;/*peut être inutile, je peux conserver le décalage par défaut d'une liste à puces*/
}

qui semble convenir.

Merci à celles et ceux qui m'ont fait avancer.



Modifié par laurent34 le 18/04/2011 22:43
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Ecran PC 27 pouces KTC H27V13 (VA, Full HD, 100 Hz) à 99,99 €
99,99 € 149 € -33%
@Geekbuying
SSD WD Blue SN580 1 To (PCIe 4, NMVe M.2, 4150 Mo/s) à 54,99 €
54,99 € 76,99 € -29%
@Cdiscount
Boitier PC Moyen-Tour NZXT H6 Flow avec fenêtre latérale en verre trempé à 103,49 €
103,49 € 119,99 € -14%
@Amazon
Kit de 32 Go (2x16 Go) de mémoire DDR4 Corsair Vengeance RGB Pro 3200 MHz à 75,99 €
75,99 € 100 € -24%
@Amazon
Ecran PC incurvé 27 pouces Koorui 27E6C (FHD, 165 Hz) à 159,99 €
159,99 € 199,99 € -20%
@Amazon
Carte Graphique MSI GeForce RTX 4060 Ventus 2X Black 8G OC à 294,21 €
294,21 € 330 € -11%
@Amazon Allemagne

Sujets relatifs
Listes - Espace entre la puce (image) et le texte
Menu de largeur fixe avec espacement régulier
Probléme d'espacement avec mon théme Wordpress
espace entre les lignes
Definir interval entre 2 lignes textes Dreamweaver
Hébergement de site avec nom de domaine
Migration PHP 5.3 vers 5.5 ou 5.6 (avec WAMP)
background css disparait avec le responsive design
Différence entre enregistrer...acheter un « nom de domaine
Barre intempestive avec FF et pas avec IE
Plus de sujets relatifs à pb avec espacement entre lignes et listes
 > Tous les forums > Forum Forum des Webmasters