[Résolu] Du padding-left sur un inline de plusieurs lignes

Bonjour,

Pas mal d'années que je connais alsa, c'est la première fois que je deviens membre de la communauté.

J'ai mis ce titre en sachant que ce n'est pas possible. Je vais droit au but.
Voici un exemple qui présente mon problème : http://dabblet.com/gist/1578779

Je souhaiterais que le div rouge ait un padding-left de 20px par exemple, mais que ce soit actif sur toutes les lignes des paragraphes. Un margin ne fonctionne pas non plus dans ce cas.

Si une âme charitable veut bien se pencher sur mon cas, merci à elle.

Bon w-e à tous.
Modifié par wad (09 Jan 2012 - 00:10)

Bonjour,

Je ne comprend pas ton problème...

De la manière que tu l'explique, je ne comprend pas pourquoi un padding simple ne fonctionnerait pas.

Comment voudrais-tu que le bloc bleu de ton exemple réagisse ?

Le padding ne fonctionnera pas, ni sur le bloc(div) ni sur les (p). Essayez de tester d'ajouter du padding pour voir le problème.

Le bloc bleu doit rester sous cette forme.
Le bloc rouge doit être exactement comme il est mais avec du padding. Il doit continuer de "border" le bloc bleu mais avec un padding-left qui fonctionne.

Merci.

salut,

j'ai essayé rapidement avec l'inspecteur web de Safari, et en mettant un padding-left au div identifié "content" j'ai bien un padding sur tout son contenu.
pour le div identifié "left", j'y ai mis un margin-left.
au final tout le contenu du div rouge est décalé de 20px sur la gauche.

si tu veux que le div bleu reste collé au bord de celui qui est rouge mais qu'il y ait le même espace de 20px sur le contenu qui le suit, alors tu mets margin-right:20px
c'est ça que tu voulais ?
Modifié par o06 (08 Jan 2012 - 18:16)

Merci d'avoir pris le temps de tester.

Je viens de tester sous Safari (j'avais testé sous Chrome) et le padding-left est appliqué sur le div content, mais si vous regardez bien, il ne décalle pas les paragraphes texte en partant du début. Il met un padding-left de sa position 0,0, il ignore le fait qu'il y ait le bloc bleu.

PS: Ajouter un text-indent sur la 1ere ligne ne suffirait pas, parce que le bloc bleu dans la réalité, il fait plus d'une ligne.
Modifié par wad (08 Jan 2012 - 18:37)

tu peux bidouiller une image simple pour montrer le résultat que tu souhaites ?

Bien sur ! J'aurais du le faire dès le début :


Merci.

PS: Je ne peux pas mettre de margin-right sur le bloc bleu.J'ai simplifié le problème. Mais ce n'est pas possible dans mon cas.
Modifié par wad (08 Jan 2012 - 18:49)

Comme ça ?

http://dabblet.com/gist/1579118

Il faut seulement que tu ajoute une marche sur ton bloc bleu pour décaler le texte adjaçant.
Modifié par Vaxilart (08 Jan 2012 - 18:52)

Tu n'as pas du voir mon edit, désolé :
PS: Je ne peux pas mettre de margin-right sur le bloc bleu.J'ai simplifié le problème. Mais ce n'est pas possible dans mon cas.
Modifié par wad (08 Jan 2012 - 18:49)

Pourquoi ce n'est pas possible ? Il n'y a aucune raison...

Tu ajoute un <div> si nécessaire...
Modifié par Vaxilart (08 Jan 2012 - 20:09)

Ok ca rajoute en compléxité , mais je mets tout le problème, voici exactement ce que j'ai :
http://dabblet.com/gist/1579422

Je voudrais que sur le bloc vert, on puisse y mettre un décalage(padding-left) de 20px. Sachant que le rouge ne doit pas en avoir. Le decalage du bloc vert doit être effectif même quand il est en contact avec le bloc bleu.

Merci de prendre de ton temps!

Voici une idée:

http://dabblet.com/gist/1579527

Pas mal! Je regarde si c'est applicable dans tous les cas du site, mais ton idée m'a donné un regard neuf, je devrais pouvoir me débrouiller pour le reste.

Je mettrai en résolu dès que j'aurai check.
Encore merci.