[spip-dev] Bogue au niveau affichage légende des images

Nous utilisons beaucoup les images avec le descriptif dessous. Par contre,
je me rends compte maintenant que, c'est le plus large entre le texte et
l'image qui l'emporte. Donc, avec une image peu large, on a un texte qui ne
va pas automatiquement à la ligne.
Cela marchait avant http://raforum.apinc.org/article.php3?id_article=1426.
Enfin, je dis que ça marchait mais IE6 mettait le texte sous l'image et
Mozilla ferrait à gauche la légende alors que l'image était centrée dans
l'espace ! Je pense que vous partiez dans le bon sens !
J'ai d'ailleurs l'impression que la class spip_doc_descriptif vient
d'apparaître, non ? Mais je ne trouve rien dans les feuilles de style pour
le décrire ! De plus, il y a juste un <div class='spip_documents'> qui
l'englobe !? Est-ce normal ?
Pour finir, avec Mozilla, j'ai beau toucher les CSS, ça ne bouge pas et le
texte est comme le texte de l'article (sur IE6, c'est OK, à la largeur
près)!

JMB

PS: comment, nous qui testons la CVS, pouvons voir apparaître que tel ou tel
morceau de l'applicatif a changé et qu'il faut le retester ? Il ne me semble
pas avoir vu cela sur les nouveautés; et la liste CVS est quelque fois peu
claire pour des clampins comme moi. Certainement que cela est prévu mais je
ne sais pas regarder.

Cela marchait avant http://raforum.apinc.org/article.php3?id_article=1426.

Tu peux faire une photo d'écran et la mettre quelque part sur ton site ?
Visuellement je ne constate pas de problème (Safari).

le décrire ! De plus, il y a juste un <div class='spip_documents'> qui
l'englobe !? Est-ce normal ?

Oui, c'est pour ceux qui voudraient bidouiller le style de ce bloc

PS: comment, nous qui testons la CVS, pouvons voir apparaître que tel ou tel
morceau de l'applicatif a changé et qu'il faut le retester ? Il ne me semble
pas avoir vu cela sur les nouveautés; et la liste CVS est quelque fois peu
claire pour des clampins comme moi. Certainement que cela est prévu mais je
ne sais pas regarder.

Ca dépend de l'humeur du jour : soit c'est un message sur spip-dev, soit des
commentaires sur spip-commit, soit encore des modifs sur le fichier
NOUVEAUTES.txt, selon la gravité de la modification.

-- Fil

Tu peux faire une photo d'écran et la mettre quelque part sur ton site ?

http://raforum.apinc.org/article.php3?id_article=1788

SI tu ne peux pas lire, détache les images.

A+

JMB

Salut,

C'est inhérent, je pense, à l'utilisation des css (et non plus aux tables). Je n'ai pas trouvé de solution css pour reproduire le même comportement qu'avec les tables.

C'est peut-être désormais au rédacteur d'affiner la présentation du titre avec la prévisualisation en jouant du raccourci "_ ". Dans ton cas, cela donnerait :
"Rudolf Rocker,
_ organisateur et
_ théoricien de
_ l’anarcho-syndicalisme"

A moins qu'un style css qui va bien (i.e. calqué sur la largeur de l'image) puisse être trouvé. Pour ma part, je n'y suis pas parvenu.

A+

#Olivier.

JMB wrote:

JMB a écrit :

Nous utilisons beaucoup les images avec le descriptif dessous. Par contre,
je me rends compte maintenant que, c'est le plus large entre le texte et
l'image qui l'emporte. Donc, avec une image peu large, on a un texte qui ne
va pas automatiquement à la ligne.

Je confirme: j'ai le même problème.

François

C'est inhérent, je pense, à l'utilisation des css (et non plus aux
tables). Je n'ai pas trouvé de solution css pour reproduire le même
comportement qu'avec les tables.

Ben alors :frowning:

Vivent les tables et à bas les CSS !

C'est peut-être désormais au rédacteur d'affiner la présentation du
titre avec la prévisualisation en jouant du raccourci "_ ". Dans ton
cas, cela donnerait :
"Rudolf Rocker,
_ organisateur et
_ théoricien de
_ l’anarcho-syndicalisme"

Alors là, je ne vois pas comment on peut reprendre toutes les images, leur
changer la légende pour que cela cadre bien !
Cela veut dire que c'est que rédacteur de s'occuper de la mise en page, ce
qui n'est pas compatible avec l'esprit CMS.

Donc, à vouloir devenir à tout prix "CSS compliant", on régresse, dans
certains cas comme cela.

Ne faudrait-il pas revenir en "pur table" dans ce cas de figure ?

JMB

Quelques précisions concernant le code affiché. Je précise juste que j'ai
enlevé tout filtre autre que le justify du texte ou du chapo de l'article
(je précise pour Gilles qui avait répondu directement).

Le code généré avant:

<p class="spip" align='justify'><table cellpadding='0' cellspacing='0'
border='0' align='right'>
<tr><td width='10'> &nbsp; </td><td align='center' width = '120'>
<div class='spip_documents'>
<img src='IMG/gif/rocker2.gif' border=0 width='100' height='150'
align='right' hspace='5' vspace='3'><div style='text-align:left;'>Rudolf
Rocker, organisateur et théoricien de
l&#8217;anarcho-syndicalisme</div></div>
</td></tr>
</table>
</p>

Et maintenant:

<p class="spip" align='justify'><div class='spip_documents' style='float:
right; text-align: center;'>
<img src='IMG/gif/rocker2.gif' border='0' width='100' height='150' alt=""
/><div class='spip_doc_descriptif'>Rudolf Rocker, organisateur et
théoricien de l&#8217;anarcho-syndicalisme</div></div>
</p>

JMB a écrit :

Quelques précisions concernant le code affiché. Je précise juste que j'ai
enlevé tout filtre autre que le justify du texte ou du chapo de l'article
(je précise pour Gilles qui avait répondu directement).

Le code généré avant:

<p class="spip" align='justify'><table cellpadding='0' cellspacing='0'
border='0' align='right'>
<tr><td width='10'> &nbsp; </td><td align='center' width = '120'>
<div class='spip_documents'>
<img src='IMG/gif/rocker2.gif' border=0 width='100' height='150'
align='right' hspace='5' vspace='3'><div style='text-align:left;'>Rudolf
Rocker, organisateur et théoricien de
l&#8217;anarcho-syndicalisme</div></div>
</td></tr>
</table>
</p>

Et maintenant:

<p class="spip" align='justify'><div class='spip_documents' style='float:
right; text-align: center;'>
<img src='IMG/gif/rocker2.gif' border='0' width='100' height='150' alt=""
/><div class='spip_doc_descriptif'>Rudolf Rocker, organisateur et
théoricien de l&#8217;anarcho-syndicalisme</div></div>
</p>

------------------------------------------------------------------------

_______________________________________________
liste: http://listes.rezo.net/mailman/listinfo/spip-dev
doc: http://www.spip.net/
cvs: http://www.spip.net/spip-dev/devel/
irc://irc.freenode.net/spip

Une idée à voir, je ne connais pas la mécanique interne de spip

peut-être est-il possible de coder

<div class='spip_documents' style='float: right; text-align: center;'>
par

<div class='spip_documents adroite centrer'>

avec dans la css
.adroite {float:right;}
.agauche {float:left;}
.centrer {text-align:center;}

reste à fixer la taille pour être conforme à la taille de l'image.
Lorsque le code était basé sur un tableau, la cellule recevait une dimension en relation avec la taille de l'image "/<td align='center' width = '120'>/". Est-il possible de passer l'info dans le code pour recevoir en fin

<div class='spip_documents adroite centrer' style='width:120px'>
ou mieux
<div class='spip_documents adroite centrer' style='max-width:120px'>

une autre alternative est de prendre la dim de l'image dans la boucle documents balise #LARGEUR mais comment l'introduire dans la spécif de class dépasse encore mes connaissances.

cordialement

Claude

reste à fixer la taille pour être conforme à la taille de l'image.
Lorsque le code était basé sur un tableau, la cellule recevait une dimension en relation avec la taille de l'image "/<td align='center' width = '120'>/". Est-il possible de passer l'info dans le code pour recevoir en fin

<div class='spip_documents adroite centrer' style='width:120px'>
ou mieux
<div class='spip_documents adroite centrer' style='max-width:120px'>

Oui, je pense que c'est ce qu'il y a de mieux à faire. "width", plutôt
que "max-width" d'ailleurs, car ce dernier n'est pas reconnu par MSIE.

a+

Antoine.

Je viens d'uploader un correctif pour la largeur maximale.

A ce sujet...

Le patch qui remplace le table par un div est d'une inutilité crasse. Il ne se justifierait que:
- si on gagne en contrôle via CSS sur les affichages;
- si ça devient compliant;
- si c'est plus zoli.

Or tout seul, le patch ne remplit ni l'un ni l'autre, et il serait pourtant intéressant de redéfinir complètement ces affichages:

- je suis partisan d'abandonner le $espace_logo, et de le remplacer tout connement par un contrôle par feuille de style, plus simple, plus propre et plus puissant que l'ajout de cette ligne PHP dans du code;

- le fait de balancer un div n'a ni rendu le truc plus compliant ni plus accessible pour les aveugles; pour que ce soit compliant, il ne faut pas que les div (ni les table précédents) ne soient présents à l'intérieur des paragraphes; donc c'est plus lourd.

- espacement horizontal avec le texte. Avant c'était codé comme un porc, maintenant c'est laid.

=> Bref, repenser globalement l'insertion des IMG, DOC et EMB, avec notamment contrôle plus précis par feuille de style, meilleure compliance, meilleur graphisme si possible (notamment gestion des espacements horizontaux).

ARNO*

Pour le support de max-width par IE, c'est possible avec les scripts de Dean :
http://dean.edwards.name/IE7/

Voici un résumé [en] qui explique comment contourner les limitations
d'IE pour max-width :
http://www.svendtofte.com/code/max_width_in_ie/

(je sais, ce type de code est plutôt tordu, mais il semble, sauf
erreur de ma part, que j'en ai déjà vu dans la version 1.8b1 de SPIP)

@+

.Gilles

Je viens d'uploader un correctif pour la largeur maximale.

Salut,

je viens de jeter un oeil. Sur IE6, c'est parfait, tant en ce qui concerne
la largeur de l'image et de sa légende.

Mais, car il y a un mais !

Je parlais de Mozilla qui ne réagissait pas au niveau de la légende. Je
confirme donc: avec Mozilla, la légende ne tient pas compte des attributs de
corps et de couleur que j'ai donné dans ma feuille de style. Il ne tient pas
non plus compte de la feuille de style spip qui limite la taille de
caractère à 70%.

Code généré par spip :

<p class="spip" align='justify'><div class='spip_documents' style='float:
right; text-align: center; width: 120px;'>
<img src='IMG/gif/rocker2.gif' border='0' width='100' height='150' alt=""
/><div class='spip_doc_descriptif'>Rudolf Rocker, organisateur et théoricien
de l&#8217;anarcho-syndicalisme</div></div>
</p>

Ma feuille de style :
.spip_doc_descriptif{ color: #990000;}
Je précise juste que spip_documents (du standard) passe la taille à 70%, je
n'interviens que sur la couleur.

JMB

Salut JMB,

Ce problème est dû : (1) ou à Mozilla (version ?) (2) ou plus probablement à ta feuille de style.

Note : je n'ai eu aucune difficulté à reproduire ton style sous Firefox.

Tente peut-être un :

div.spip_doc_descriptif { color: #990000; }

mais en principe, et dans ton cas, il est inutile d'y avoir recours.

#Olivier.

JMB wrote:

Je parlais de Mozilla qui ne réagissait pas au niveau de la légende. Je
confirme donc: avec Mozilla, la légende ne tient pas compte des attributs de
corps et de couleur que j'ai donné dans ma feuille de style. Il ne tient pas
non plus compte de la feuille de style spip qui limite la taille de
caractère à 70%.
>

Tu utilise quoi comme mozilla parcque chez moi ça marche tres bien

JMB a écrit :

Je viens d'uploader un correctif pour la largeur maximale.
   
Salut,

je viens de jeter un oeil. Sur IE6, c'est parfait, tant en ce qui concerne
la largeur de l'image et de sa légende.

Mais, car il y a un mais !

Je parlais de Mozilla qui ne réagissait pas au niveau de la légende. Je
confirme donc: avec Mozilla, la légende ne tient pas compte des attributs de
corps et de couleur que j'ai donné dans ma feuille de style. Il ne tient pas
non plus compte de la feuille de style spip qui limite la taille de
caractère à 70%.

Code généré par spip :

<p class="spip" align='justify'><div class='spip_documents' style='float:
right; text-align: center; width: 120px;'>
<img src='IMG/gif/rocker2.gif' border='0' width='100' height='150' alt=""
/><div class='spip_doc_descriptif'>Rudolf Rocker, organisateur et théoricien
de l&#8217;anarcho-syndicalisme</div></div>
</p>

Ma feuille de style :
.spip_doc_descriptif{ color: #990000;}
Je précise juste que spip_documents (du standard) passe la taille à 70%, je
n'interviens que sur la couleur.

JMB

------------------------------------------------------------------------

_______________________________________________
liste: http://listes.rezo.net/mailman/listinfo/spip-dev
doc: http://www.spip.net/
cvs: http://www.spip.net/spip-dev/devel/
irc://irc.freenode.net/spip

Il semble en effet que sur les flottants mozilla ne tienne pas compte de la largeur par contre il est possible de coder differement pour mozilla et ie

    <div class='monstyle' style='width:120; html>body max-width: 120;'>

ie est incapable d'interpréter le html>body est laisse tomber la définition qui suit, c'est la seule méthode simple que j'ai trouvé à ce jour pour faire cohabiter les deux principaux navigateurs. Cette forme de codage est bien référencée sur http://openweb.eu.org/ dans la doc sur les css

On peut rêver que MS abandonne le développement de IE et que tout le monde utilise firefox ou autre du même monde, mais c'est pas encore fait!

Cordialement

Claude.

Je sais pas où tu as ete pecher cela, au derniere nouvelle mozilla gere parfaitement le width sur les flottantes
et pour info le code que tu donne ne risque pas de fonctionner car tu applique le max-width au body.
Cette syntaxe ne sert à rien dans la cas présent car ie ne prend pas en compte max-width de toute façon.

j'ai créé une page dans le wiki de spip lab
http://lab.spip.net/spikini/GestionDesDocuments
laissé y vos remarques et commentaires et ou solutions

Bonsoir

Ce problème est dû : (1) ou à Mozilla (version ?) (2) ou plus
probablement à ta feuille de style.

Mozilla 1.7 et Firefox 0.9.3 ont le même comportement (ce qui n'est pas
étonnant !)

Note : je n'ai eu aucune difficulté à reproduire ton style sous Firefox.

Le style marche peut-être comme cela, dans l'absolu... Mais pas ici (enfin,
ce que j'en vois!)

Tente peut-être un : div.spip_doc_descriptif { color: #990000; }

Ca n'a rien changé :frowning:

JMB

Bonsoir,

Tu utilise quoi comme mozilla parcque chez moi ça marche tres bien

1.7.

Mais as-tu essayé avec la dernière CVS de spip ?

JMB

J'ai trouvé une solution (peut-être pas des plus terrible...) :
utiliser l'overflow pour tronquer les caractères qui dépassent, et
ainsi tenir compte de la largeur de notre cellule :
cf. le code disponible à http://gilles-vincent.com/JMB.html
(ma version est la première, les autres correspondant à la version
générée actuellement puis à l'ancienne version - sauf erreur - )

Quelques remarques :
- IE à l'air de traiter le caractère '-' comme un séparateur, alors
que Firefox non. C'est pourquoi l'expression "l'anarcho-syndicalisme"
déborde.
- On peut ne pas être satisfait de cette méthode un peu brute de
fonderie qui consiste à ne pas afficher ce qui déborde ; pourrait-on
utiliser SPIP pour détecter les mots trop longs (env. 18 caractères) ?
Une idée pourrait être de les tronquer proprement, avec un espace
suivit d'un '-' suivi du reste du mot... Personnellement, ça me paraît
plutôt lourd à gérer, d'ou ma solution.. Ce qui compte, c'est que même
un rédacteurun peu étourdi ne puisse plus modifier la mise en forme de
la page, non ?