> Tous les forums > Forum des Webmasters
 pb avec espacement entre lignes et listesSujet résolu
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
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 !!

Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

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
Processeur AMD Ryzen 7 5800X à 234,58 € livré
234,58 € 300 € -22% @Amazon Allemagne
Ordinateur portable Lenovo 15.6 pouces (FHD IPS, Ryzen 7 5700U, 8 Go RAM, SSD 512 Go, Vega 8, Windows 11) à 499,99 €
499,99 € 699,99 € -29% @Cdiscount
Batterie externe OUKITEL P2001 Ultimate 2000Wh, 2000W, LifePOE4 à 1300 €
1300 € 2199 € -41% @Geekbuying
-20% sur une sélection d'articles reconditionnés Amazon
-20% @Amazon
Ecran PC 24 pouces Samsung Odyssey G3 (FHD, 144 Hz, 1 ms) à 124,99 € (via ODR) + 8,50 € reversés
124,99 € 199 € -37% @Rakuten
Four micro-ondes BLACK+DECKER BXMZ701E (700W, 20 L, grill) à 69,90 €
69,90 € 89,90 € -22% @Amazon
Chargeur rapide Samsung USB Type C 45W (avec câble) à 25 €
25,00 € 32 € -22% @Amazon
Smartphone Google Pixel 6A 5G (6.1' FHD+, 8 coeurs, 6 Go RAM, 128 Go) à 330,90 €
330,90 € 459 € -28% @Amazon
Processeur AMD Ryzen 7 5700X à 194,23 € livré
194,23 € 250 € -22% @Amazon Allemagne
Souris sans fil Inphic (2.4 GHz USB, 6 boutons, 1600 dpi) à 13,59 €
13,59 € 15,99 € -15% @Amazon

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