[Résolu]Alignement de liste

(reprise du message précédent)

edit : faux;

edti 2 : en faite.. ton <ul></ul> passe par dessus la l'image. la "taille" réel n'est pas celle visible. donc pour le moment c'est pas possible.

j'essaye de t'upload une image pour te montrer

edit 3 :

l'image :

en bleu on voit bien la taille du <ul>, donc si je met un margin/padding, cela commence complètement a gauche (en vert).. faut régler cela avant. et dans ce cas là on pourra jouer avec les
padding-left et text-indent (text indent négatif et padding left positif) pour "aligner" les débuts de texte des <lI>
Modifié par JENCAL (23 Oct 2015 - 17:34)

Finalement j'ai mis

.docSection ul {
	display:inline;
	list-style:disc inside;
}

C'est simple et facile à expliquer.
Merci de ton aide
Modifié par PapyJP (23 Oct 2015 - 17:37)

Oui, mais je vois pas trop à quoi sert ton display:inline là.

sur ce: bon weekend
Modifié par JENCAL (23 Oct 2015 - 17:41)

JENCAL a écrit :
Oui, mais je vois pas trop à quoi sert ton display:inline là.

sur ce: bon weekend

Dans la mesure où mes utilisateurs font du HTML et jettent un œil respectueux sur le CSS, il est bon de faire simple: dans une section de document, tout est "inline", la section est en overflow:auto, on met les images à gauche ou à droite par un float dans le bon sens, bref c'est homogène. Même si ça ne sert à rien du point de vue technique, c'est plus facile à comprendre. Déjà devoir expliquer qu'il faut mettre le titre en display:table (solution communiquée par Raphaël, l'archange du CSS) c'est pas simple...

heu et mon codepen il est passer a la trappe ?
codepen.io/anon/pen/RWQBPK
ou :

dd /* ou tes p, ou li simple */ {
  overflow: hidden;/* gestion des flottants externe*/
  padding-left: 1.2em;/* on dégage les textes */
  text-indent: -1em;/* ça c'est pour la puce à venir*/
  display: list-item; /* si notre balise n'est pas un li */
  list-style-type: circle; /* ou autre forme ou image */
  list-style-position: inside; /* ou l'ntegre dans son conteneur */
}

:)

gc-nomade a écrit :
heu et mon codepen il est passer a la trappe ?
:)

Non non : je me suis servi de ton code comme base pour faire quelques tests (toujours dans le but d'amméliorer mon framework Scriptura). Le résultat est plutôt intéressant et je n'ai pas eu besoin d'avoir recours à l'overflow: hidden (le seul truc qui ne me plaisait pas vraiment dans ce code). Par contre, bien sûr, si le li fait plusieurs lignes ça le fait moins...

gc-nomade a écrit :
heu et mon codepen il est passer a la trappe ?

Merci, Grand Gourou, je n'en attendais pas moins de toi!
Au premier "ras-bord", j'avais pas pigé de quoi il s'agissait.
Ça fait effectivement ce que je cherchais à faire.

Peux tu m'expliquer la raison pour laquelle ça fait ça tout seul quand on est en "situation normale" et pourquoi il faut dire tout ça pour que ça marche en mode inline?
Et surtout comment on peut intuiter que c'est ça qu'il faut faire?

Je me sens totalement perdu dans des situations pareilles, j'en suis réduit à fonctionner par essais et erreurs, et j'ai horreur de ça!
Modifié par PapyJP (24 Oct 2015 - 09:29)

Si j'osais....
voir http://paralletes.free.fr/tests/section-test3.html
http://paralletes.free.fr/tests/photo/Image3.jpg
Je ne vois pas comment améliorer l'alignement du texte sur celui de la première ligne

.docSection ul{
	margin:0;
	display:inline;
	list-style: disc inside;
}
.docSection li {
	overflow:hidden;
	padding-left: 1.25em;
	text-indent: -1.25em;
}

J'ai beau jouer sur padding left et text indent, je n'arrive pas à obtenir un alignement correct.
Modifié par PapyJP (24 Oct 2015 - 12:46)

bonjour,

pour le padding/text-indent il faut que tu compense l'espace occupé par la puce et le white-space qui est d'environ 0.25em.

à la louche çela fait:

padding-left:1.25em;
text-indent:-1em;

Pour plus de maitrise, tu peux aussi générer cette puce avec un pseudo élément que tu peut alors dimensionner, faire flotter et mettre en retrait sans te soucier des white-spaces.

dd {
  overflow: hidden;
  padding-left: 1.2em;
}
dd:before {
  content:'';/* voir ici pour intégrer la puce et laisser tomber le display */
  width:1em;
  margin-left:-1em;
  float:left;
  /* dessine moi une puce en boite */
  display: list-item;
  list-style-type: circle;
  list-style-position: inside;
}

http://codepen.io/anon/pen/rOdBzv


ensuite pour répondre à ton interrogation d'hier soir, la première évidence était une structure HTML inadaptée, apparemment peut-être plutôt une liste ul, hn + p ou une dl.

Le pseudo élément avait la aussi une utilité à mon avis (pour générer les puces comme tu l'aurait peut-être fait avec un counter-reset si tu devais numéroter tes paragraphes).

haslayout et pseudo élément à part, on est sur du CSS de base que même IE5 appliquerait me semble t-il

++

heu nop, pas gourou, rien à vendre

Bon W-E a ceux qui ne bossent pas
Modifié par gc-nomade (24 Oct 2015 - 13:30)

Merci de ta réponse
Je vais réfléchir à tout cela, ça me permettra peut être d'améliorer mon mode de travail.
Tu n'as rien à vendre, mais tu gagnes au moins l'estime de ceux que tu dépannes!