Discussion modèle:Début d'illustration
Dernier commentaire : il y a 13 ans par Lgd dans le sujet Ajout de la largeur
Autres discussions [liste]
- Admissibilité
- Neutralité
- Droit d'auteur
- Article de qualité
- Bon article
- Lumière sur
- À faire
- Archives
- Commons
 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 : printer preview generates awful borders modifier
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:
 |
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
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:
bordera é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
transparentdeborder-colorn'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)
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 modifier
div avec background
Float avec bordures blanches (les thumbs actuels) : même chose, mais la bordure le masque
Titre avec bordure modifier
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 modifier
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
The div.thumb styles
modifier
in «
<div class="thumb"> » in «
<div class="thumb"><div> »in « <div class="thumb"><table><tr><td> » |
in « <div class="thumb"><table><tr><td><div> » |
There is many (injustified) differences between screen and printer preview 
. <STyx @ 7 novembre 2008 à 15:45 (CET)
Ajout de la largeur modifier
Voir 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. |
 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. |
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)