|
Class : ID Admin
Posts : 1437
Registered on : 12/11/2007
Age : 28
Sex : Female
Offline Mail Www
|
Lorsqu'on veut rendre son site accessible au plus grand nombre, on doit bien évidemment s'assurer que les internautes puissent grossir la police, quel que soit le navigateur.
La problématique au niveau des forums basés sur phpBB2
Comme plusieurs le savent, les forums basés sur phpBB2 ont généralement le défaut suivant : le grossissement des polices ne fonctionne pas sous Internet Explorer.
La raison est simple : La feuille de style de la plupart des templates utilise des tailles de police en pixels, qui sont des tailles fixes. Or, Internet Explorer ne grossit pas les tailles fixes, pendant que les autres navigateurs les grossissent sans problème.
La seule solution est donc d'utiliser des tailles relatives.
Attention !
Mais étant donné qu'il y a peu de classes et qu'il y a des imbrications d'éléments de même classe, ou de deux classes où des tailles sont fixées, cela complique la mise en place des tailles relatives, puisque la balise le plus imbriquée va baser sa taille sur celle de sa balise-mère.
Un exemple :
<span class="gensmall">blabla <a class="gensmall">Lien</a> blibli</span>
Et pour la classe gensmall, on met une taille de 0.8em qui est une taille relative.
Le texte en dehors du lien s'affichera comme on veut, mais le texte dans le lien sera deux fois plus petit, car le lien qui a comme class "gensmall" va baser sa grosseur sur la balise span qui a la même classe, donc sur 0.8em au lieu de 1em.
Pour vous faciliter la vie
Si votre Forumactif est en version phpBB2 et que vous voulez utiliser des tailles relatives sans changer de version, je mets à votre disposition les codes CSS à copier dans votre panneau d'admin > Thèmes > Couleurs > Feuille de style CSS, afin que vous n'ayez pas à vous arracher les cheveux à faire marcher les tailles de police comme du monde.
Comme les préférences de tailles peuvent varier, je ne posterai pas seulement un code, mais plusieurs en fonction des paramètres de "Taille police principale", "Taille Police des liens" et "Taille police Titre, messages & catégories".
|
|
Class : ID Admin
Posts : 1437
Registered on : 12/11/2007
Age : 28
Sex : Female
Offline Mail Www
|
Si vos paramètres sont :
- Taille Police principale : 10
- Taille police Liens : 11
- Taille police Titres, Messages & Catégories : 12
/*Tailles relatives*/
body
{
font-size: 1em;
}
th {
font-size: 0.7em;
}
th.thHead,td.catHead {
font-size: 0.75em;
}
td.catHead span.cattitle, td.catHead span.cattitle a.cattitle
{
font-size: 1em;
}
td.catHead td.t-title span.cattitle
{
font-size: 0.75em;
}
th.thHead select, th.thHead input
{
font-size: 0.9em;
}
.maintitle{
font-size: 1.8em;
}
.gen {
font-size : 0.75em;
}
span.gen a.gen, label.gen span.gen
{
font-size: 1em;
}
span.gen a.copyright
{
font-size: 0.85em;
}
span.gen input, span.gen select, span.gen span.genmed, span.gen a.mainmenu, td.gen input
{
font-size: 0.9em;
}
.genmed {
font-size : 0.7em;
}
span.genmed input, span.genmed select, span.genmed a.genmed, table.genmed input, table.genmed select, span.genmed a.mainmenu
{
font-size: 1em;
}
.gensmall {
font-size : 0.65em;
}
td.gensmall a.gensmall, span.gensmall a.gensmall, span.gensmall a.genmed
{
font-size: 1em;
}
span.gensmall select, span.gensmall input.liteoption, span.gensmall a.nav
{
font-size: 1.05em;
}
.mainmenu{
font-size : 0.7em;
}
.cattitle{
font-size: 0.75em;
}
span.cattitle input.liteoption, span.cattitle input.mainoption
{
font-size: 0.9em;
}
.forumlink{
font-size: 0.75em;
}
span.forumlink a.forumlink
{
font-size: 1em;
}
span.forumlink a.gensmall
{
font-size: 0.85em;
}
.nav{
font-size: 0.7em;
}
span.nav a.nav, td.nav span.nav, td.nav span.nav a.nav
{
font-size: 1em;
}
td.nav span.gensmall
{
font-size: 0.9em;
}
.topictitle,h1,h2{
font-size: 0.7em;
}
span.topictitle a.topictitle
{
font-size: 1em;
}
.name{
font-size : 0.7em;
}
span.name a.gensmall
{
font-size: 0.9em;
}
span.name a.name
{
font-size: 1em;
}
.postdetails{
font-size : 0.65em;
}
span.postdetails a.postdetails, span.postdetails a.gensmall
{
font-size: 1em;
}
.postbody{
font-size : 0.75em;
line-height: 125%}
.code{
font-size: 0.7em;
}
.quote{
font-size: 0.7em;
}
.copyright{
font-size: 0.65em;
}
input,textarea, select {
font-size: 0.7em;
}
input.button {
font-size: 0.7em;
}
|
|
Class : ID Admin
Posts : 1437
Registered on : 12/11/2007
Age : 28
Sex : Female
Offline Mail Www
|
Si vos paramètres sont :
- Taille Police principale : 10
- Taille police Liens : 11
- Taille police Titres, Messages & Catégories : 11
/*Tailles relatives*/
body
{
font-size: 1em;
}
th {
font-size: 0.7em;
}
th.thHead,td.catHead {
font-size: 0.7em;
}
td.catHead span.cattitle, td.catHead span.cattitle a.cattitle
{
font-size: 1em;
}
td.catHead td.t-title span.cattitle
{
font-size: 0.7em;
}
th.thHead select, th.thHead input
{
font-size: 1em;
}
.maintitle{
font-size: 1.8em;
}
.gen {
font-size : 0.7em;
}
span.gen a.gen, label.gen span.gen
{
font-size: 1em;
}
span.gen a.copyright
{
font-size: 0.8em;
}
span.gen input, span.gen select, span.gen span.genmed, span.gen a.mainmenu, td.gen input
{
font-size: 1em;
}
.genmed {
font-size : 0.7em;
}
span.genmed input, span.genmed select, span.genmed a.genmed, table.genmed input, table.genmed select, span.genmed a.mainmenu
{
font-size: 1em;
}
.gensmall {
font-size : 0.65em;
}
td.gensmall a.gensmall, span.gensmall a.gensmall, span.gensmall a.genmed
{
font-size: 1em;
}
span.gensmall select, span.gensmall input.liteoption, span.gensmall a.nav
{
font-size: 1.05em;
}
.mainmenu{
font-size : 0.7em;
}
.cattitle{
font-size: 0.7em;
}
span.cattitle input.liteoption, span.cattitle input.mainoption
{
font-size: 1em;
}
.forumlink{
font-size: 0.7em;
}
span.forumlink a.forumlink
{
font-size: 1em;
}
span.forumlink a.gensmall
{
font-size: 0.9em;
}
.nav{
font-size: 0.7em;
}
span.nav a.nav, td.nav span.nav, td.nav span.nav a.nav
{
font-size: 1em;
}
td.nav span.gensmall
{
font-size: 0.9em;
}
.topictitle,h1,h2{
font-size: 0.7em;
}
span.topictitle a.topictitle
{
font-size: 1em;
}
.name{
font-size : 0.7em;
}
span.name a.gensmall
{
font-size: 0.9em;
}
span.name a.name
{
font-size: 1em;
}
.postdetails{
font-size : 0.65em;
}
span.postdetails a.postdetails, span.postdetails a.gensmall
{
font-size: 1em;
}
.postbody{
font-size : 0.7em;
line-height: 125%}
.code{
font-size: 0.7em;
}
.quote{
font-size: 0.7em;
}
.copyright{
font-size: 0.65em;
}
input,textarea, select {
font-size: 0.7em;
}
input.button {
font-size: 0.7em;
}
|