Discussion modèle:Début d'illustration
- Admissibilité
- Neutralité
- Droit d'auteur
- Article de qualité
- Bon article
- Lumière sur
- À faire
- Archives
- Commons
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
(en) Catalogue of classes |
Index des propriétés CSS2 |
![]() |
![]() |
![]() |
BUG : printer preview generates awful borders
modifierTransfered 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:
Expanded code (with thumb
, printer preview generates awful borders) :
The same code without thumb
(but corresponding style
):
I have also substituted « border-color: transparent;
» for « border-color: white;
».
Code généré par une commande thumb
modifier
![](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)
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
modifier
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
deborder-color
n'est pas implémentée par IE6.
- --Lgd (d) 4 décembre 2008 à 17:06 (CET)
- 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)
Titre avec bordure
modifierTitre avec bordure
modifierTitre avec bordure
modifierTitre avec marge droite
Titre avec bordure et overflow
The div.thumb
styles
modifier
There is many (injustified) differences between screen and printer preview . <STyx @ 7 novembre 2008 à 15:45 (CET)
Ajout de la largeur
modifierVoir Wikipédia:Le Bistro/19 mai 2010#Pb affichage Modèle:Carte avec géolocalisation ?.
avec style="width:0px;" |
sans style="width:0px;" |
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. |
- 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)