,

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...

Avec le margin et le padding...

,

oui mais comment?

Dans le code en html ou avec une css?

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

Dans le CSS.

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

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 :

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.

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

<<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. :-)))

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

Alors, c'est OK?

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.

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...

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

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...

@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é)?

<<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...

*µ*

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.

,

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.

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...

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 .....

,

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.

Vu, alors bonjour les hacks !!

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

Dreamer a écrit :

Vu, alors bonjour les hacks !!

Pour les listes?

elle a écrit :

Dreamer a écrit :

Vu, alors bonjour les hacks !!

Pour les listes?

Poue ses listes !!

Comprends pas...

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...

,

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.