Logo déforme le forum selon la résolution de l'écran

[Alantka]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

j'ai installé sur mon forum une bannière de fond à la fois large et haute. Grâce à un code CSS, elle s'adapte à toutes les résolutions d'écran sans déformer le forum.

Le problème est le logo du forum, une image en transparence qui permet non seulement aux utilisateurs d'accéder à l'accueil du forum en cliquant dessus, mais aussi d'afficher la bannière de fond (si je supprime le logo, le corps du forum remonte totalement, cachant de ce fait la bannière, comme ici : https://www.zupimages.net/up/17/40/ibgk.png )

En effet, ce logo doit recouvrir en hauteur la totalité de la bannière, seulement la taille de la bannière change d'un écran à l'autre grâce au redimensionnement, mais la taille du logo reste la même.

Pour vous donner un exemple sur mon écran 1920 x 1080, le logo (surligné en bleu) prend toute la taille sans déformer le forum ou l'écran :
https://www.zupimages.net/up/17/40/87lx.png

En revanche, sur mon 1366 x 768, la bannière a "rétréci" (ce qui est bien l'effet voulu), mais le logo de ce fait garde des proportions adaptées pour la bannière d'un grand écran, ce qui déforme énormément le forum et la fenêtre du navigateur, en plus de donner un écart considérable entre la bannière de fond et le corps du forum.

Je recherche donc un moyen de créer un écart, par le biais d'un code ou d'une image en transparence, entre le haut du forum et le corps du forum (permettant d'afficher la bannière de fond) qui puisse être le même pour toutes les résolutions.

Merci de m'avoir lue et merci d'avance pour toute solution susceptible de m'aider.

[MlleAlys]

Bonjour,
Je poste pour voir le lien du forum, j'ai du mal avec les images...
Et je pense que le mieux serait, plutôt que d'utiliser une bannière en fond et une image transparente, de sortir dans le template le logo du corps du forum pour qu'il puisse prendre tout la largeur sans déformations. Et, comme il s'agira d'une véritable image et non d'un fond, la hauteur s'adaptera également.


EDIT : En attendant vous pouvez également réaliser les modifications suivantes pour éviter les défilements sur les petits écran.
Localisez le code css :

Code:

#page-body {
  color: #897a4f!important;
  margin: auto;
  padding: 80px 10px 85px;
  width: 1300px;
}

Supprimez la largeur fixe :

Code:

#page-body {
  color: #897a4f!important;
  margin: auto;
  padding: 80px 10px 85px;
}

Localisez le code suivant :

Code:

.bodylinewidth {
  margin: auto;
  width: 1300px;
}

Supprimez-le.

Localisez le code suivant :

Code:

#i_logo {
  height: 720px;
  width: 1832px;
}

Modifiez la largeur fixe par une largeur relative :

Code:

#i_logo {
  height: 720px;
  width: 100%;
}

De façon idéale, l'option du panneau d'administration > général > configuration > largeur du forum à elle seule doit permettre de modifier la largeur du forum, ici fixée à 98%.

Reste le souci de hauteur adaptative du logo, qui je pense peut être réglé au plus simple par la solution proposée au début de mon message.

[Alantka]

Merci beaucoup pour votre réponse !

J'ai effectué les modifications du CSS à l'instant et le souci de défilement est effectivement réglé sur mon petit écran.

En revanche je ne suis pas sûre de comprendre ce que vous voulez dire par :

je pense que le mieux serait, plutôt que d'utiliser une bannière en fond et une image transparente, de sortir dans le template le logo du corps du forum pour qu'il puisse prendre tout la largeur sans déformations.

Il faudrait que je déplace la partie logo de mon template (overall-header ?), et que je remplace le logo directement par l'image de fond ?

[MlleAlys]

Le but est de sortir la bannière du corps du forum. Sans toucher aux templates, on peut bidouiller en mettant la bannière en fond et en mettant une image transparente à la place du logo.
Mais on peut aussi juste modifier le template pour changer la place de la bannière et la sortir du cadre du forum. Pas besoin d'image de fond ou d'image transparente, la bannière reste en logo :





Votre template a déjà été modifié je suppose.
Repérez cette partie :

Code:


                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <!-- BEGIN switch_logo_left -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="100%" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                            <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>

Il faut la déplacer entre
et la déplacer entre

Code:

{JAVASCRIPT}

et

Code:

    <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Vous pouvez également lui ajouter un id.


EDIT. Ah et puis ensuite ajouter simplement le code suivant pour l'adaptation automatique de la bannière en largeur :

Code:

#i_logo {
  width: 100%;
}

Et voilà.

[Alantka]

Merci beaucoup pour votre aide et vos précieux conseils !
Tout est réglé, je passe en résolu.
Merci encore !