Bonjour,
J'ai fait un petit programme qui me génère des rapports avec des photos en html. Le but est ensuite de les imprimer. Pour cela j'ai donc fait un feuille css.
Le principe de fonctionnement est le suivant. J'ai déjà défini mes marges de pages. Ensuite dans chaque page, j'ai prévu deux div appelés picandcom de hauteur et largeur fixe et insécables (page-break-inside: avoid;). Puis après chaque deuxième div un saut de page.
Ces div font office de conteneur pour chaque fois une photo et du texte. Pour les photos paysage, le texte est en dessous. Pour les photos portrait le texte est alternativement à gauche ou à droit avec un float.
Avec explorer 6, j'arrivais à imprimer comme je voulais (en fixant les bonne marges dans mise en page). Maintenant avec le 7, je n'y arrive plus et ni avec firefox.
Les problèmes rencontrés sont les suivants:
- Aucun des navigateur ne semble prendre en compte les marges définies dans ma feuille de style. Ce qui fait que je n'ai pas la mise en page voulue.
Pour firefox, mis à part ce qui précède, ça va.
Pour explorer:
- Ne tiens pas compte du float pour mes images verticales. Visibleme, dès que le texte lui parait trop long, il le met en dessous de l'image et non à gauche ou à droite comme voulu.
- Il doit considérer que les page-break-inside: avoid, ça doit être juste pour rallonger le feuille de style, car il fait ses sauts de page où il veut. Y compris à l'intérieur de mes conteneurs "picandcom" .
Est-ce que quelqu'un aurait une idée comment résoudre ça. Si possible pour ces deux navigateurs, mais si j'arrive déjà à ça faire fonctionner sur 1, ça serait pas mal.
Ma feuille de style:
Ainsi qu'un exemple de page html:
Modifié par Fox (02 Mar 2007 - 16:13)
J'ai fait un petit programme qui me génère des rapports avec des photos en html. Le but est ensuite de les imprimer. Pour cela j'ai donc fait un feuille css.
Le principe de fonctionnement est le suivant. J'ai déjà défini mes marges de pages. Ensuite dans chaque page, j'ai prévu deux div appelés picandcom de hauteur et largeur fixe et insécables (page-break-inside: avoid;). Puis après chaque deuxième div un saut de page.
Ces div font office de conteneur pour chaque fois une photo et du texte. Pour les photos paysage, le texte est en dessous. Pour les photos portrait le texte est alternativement à gauche ou à droit avec un float.
Avec explorer 6, j'arrivais à imprimer comme je voulais (en fixant les bonne marges dans mise en page). Maintenant avec le 7, je n'y arrive plus et ni avec firefox.
Les problèmes rencontrés sont les suivants:
- Aucun des navigateur ne semble prendre en compte les marges définies dans ma feuille de style. Ce qui fait que je n'ai pas la mise en page voulue.
Pour firefox, mis à part ce qui précède, ça va.
Pour explorer:
- Ne tiens pas compte du float pour mes images verticales. Visibleme, dès que le texte lui parait trop long, il le met en dessous de l'image et non à gauche ou à droite comme voulu.
- Il doit considérer que les page-break-inside: avoid, ça doit être juste pour rallonger le feuille de style, car il fait ses sauts de page où il veut. Y compris à l'intérieur de mes conteneurs "picandcom" .
Est-ce que quelqu'un aurait une idée comment résoudre ça. Si possible pour ces deux navigateurs, mais si j'arrive déjà à ça faire fonctionner sur 1, ça serait pas mal.
Ma feuille de style:
@page {
margin: 2cm;
}
@media print {
.picandcom {
page-break-inside: avoid;
}
.pgbreak {
page-break-after: always;
}
}
@media screen, print {
.picandcom {
margin: 0;
width: 17cm;
height: 12.9cm;
border: 1px solid #000000;
text-align: center;
}
img.ls {
height: 9.6cm;
width: 12.8cm;
margin-top: 1cm;
margin-bottom: 0.5cm;
margin-left: 2.1cm;
margin-right: 2.1cm;
display: block;
}
img.ptl {
height: 12.8cm;
width: 9.6cm;
margin-top: 0.05cm;
margin-bottom: 0.05cm;
margin-right: 0.4cm;
margin-left: 0;
float: left;
}
img.ptr {
height: 12.8cm;
width: 9.6cm;
margin-top: 0.05cm;
margin-bottom: 0.05cm;
margin-right: 0;
margin-left: 0.4cm;
float: right;
}
.commenth {
text-align: left;
margin-left: 2.1cm;
margin-right: 2.1cm;
}
.commentv {
margin-top: 5.8cm;
text-align: justify;
}
}Ainsi qu'un exemple de page html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="picandcom">
<img alt="001.jpg" src="Photos/001.jpg" class="ls" />
<div class="commenth">Photo 1: Chemin d'accès, vue entrée depuis le nord</div>
</div>
<div class="picandcom">
<img alt="002.jpg" src="Photos/002.jpg" class="ls" />
<div class="commenth">Photo 2: Chemin d'accès</div>
</div>
<div class="pgbreak"></div>
<div class="picandcom">
<img alt="009.jpg" src="Photos/009.jpg" class="ptl" />
<div class="commentv">Photo 9: Vue depuis le nord chemin en enrobé entre bâtiments ECA 595 et 993</div>
</div>
<div class="picandcom">
<img alt="010.jpg" src="Photos/010.jpg" class="ls" />
<div class="commenth">Photo 10: Bâtiment, façades sud et est, vue d'ensemble</div>
</div>
<div class="pgbreak"></div>
<div class="picandcom">
<img alt="013.jpg" src="Photos/013.jpg" class="ptl" />
<div class="commentv">Photo 13: Bâtiment, côté sud, fissures diverses chemin béton jardin</div>
</div>
<div class="picandcom">
<img alt="014.jpg" src="Photos/014.jpg" class="ptr" />
<div class="commentv">Photo 14: Bâtiment, façade sud, petite fissure dessous 1ère fenêtre rez</div>
</div>
<div class="pgbreak"></div>
</body>
</html>Modifié par Fox (02 Mar 2007 - 16:13)