• Eviter le dépassement à droite d'une bannière très large

    Pour éviter le dépassement à droite d'une bannière très large, il est nécessaire d'utiliser une css.

    En effet, l'image de bannière se trouve directement dans une cellule du header, ce qui implique l'affichage de l'image entière. Si elle est trop grande, même avec un forum en pourcentage, proportionnel à la résolution d'écran du visiteur, ou à l'utilisation du mode fenêtré de son navigateur, elle sera entièrement affichée, et il y aura un dépassement très peu esthétique à droite, ainsi qu'un ascenseur en bas d'écran.

    Pour éviter cela, il faut mettre l'image en fond de cellule (en background) à l'aide d'une css supplémentaire.

    Dans les options du style, il y a en bas deux cases de définitions css supplémentaires. Ne jamais toucher à la première, au risque d'avoir de gros problèmes de mises en page lors de la mise à jour éventuelle de vBulletin. Dans la seconde case, on peut rajouter autant de classes css que l'on souhaite, selon ses besoins.

    Pour l'image de bannière, le logo en fait, nous allons créer une classe appelée logo :

    .logo { background: #000000 url(style/misc/logo.jpg) no-repeat; width: 100%; height: 150px; }

    où :
    background: #000000 est la couleur de fond de votre forum
    url(style/misc/logo.jpg) est l'url de votre bannière
    height: 150px est la hauteur de votre bannière.

    Voilà pour la définition de la classe. Il ne reste plus qu'à l'appeler dans le header.

    Voici le code de base (non modifié) du header, dans le style par défaut de vBulletin :

    Code HTML:
    <!-- logo -->
    <a name="top"></a>
    <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
    <tr>
     <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
     <td align="$stylevar[right]" id="header_right_cell">
      <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
     </td>
    </tr>
    </table>
    <!-- /logo -->
    <!-- content table -->
    $spacer_open
    $_phpinclude_output
    $ad_location[ad_header_end]
    Dans la table de logo, nous pouvons simplement supprimer le deuxième <td...>, car au vu de la largeur de la bannière, il devient inutilisable.

    Pour le premier <td...>, il suffit de le remplacer par :

    Code HTML:
    <td class="logo"></td>
    Le header se présente donc maintenant ainsi :

    Code HTML:
    <!-- logo -->
    <a name="top"></a>
    <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
    <tr>
     <td class="logo"></td>
    </tr>
    </table>
    <!-- /logo -->
    <!-- content table -->
    $spacer_open
    $_phpinclude_output
    $ad_location[ad_header_end]
    Voilà, c'est fait !

    Désormais, votre bannière, quelle que soit sa largeur, ne dépassera plus à droite de votre forum. Ne s'affichera que la partie nécessaire pour l'écran du visiteur.
  • Donations Dons

    Si vous aimez ce site et que vous souhaitez nous supporter, vous pouvez effectuer un don. Tous les dons sont gracieusement acceptés.

    Indiquez la valeur souhaitée au format « xx.xx ».


    Sélectionnez votre monnaie et le montant du don que vous souhaitez effectuer, puis cliquez sur l'image ci-dessous.

  • Horloge

  • Calendrier

    Mars   2024
    Di Lu Ma Me Je Ve Sa
    1 2
    3 4 5 6 7 8 9
    10 11 12 13 14 15 16
    17 18 19 20 21 22 23
    24 25 26 27 28 29 30
    31
  • Derniers mods Derniers mods

    [Additions majeures] - vbBux &...
    - par Dadoo

    [Chat] - Demande de...
    - par lasilix

    [Portails] - vBadvanced...
    - par Dadoo

    [Additions majeures] - Librairie de...
    - par Dadoo

    [Additions majeures] - microNEWSLETTER...
    - par Dadoo

    [Additions majeures] - Tournois &...
    - par Dadoo

    [Additions majeures] - Clavier Virtuel
    - par Greggg

    [Outils d'administration] - Envoyer un...
    - par Greggg

    [Outils de modération] - Outils de...
    - par Greggg

    [Add-ons] - Copyright...
    - par Greggg