css pour imprimer une liste

"Hugolino" <hugolino@free.fr> a écrit dans le message de news:
slrnff8cv9.c88.hugolino@deborah.rock-n-roll.org...

Salut,

Je suis prof et on cherche à faire les trombinoscopes de plus de 50
classes et 1500 elèves.

J'ai proposé de faire ça en XHTML/CSS à l'aide d'un script qui utilise
imagemagick (c'est sous linux), et ça marche vraiment bien. Il suffit de
mettre les photos dans un dossier par classe et de lancer le script pour
générer un index.php.

Mais il y a un problème... l'impression de la page (au moins avec
Firefox. Je n'ai pas eu le temps de tester avec d'autres navigateurs
car je suis un poil à la bourre). Je crois que ça vient de ma manière de
générer un tableau avec une css pour les listes d'images.

Le problème c'est que les cases des trombines n'est pas assez bien gérée,
AMHA. Il faudrait un cadre plus rigide (fini la permissivité dans l'éducnat
:-) ). On y gagnerait en esthétique (chaque trombine centrée dans sa case)
et en logique d'impression. En effet si les limites ne sont pas fixées
l'impression est merdique (comme d'hab) avec FF et un peu mieux avec IE7. Je
suggère un conteneur (BODY) de 1024 px de large quadrillé en sous DIV pour
les trombines. Le but sur l'écran comme sur l'imprimante étant d'établir des
planches.
--
=================================== William Marie
Attention antiSpam remplacer trapellun.invalid
par free.fr
Web : http://wmarie.free.fr
http://www.pandemonium.dnsalias.org (site expérimental)
====================================

Hugolino wrote:

Salut,

Bonjour Monsieur

J'explique un peu les particularités de la css.

Les trombines des elèves ne sont pas dans un tableau, mais dans une
liste dont le style est:
.ul-photo {
margin: 0px;
padding:0px;
}
.li-photo {
margin: 0px;
padding:3px;
list-style-type:none;
text-align:center;
float:left;
}

Et si vous rajoutez ceci: display: block; dans le .li-photo , ça
marche pas mieux ?

Après tout, les lignes d'une liste ordonnée, sont des éléments de
type inline et non pas de type block, donc je ne vois pas très bien ce
que vient faire le float:left; , qui, il est vrai, convient très bien
si la ligne est de type block.

Evidemment, les lignes étant maintenant de type block, avec le float
les photos vont prendre l'espace dont elles disposent, chacune à droite
de la précédente, puis vers le bas, et ainsi de suite.

Ce qui faisait que vous aviez l'impression que cette instruction
float:left; fonctionnait, venait du fait que les ligne ( de type iniline
), se positionnaient les une après les autres sur la même ligne, puis
vers le bas, en remplissant l'espace.

Le fait de spécifier float;left; et display: block; , aura le même effet.

Je suppose que vous affectez des dimensions identiques à chaque
photos, donc l'alignement vertical des photos devrait être respecté.

Je ne garantit pas que çà marche à l'impression, mais il me semble
simplement avoir décelé une légère faute de programmation dans votre
feuille de style.

Bien à vous.

Amicalement.

Jean-François Ortolo

Elle contient un hack pour rétablir le flux (trouvé je sais plus où),
sinon la liste des vignettes se fait les unes au dessous des autres au
lieu de remplir une ligne (aussi bien à l'affichage qu'à l'impression)
.retablir-flux {
clear: both;
}

Cette instruction interdit tout block de type flottant ( float ) à
son niveau, donc effectivement, l'espace restant est disponible à partir
de la ligne horizontale où cette instruction apparaît, vers le bas.

Le pied de page qui, dans un navigateur, apparaît bien en bas de la
dernière page (la mention "page générée...") est imprimé après la
première ligne de vignettes de la première page.

C'est valide xhtml1.0

--
Visitez mon site gratuit donnant des Statistiques
et des Historiques Graphiques sur les Courses de Chevaux:
http://www.ortolojf-courses.com

Le Sat, 22 Sep 2007 11:08:40 +0200, William Marie a écrit:

"Hugolino" <hugolino@free.fr> a écrit dans le message de news:
slrnff8cv9.c88.hugolino@deborah.rock-n-roll.org...
>
> Salut,
>
> Je suis prof et on cherche à faire les trombinoscopes de plus de 50
> classes et 1500 elèves.
>
> J'ai proposé de faire ça en XHTML/CSS à l'aide d'un script qui utilise
> imagemagick (c'est sous linux), et ça marche vraiment bien. Il suffit de
> mettre les photos dans un dossier par classe et de lancer le script pour
> générer un index.php.
>
> Mais il y a un problème... l'impression de la page (au moins avec
> Firefox. Je n'ai pas eu le temps de tester avec d'autres navigateurs
> car je suis un poil à la bourre). Je crois que ça vient de ma manière de
> générer un tableau avec une css pour les listes d'images.
>
Le problème c'est que les cases des trombines n'est pas assez bien gérée,
AMHA. Il faudrait un cadre plus rigide (fini la permissivité dans l'éducnat
:-) ). On y gagnerait en esthétique (chaque trombine centrée dans sa case)
et en logique d'impression. En effet si les limites ne sont pas fixées
l'impression est merdique (comme d'hab) avec FF et un peu mieux avec IE7. Je
suggère un conteneur (BODY) de 1024 px de large quadrillé en sous DIV pour
les trombines. Le but sur l'écran comme sur l'imprimante étant d'établir des
planches.

En fait, on va faire simple: je vais reprendre une ancienne version du
script qui fabriquait un tableau.

J'avais fait une version qui utilisait une liste mise en forme par css
et dont l'intérêt est que ça affiche dans la fenêtre un tableau dont le
nombre de colonnes dépend de la largeur de la fenêtre du navigateur,
c'est cool tant qu'on ne cherche pas à l'imprimer.

Merci de ton aide.

--
Est-ce que les leds du clavier clignotent (dans le cas d'un clavier PS/2 ou
AT) ? Dans ce cas, tu peux trouver un patch permettant d'obtenir le kernel
panic en morse.
Hugo (né il y a 1 369 923 029 secondes)

Le Sat, 22 Sep 2007 12:54:59 +0200, Jean-Francois Ortolo a écrit:

Hugolino wrote:
[...]
> .li-photo {
> margin: 0px;
> padding:3px;
> list-style-type:none;
> text-align:center;
> float:left;
> }
>

Et si vous rajoutez ceci: display: block; dans le .li-photo , ça
marche pas mieux ?

Non, ça ne change rien.

Après tout, les lignes d'une liste ordonnée, sont des éléments de
type inline et non pas de type block, donc je ne vois pas très bien ce
que vient faire le float:left; , qui, il est vrai, convient très bien
si la ligne est de type block.

J'avoue que mes maigres connaissances en css ont été acquises «sur le
tas» à l'aide de copier/coller depuis des sites contenant des exemples.
Je manque certainement de connaissances sur les concept de base des css
et donc de rigueur.

Si vous avez un livre à me conseiller pour m'améliorer, sentez-vous
libre de me les communiquer.

Evidemment, les lignes étant maintenant de type block, avec le float
les photos vont prendre l'espace dont elles disposent, chacune à droite
de la précédente, puis vers le bas, et ainsi de suite.

Ce qui faisait que vous aviez l'impression que cette instruction
float:left; fonctionnait, venait du fait que les ligne ( de type iniline
), se positionnaient les une après les autres sur la même ligne, puis
vers le bas, en remplissant l'espace.

Le fait de spécifier float;left; et display: block; , aura le même effet.

Je ne comprends pas pourquoi vous voudriez ajouter un display: block si
le float: left suffit.
Qu'apporte le display: block ?

Je suppose que vous affectez des dimensions identiques à chaque
photos, donc l'alignement vertical des photos devrait être respecté.

Oui, les vignettes sont toujours de mêmes dimensions.
Sauf sur la page <http://roulaize.fr/Photos/Old> où on peut observer un
décalage. Certaines lignes commencent un peu là où elles veulent (et un
diplay: block dans .li-photo n'y change rien).

Je ne garantit pas que çà marche à l'impression, mais il me semble
simplement avoir décelé une légère faute de programmation dans votre
feuille de style.

Bien à vous.

Merci de votre avis.


--
REST:
P: Linus Torvalds
S: Buried alive in email
Hugo (né il y a 1 369 924 811 secondes)

Hugolino wrote:

Le Sat, 22 Sep 2007 12:54:59 +0200, Jean-Francois Ortolo a écrit:

Hugolino wrote:
[...]

.li-photo {
margin: 0px;
padding:3px;
list-style-type:none;
text-align:center;
float:left;
}

Et si vous rajoutez ceci: display: block; dans le .li-photo , ça
marche pas mieux ?

Non, ça ne change rien.

Bon, ben va falloir passer à l'ancienne mise en forme en tableau.

Après tout, les lignes d'une liste ordonnée, sont des éléments de
type inline et non pas de type block, donc je ne vois pas très bien ce
que vient faire le float:left; , qui, il est vrai, convient très bien
si la ligne est de type block.

J'avoue que mes maigres connaissances en css ont été acquises «sur le
tas» à l'aide de copier/coller depuis des sites contenant des exemples.
Je manque certainement de connaissances sur les concept de base des css
et donc de rigueur.

Si vous avez un livre à me conseiller pour m'améliorer, sentez-vous
libre de me les communiquer.

Un très très bon livre, pas trop compliqué, très bien expliqué:

Titre: CSS 2
Pratique du design web
Auteur: Raphaël Goetter
Editeur: Eyrolles

Evidemment, les lignes étant maintenant de type block, avec le float
les photos vont prendre l'espace dont elles disposent, chacune à droite
de la précédente, puis vers le bas, et ainsi de suite.

Ce qui faisait que vous aviez l'impression que cette instruction
float:left; fonctionnait, venait du fait que les ligne ( de type iniline
), se positionnaient les une après les autres sur la même ligne, puis
vers le bas, en remplissant l'espace.

Le fait de spécifier float;left; et display: block; , aura le même effet.

Je ne comprends pas pourquoi vous voudriez ajouter un display: block si
le float: left suffit.

Ben...

Le fait que les photos se plaçaient côte à côte sans display: block ,
vient seulement, comme je vous l'ai dit, du fait qu'un élément ligne
d'une liste ( ordonnée ou pas ), est un élément de type inline, et pas
de type bloc.

Le fait de mettre display: block; dans .li-photo , fait que cet
élément devient un élément de type bloc, et qu'à ce moment-là, le
float:left; joue effectivement son rôle, qui est de faire sortir les
éléments du flux, en les positionnant à côté les uns des autres.

Je pensais que le fait de mettre un float:left; pour un élément de
type inline, pouvait avoir un effet éventuel sur vos problèmes d'impression.

En tout cas, cette instruction float: left; , est strictement
réservée aux éléments de type bloc.

Vous pouvez toujours enlever float:left; sans mettre display: block;
, pour voir ce que celà donne...

Qu'apporte le display: block ?

Voir ci-dessus, il fait que l'élément dans la classe duquel il est
affecté, est nécessairement de type bloc.

Le livre que je vous indique ci-dessus, vous apportera toutes les
explications nécessaires.

Bien à vous.

Amicalement.

Jean-François Ortolo

--
Visitez mon site gratuit donnant des Statistiques
et des Historiques Graphiques sur les Courses de Chevaux:
http://www.ortolojf-courses.com

"Hugolino" <hugolino@free.fr> a écrit dans le message de news:
slrnff8cv9.c88.hugolino@deborah.rock-n-roll.org...

Salut,

Je suis prof et on cherche à faire les trombinoscopes de plus de 50
classes et 1500 elèves.

J'ai proposé de faire ça en XHTML/CSS à l'aide d'un script qui utilise
imagemagick (c'est sous linux), et ça marche vraiment bien. Il suffit de
mettre les photos dans un dossier par classe et de lancer le script pour
générer un index.php.

Mais il y a un problème... l'impression de la page (au moins avec
Firefox. Je n'ai pas eu le temps de tester avec d'autres navigateurs
car je suis un poil à la bourre). Je crois que ça vient de ma manière de
générer un tableau avec une css pour les listes d'images.

Le problème est que les 12 premiers élèves sont correctement imprimés
sur la page 1, le 13ème élève est rejeté dans le bas de page et coupé,
même s'il y a place de l'imprimer sur la page 1.
Puis l'impression de la page 2 commence avec l'impression de l'élève 14
sans problème sur la page 2 et ainsi de suite.
Chaque dernier élève d'une page est rejeté "a la ligne", même s'il y
aurait la place de l'imprimer, et coupé quelque soit la hauteur de la
marge du bas. (Vous pouvez tester en demandant un aperçu avant
impression sur <http://roulaize.fr/pb-css>

J'explique un peu les particularités de la css.

Les trombines des elèves ne sont pas dans un tableau, mais dans une
liste dont le style est:
.ul-photo {
margin: 0px;
padding:0px;
}
.li-photo {
margin: 0px;
padding:3px;
list-style-type:none;
text-align:center;
float:left;
}

Elle contient un hack pour rétablir le flux (trouvé je sais plus où),
sinon la liste des vignettes se fait les unes au dessous des autres au
lieu de remplir une ligne (aussi bien à l'affichage qu'à l'impression)
.retablir-flux {
clear: both;
}

Le pied de page qui, dans un navigateur, apparaît bien en bas de la
dernière page (la mention "page générée...") est imprimé après la
première ligne de vignettes de la première page.

C'est valide xhtml1.0

L'autre problème est que je n'ai jamais eu à gérer l'impression de page
HTML, je suis un total n00b, je sais juste qu'on peut englober les
déclaration de style dans un
@media screen {
}
pour l'écran, et si on veut imprimer, il faut un
@media print {
}

J'ai fait des essais en mettant juste un body différent, le même
.li-photo le même .ul-photo et le .retablir-flux (celui-là avec ou sans
float:none;), mais ça déconne toujours et même si je crois que ça vient
de .retablir-flux, je n'en suis pas sûr.

Pourriez-vous me dire ce qu'il faut modifier dans ma css pour pouvoir
imprimer ? (La page pb-css contient un lien vers index-2.php qui est mon
essai des règles @media screen et @media print)


Merci de votre aide

Bonsoir,
2 sites où vous trouverez peut-être votre bonheur :
http://www.alsacreations.com
http://www.pompage.net

Bon courage

Jean-Francois Ortolo a écrit :

Hugolino wrote:

.li-photo {
margin: 0px;
padding:3px;
list-style-type:none;
text-align:center;
float:left;
}

Et si vous rajoutez ceci: display: block; dans le .li-photo , ça
marche pas mieux ?

Aucune chance que ça change quoi que ce soit.

Un élément sur lequel on applique un "float" est *obligatoirement* de
type "block".

<http://www.w3.org/TR/REC-CSS1#floating-elements>
Using the 'float' property, an element can be declared to be outside the
normal flow of elements and is then formatted as a block-level element.

--
laurent

Jean-Francois Ortolo a écrit :

Hugolino wrote:

Le Sat, 22 Sep 2007 12:54:59 +0200, Jean-Francois Ortolo a écrit:

Hugolino wrote:
[...]

.li-photo {
margin: 0px;
padding:3px;
list-style-type:none;
text-align:center;
float:left;
}

Et si vous rajoutez ceci: display: block; dans le .li-photo , ça
marche pas mieux ?

Non, ça ne change rien.

Bon, ben va falloir passer à l'ancienne mise en forme en tableau.

OMG !

Le fait de spécifier float;left; et display: block; , aura le même
effet.

Première nouvelle.
Depuis quand "float:left" et "display:block" sont supposés avoir le même
effet et par conséquent seraient interchangeables ?

Un élément qui "float" est forcément de type "block".
Ce qui n'est pas vrai pour la réciproque, bien heureux qu'un type
"block" ne flotte pas par défaut, on serait bien embêté avec tous nos
<div> qui flotteraient de partout.

Je ne comprends pas pourquoi vous voudriez ajouter un display: block si
le float: left suffit.

Ben...
Le fait de mettre display: block; dans .li-photo , fait que cet
élément devient un élément de type bloc, et qu'à ce moment-là, le
float:left; joue effectivement son rôle, qui est de faire sortir les
éléments du flux, en les positionnant à côté les uns des autres.

Non, c'est n'importe quoi. Bon je crois l'avoir assez dit, mais une
dernière fois :)

Un élément avec une propriété CSS "float" se voit *obligatoirement*
attribuer la propriété "display:block"

<http://www.w3.org/TR/REC-CSS1#floating-elements>

Voir ci-dessus, il fait que l'élément dans la classe duquel il est
affecté, est nécessairement de type bloc.

Le livre que je vous indique ci-dessus, vous apportera toutes les
explications nécessaires.

J'espère que tout ce que tu viens de dire n'est pas dans le livre auquel
tu fais référence, sinon ben il faut tout simplement le mettre à la
poubelle, il est faux.

--
laurent

Laurent vilday wrote:

Un élément sur lequel on applique un "float" est *obligatoirement* de
type "block".

<http://www.w3.org/TR/REC-CSS1#floating-elements>
Using the 'float' property, an element can be declared to be outside the
normal flow of elements and is then formatted as a block-level element.

Bonjour Monsieur

Je ne savais pas celà.

Je vous prie de m'excuser de mon erreur...

En ce qui concerne le problème posé, je pense qu'un bon moyen, serait
de gérer précisément le remplissage de l'espace "page d'imprimante",
ainsi que les sauts de page. ( Je ne sais pas quelle est la balise "saut
de page" en HTML, pour une imprimante:

style.css ou print.css , fichier dédié au média imprimante.

img.photo {
width : valeur_x px;
height : valeur_y px;
margin : 2px;
padding : 0;
}

Pas besoin de float: left; les lignes sont des éléments de type
inline. Il se positionnent donc les uns à côté des autres.


fichier.html

<html>
<head>
...
</head>
<body>

container
<div>
un header pour l'imprimante.
( Vous pouvez le masquer sur l'écran en mettant
sa classe dans le fichier
style.css affecté au média écran )
<ul>
<li><img src="photo1_1_1.jpg" alt=" " etc... /></li>
<li><img src="photo1_1_2.jpg" ... /></li>
...Autant de photos qu'il faut
pour remplir une ligne par défaut...
<br>
<li><img src="photo1_2_1.jpg" ... /></li>
<li><im drc="photo1_2_2.jpg" ... /></li>
... même chose
<br>
...ainsi de suite, autant de <br>
qu'il en faut pour remplir
la page d'imprimante, moins l'espace
pour le header et le pied de page.
</ul>
votre pied de page
<balise saut de page pour l'imprimante>

éventuellement, un header de page,
même chose.
<lu>
<li><img src="photo2_1_1.jpg" ... /></li>
<li><img src="photo2_1_2.jpg" ... /></li>
...et on continue, en mettant à chaque ligne
le même nombre de photos, nombre évalué
par rapport aux dimensions de chaque photos,
plus les margin.
</ul>
votre pied de page.
<balise saut de page pour l'imprimante>

En résumé, le fait d'imprimer consiste à remplir
l'espace d'une page d'imprimante de la manière
la plus approchée par défaut ( dimensions ),
donc chaque page terminée par
un saut de page.

Il faut seulement savoir le nombre max de photos par ligne,
et le nombre max de lignes par page d'imprimante.
Ces deux valeurs , ne dépendent que des dimensions
de chaque photo et de al résolution de l'écran.

Sinon, vous pouvez adopter d'autres unités de mesure que le pixel
pour ces dimensions, par exemple l'em.

Par contre, si le ratio largeur/hauteur naturel de chaque photo est
identique pour chaque photos, vous pouvez spécifier éventuellement, seul
le width en pourcentages, à charge d'évaluer manuellement, pour divers
types de résolutions d'écran, la hauteur correspondante de chaque photo,
et donc le nombre idéal max de lignes par page d'imprimante.

Cette dernière solution vous permet d'occuper tout l'espace de
l'écran en largeur.

Vous pouvez aussi utiliser cette méthode de pourcentages
pour le fichier style.css dédié au média screen, et une autre méthode
pour le fichier print.css dédié au média imprimante.

Cette dernière approche me semble plus correcte.

</div>
</body>
</html>


Donc, il me paraît qu'à part ce hack qui consisterait à gérer
manuellement le formattage sur l'imprimante, il n'y a guère que la
solution des tableaux, qui a prouvé son efficacité.

Merci de nous dire comment résoudre le problème avec des css.

Bien à vous.

Amicalement.

Jean-François Ortolo

--
Visitez mon site gratuit donnant des Statistiques
et des Historiques Graphiques sur les Courses de Chevaux:
http://www.ortolojf-courses.com

Jean-Francois Ortolo a écrit :

En résumé, le fait d'imprimer consiste à remplir
l'espace d'une page d'imprimante de la manière
la plus approchée par défaut ( dimensions ),
donc chaque page terminée par
un saut de page.

Il faut seulement savoir le nombre max de photos par ligne,
et le nombre max de lignes par page d'imprimante.
Ces deux valeurs , ne dépendent que des dimensions
de chaque photo et de al résolution de l'écran.

n'importe quoi ! ou contre-sens ou mal dit

les dimensions à l'impression ne sont PAS dépendantes de la résolution
de l'écran !

mais bien des dimensions fixées dans la css #media print
et accessoirement (?) ou seulement (?) de la feuille (A5, A4, A3, A2)
utilisée

Probablement aussi du gestionnaire d'imprimante (échelle d'impression)

il serait judicieux de re-préciser, cette foi en pt, les dimensions des
images dans la feuille de style 'print' si elle existe

Sinon, vous pouvez adopter d'autres unités de mesure que le pixel
pour ces dimensions, par exemple l'em.

pour les images ... c'est à discuter
(à mon avis : px (screen) ou pt (print) ou en %)

Vous pouvez aussi utiliser cette méthode de pourcentages
pour le fichier style.css dédié au média screen, et une autre méthode
pour le fichier print.css dédié au média imprimante.

oui mais on peut aussi, à l'impression, jouer avec le proportionnel.

Donc, il me paraît qu'à part ce hack qui consisterait à gérer
manuellement le formattage sur l'imprimante, il n'y a guère que la
solution des tableaux, qui a prouvé son efficacité.

Si ce n'est que pour afficher et imprimer une série d'images (de la même
taille c'est mieux) et *sans aucun texte* comme proposé il n'y a
vraiment aucune difficulté ça se fait tout seul ...

comme dit précédemment : les images sont de type inline
il n'y a donc qu'à les mettre sans autre procès et elles se rangent
toutes seules

et là : Fx ne coupe pas à cheval sur l'image quand il imprime.

Merci de nous dire comment résoudre le problème avec des css.

puisqu'il n'y a pas de problème, il n'y a rien à résoudre...
voir :
http://stephane.moriaux.perso.orange.fr/truc/imgs_trombines.htm

Le cas originel est autrement plus complexe à faire résoudre par Fx,
tout au moins à l'impression ...

En tous cas, en css je n'y arrive pas ... :-(
http://stephane.moriaux.perso.orange.fr/truc/imgs_trombines_dur.htm



--
Stephane Moriaux et son vieux Mac MDD