fr Discussion mod%C3%A8le:D%C3%A9but d%27illustration

Données clés
	Aide • Exemples
	Fonctions avancées
	Apparence Vector
	Apparence Timeless
	Projet:Scripts et gadgets
	(en) User styles
	common.css personnel
	Common.css commun
	Monobook.css commun
	Vector.css commun
	(en) Catalogue of classes
	Index des propriétés CSS2
	common.js personnel
	Common.js commun
	Fonctions JavaScript

bug 16272

BUG : printer preview generates awful borders

Transfered from Wikipédia:Jargon/Modèle de point/Tests d'ajustement#BUG : printer preview generates awful borders

Mauvais rendu de la version imprimable.

Modèle concerné {{Début d'illustration}}.

Code using {{Début d'illustration}} (this template no longer uses thumb class):

{{Début d'illustration|right}}{{Début de carte}}<!--
-->[[Image:French presidential election 2007 1st 180°.svg|200px|légende]]
{{Étiquette|40|45|[[François Bayrou]]|20|n}}
{{Fin de carte}}
{{Fin d'illustration
|French presidential election 2007 1st 180°.svg
|légende.}}

Result:

François Bayrou

légende.

Expanded code (with thumb, printer preview generates awful borders) :

François Bayrou

Agrandir l'image vierge

légende.

The same code without thumb (but corresponding style): I have also substituted « border-color: transparent; » for « border-color: white; ».

François Bayrou

Agrandir l'image vierge

légende.

Code généré par une commande `thumb`

Commande:

[[image:French presidential election 2007 1st 180°.svg|200px|thumb|none|légende]]

code source:

<div class="thumb tnone">
<div class="thumbinner" style="width:202px;">
<a href="/wiki/Image:French_presidential_election_2007_1st_180%C2%B0.svg" class="image" title="légende">
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/French_presidential_election_2007_1st_180%C2%B0.svg/200px-French_presidential_election_2007_1st_180%C2%B0.svg.png" 
width="200" height="102" border="0" class="thumbimage" 
/>
</a>
<div class="thumbcaption">
<div class="magnify"><a href="/wiki/Image:French_presidential_election_2007_1st_180%C2%B0.svg" class="internal" title="Agrandir"><img src="/skins-1.5/common/images/magnify-clip.png" width="15" height="11" alt="" /></a></div>
légende</div>
</div>
</div>

Les classes `thumb`

dans http://fr.wikipedia.org/skins-1.5/common/commonPrint.css :

/* thumbnails */
div.thumb {
    margin-bottom: 0.5em;
    border-style: solid; border-color: White;
    width: auto;
    overflow: hidden;
}
div.thumb div {
    border:1px solid #cccccc;
    padding: 3px !important;
    background-color:#f9f9f9;
    font-size: 94%;
    text-align: center;
}
div.thumb div a img {
    border:1px solid #cccccc;
}
div.thumb div div.thumbcaption {
    border: none;
    padding: 0.3em 0 0.1em 0;
}
div.magnify { display: none; }
div.tright {
    float: right;
    clear: right;
    border-width: 0.5em 0 0.8em 1.4em;
}
div.tleft {
    float: left;
    margin-right:0.5em;
    border-width: 0.5em 1.4em 0.8em 0;
}
img.thumbborder {
	border: 1px solid #dddddd;
}

dans http://fr.wikipedia.org/skins-1.5/monobook/main.css :

/* thumbnails */
div.thumb {
	margin-bottom: .5em;
	border-style: solid;
	border-color: white;
	width: auto;
}
div.thumbinner {
	border: 1px solid #ccc;
	padding: 3px !important;
	background-color: #f9f9f9;
	font-size: 94%;
	text-align: center;
	overflow: hidden;
}
html .thumbimage {
	border: 1px solid #ccc;
}
html .thumbcaption {
	border: none;
	text-align: left;
	line-height: 1.4em;
	padding: 3px !important;
	font-size: 94%;
}
div.magnify {
	float: right;
	border: none !important;
	background: none !important;
}
div.magnify a, div.magnify img {
	display: block;
	border: none !important;
	background: none !important;
}
div.tright {
	clear: right;
	float: right;
	border-width: .5em 0 .8em 1.4em;
}
div.tleft {
	float: left;
	clear: left;
	margin-right: .5em;
	border-width: .5em 1.4em .8em 0;
}
img.thumbborder {
	border: 1px solid #dddddd;
}

Il y a trop de différences injustifiées entre commonPrint.css, main.css parce que vraisemblablement commonPrint.css n'a pas été mis à jour lorsque main.css a été modifié.

Dans MediaWiki:Monobook.css :

/* IMAGES
Rend blanc au lieu de gris le fond des images transparentes en thumb. */
.thumbimage { background:white; }
 
/* bordure des thumb au memes couleurs que le fond */
.ns-1 div.thumb,
.ns-3 div.thumb,
.ns-5 div.thumb,
.ns-7 div.thumb,
.ns-9 div.thumb,
.ns-11 div.thumb,
.ns-13 div.thumb,
.ns-101 div.thumb,
.ns-103 div.thumb,
.ns-105 div.thumb{
border-color:#FFE;
}
 
.ns-4 div.thumb{
border-color:#F4F4F4;
}

Ici, on tente (maladroitement) de réparer les dégâts causés par

div.thumb {
	border-color: white;
}

Mais du coup, la version imprimable devient défectueuse (puisque l'on colore sur fond blanc). C'est symptomatique de la mauvaise programmation des pages CSS.

La solution est pourtant toute simple : Le remplacement par

div.thumb {
	border-color: transparent;
}

Par ailleurs, utiliser "border" au lieu de "margin" est un odieux bricolage. Qu'est ce qui le justifie ? !

Pour te résumer rapidement le pourquoi du comment:

border a été utilisé ici au lieu des marges afin d'éviter que des bordures ou des couleurs de background d'éléments en flux ne viennent s'achever juste à la limite des bordures visibles des thumbs flottants (l'utilisation des marges serait en fait possible mais à des conditions trop contraignantes pour les contributeurs).
la valeur transparent de border-color n'est pas implémentée par IE6.

--Lgd (d) 4 décembre 2008 à 17:06 (CET)[répondre]

Comme j'ai un peu de temps, voici les détails ci-dessous. En espérant t'avoir éclairé. --Lgd (d) 4 décembre 2008 à 19:36 (CET)[répondre]

Float avec margin (ce que tu voulais faire) : la limite de bordure du flux adjacent est à droite du flottant, dont elle ignore les marges.

Titre avec bordure

div avec background

Float avec bordures blanches (les thumbs actuels) : même chose, mais la bordure le masque

Titre avec bordure

div avec background

Float avec bordures transparentes (ce que tu voulais aussi faire) : même chose, mais la bordure ne joue plus évidemment plus son rôle de masque

Titre avec bordure

div avec background

Float avec margin (ce qu'on faisait également autrefois) : double contrainte de pouvoir styler chaque bloc de flux et de connaître la largeur du flottant

Titre avec marge droite

div avec background et marge droite

Float avec margin (ce qu'on fait normalement à présent) : une seule contrainte, pouvoir styler les blocs de flux

Titre avec bordure et overflow

div avec background et overflow (zoom:1 pour IE)

The `div.thumb` styles

in « <div class="thumb"> »

in « <div class="thumb"><div> »

in « <div class="thumb"><table><tr><td> »

in « <div class="thumb"><table><tr><td><div> »

in « <div class="thumb"><a> »

There is many (injustified) differences between screen and printer preview . <STyx @ 7 novembre 2008 à 15:45 (CET)[répondre]

Ajout de la largeur

Voir Wikipédia:Le Bistro/19 mai 2010#Pb affichage Modèle:Carte avec géolocalisation ?.

Ces modèles peuvent également placer un texte en illustration comme le fait {{Encadré texte}}.

avec style="width:0px;"

Ces modèles peuvent également placer un texte en illustration comme le fait {{Encadré texte}}.

sans style="width:0px;"

Ces modèles peuvent également

placer un texte en illustration

comme le fait {{Encadré texte}}.

sans style="width:0px;"

Ces modèles peuvent également placer un texte en illustration comme le fait {{Encadré texte}}.

sans style="width:0px;" et avec une très très très très très très très longue légende ; cette légende élargie le cadre de l'illustration.

v · d · m

Rennes

Saint-Brieuc

Quimper

Vannes

Fougères

Redon

Saint-Malo

Dinan

Guingamp

Lannion

Brest

Châteaulin

Morlaix

Lorient

Pontivy

Île d'Ouessant

Belle-Île-en-Mer

Île de Groix

Océan Atlantique

La Manche

Mer d'Iroise

Golfe du Morbihan

Baie du Mont-Saint-Michel

avec style="width:0px;" et avec une très très très très très très très longue légende ; cette légende n'élargie pas le cadre de l'illustration.

v · d · m

Rennes

Saint-Brieuc

Quimper

Vannes

Fougères

Redon

Saint-Malo

Dinan

Guingamp

Lannion

Brest

Châteaulin

Morlaix

Lorient

Pontivy

Île d'Ouessant

Belle-Île-en-Mer

Île de Groix

Océan Atlantique

La Manche

Mer d'Iroise

Golfe du Morbihan

Baie du Mont-Saint-Michel

sans style="width:0px;" et avec une très très très très très très très longue légende ; cette légende élargie le cadre de l'illustration.

Attention, ces rendus sont différents (et imprévisibles) selon les navigateurs (voir sous Safari). On ne peut pas se reposer sur une valeur de propriété aberrante (un width:0 pour un contenu de largeur non nulle) pour contourner une difficulté de rendu. Il faut chercher la source de celle-ci pour la traiter (la présence d'un tableau de mise en forme comme conteneur dans {{Début d'illustration}} serait le premier élément à revoir). Cordialement, --Lgd (d) 20 mai 2010 à 04:20 (CEST)[répondre]

Discussion modèle:Début d'illustration

BUG : printer preview generates awful borders

Code généré par une commande thumb

Les classes thumb

Titre avec bordure

Titre avec bordure

Titre avec bordure

Titre avec marge droite

Titre avec bordure et overflow

The div.thumb styles

Ajout de la largeur

Code généré par une commande `thumb`

Les classes `thumb`

The `div.thumb` styles