[Résolu]Alignement de liste

???
Merci Olivier, mais je ne comprends pas
Normalement cette marge à droite devrait "repousser" tout ce qu'il y a à sa droite?
Qu'est-ce qui flanche?
Edit: ça na marche pas mieux: on a un espace supplémentaire, certes, mais le point n'est toujours pas aligné avec le texte qui précède.
Modifié par PapyJP (22 Oct 2015 - 19:09)

Bonjour à tous

Ce que je veux obtenir, au cas où cela ne serait pas clair, c'est ceci, obtenu par traitement d'image: http://paralletes.free.fr/tests/photo/section2.png

Qui plus est, je tiens à ce que ce ne soit pas généré par l'adjonction de flopées de balises html, mais que ça puisse être utilisé de façon simple par des personnes qui n'ont pas à se préoccuper de présentation. Sur le papier, le HTML est supposé exprimer ce que l'on veut dire, et le CSS décrire la façon de l'afficher.
Par ailleurs le HTML lui même doit être généré par des snippets simples d'emploi par des personnes qui n'ont pas de compétence technique élevée.
C'est en particulier pourquoi il n'est pas question de supprimer le "overflow:auto;", qui est indispensable pour faire de chaque <section> un bloc en soi.

Je veux bien admettre que je ne suis pas très compétent dans ce domaine, mais pourquoi faut il être un expert pour faire une chose aussi simple qui tombe sous le sens?
Je constate une fois de plus que la spécification du CSS n'est pas faite pour être utile aux millions de personnes qui gèrent des sites, mais à tout le plus pour les quelque dizaines de personnes qui développent des moteurs CSS dans les navigateurs. Je ne relancerai pas la polémique sur le sujet, de toute façon le CSS est comme il est, il faut s'en accommoder, on n'a pas le choix, et à mon âge je n'ai même pas l'espoir que ça s'améliorera de mon vivant!

J'en arrive à http://paralletes.free.fr/tests/section-test2.html qui contient l'horreur suivante:

<p>Etiam vestibulum at lectus:<br/>
	&#8226&nbsp;libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis.<br/>
	&#8226&nbsp;Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero.</p>

ce qui est la négation même des principes que je voulais promouvoir, et ne donne pas entièrement satisfaction (pas d'indentation des items).

Je suis toujours à la recherche d'une solution respectant les principes exprimés ci-dessus.

Note: à propos des "parasites" dans le CSS, ils n'étaient là que pour tester quel aurait pu être l'impact de spécifier un padding ou un margin . Le résultat est "cela n'a aucun impact".
Modifié par PapyJP (23 Oct 2015 - 10:51)

Bonjour,

Quelque soit votre opinion très personnelle sur la séparation stricte entre HTML et CSS, prenez en considération que la solution à adopter en CSS sera entièrement dépendante de la structure HTML.

Prenez par exemple la propriété float, qui aura un comportement différent selon l'élément que vous choisissez de "floater" par rapport à l'ordre des éléments dans le DOM.

Le choix d'utiliser une propriété de tableaux CSS (comme inline-table) n'est d'ailleurs pas anodin, car il nécessite de bien considérer la structure virtuellement nécessaire à son usage. Les objets anonymes, dans la spec css 2.1, permettent souvent de passer outre cette nécessité, mais génèrent régulièrement des incompréhensions quant à l'utilisation des propriétés CSS de tableaux.

Pour la situation que vous présentez, vous avez de nombreuses solutions que nous avons déjà abordé dans un de vos sujets précédents :

- float:left sur la <figure>, ainsi qu'une marge égale à la largeur de votre image + espace que vous souhaitiez ajouter, cela sur votre <div> contenant le texte.
- float:left sur la <figure>, ainsi qu'ajouter un contexte de formatage sur la <div> contenant le texte, overflow:hidden peut fonctionner. Solution à prendre avec des pincettes, car overflow:hidden aura pour effet premier de cacher les éléments débordant de leur contenant.
- Du float sur la <figure> ET la <div>, mais bon....
- display:table-cell sur <figure> et votre <div> en profitant des objets anonymes cités précédemment. Ajoutons à cela un padding pour espacer les deux éléments.
- inline-block sur <figure> et votre <div>, contraignant car un passage à la ligne dans le code génère des espaces entre deux éléments inline.
- en vrac : display flex, columns, etc etc
Modifié par Nigel (23 Oct 2015 - 14:09)

Merci de cette réponse, mais ça ne donne pas de solution pratique à mon problème.

Comme toute technique ésotérique (et j'en ai connu pas mal en 45 ans d'activité professionnelle dans différents domaines du traitement de l'information!) ça explique pourquoi c'est difficile, que bien entendu il y a une solution mais qu'il faut être un expert pour la trouver et l'appliquer.

Je cherche une solution simple à un problème simple pour la mettre entre les mains de personnes qui ne sont pas du tout des techniciens, et qui devront l'appliquer des dizaines de fois pour chaque document.
Comme je ne suis pas un expert de ce domaine, je me dis qu'il y a peut être une solution simple que je n'ai pas vue et je demande de l'aide à des personnes plus compétentes.
Si je n'ai pas de réponse convenant à mes besoins, j'applique le principe Shadok: "s'il n'y a pas de solution, c'est qu'il n'y a pas de problème". En d'autres termes je change les termes du problème pour trouver une solution simple qu'on peut mettre entre toutes les mains, quitte à ne pas satisfaire tout-à-fait ce que je désire faire.

N'ayant pas trouvé pour le moment de contournement satisfaisant, j'en reste à mes "pseudo items de liste" en attendant mieux.

à lire: http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html

rien compris, j'édite ma réponse fausse du coup
Modifié par JENCAL (23 Oct 2015 - 16:41)

Donc papy jp,

y'a très simple !!!!!!

il faut ajouter list-style-position: inside; dans ta balise UL
Modifié par JENCAL (23 Oct 2015 - 16:44)