Logo adapté à la résolution de l'écran

[WrittenWitch]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Je viens à peine de commencer à travailler sur le design du forum. Le forum est toujours en construction.
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Déjà un gros merci d'avance et désolé d'ouvrir un topic, j'ai vraiment tout essayé et mon orgueil aurait préféré que je ne vienne pas poster, mais me voilà.

Je vous explique : Je veux une bannière qui fait toute la largeur du forum alors j'ai fait mon image en 1920 de large, je l'ai hébergée et je l'ai ajoutée à mon forum en passant par la gestion d'images, gestion avancée, logo. J'ai ensuite modifié mon template de overall header pour mettre la barre de navigation et le logo en dehors du corps du forum pour que ça puisse prendre la pleine largeur sans déformer le reste du forum.

Ensuite je suis allée dans mon css pour ajouter ceci :

Code:

#i_logo {
    max-width: 100%;
}

Pour que mon logo s'adapte à la résolution de l'écran de tous. Le soucis c'est que, quand j'enregistre mon css avec ce petit bout de code dedans, la bannière disparait tout simplement au lieu de se redimensionner. J'ai vidé mon cache plusieurs fois et testé plusieurs versions de ce code que j'ai trouvés dans les sujets résolus ici sans succès. Je me suis aussi assurée de cocher non à l'option "optimiser mon css". J'ai double vérifié dans mon template et le logo est bien identifié comme i_logo. Quand ce code est absent, la bannière s'affiche, mais elle est beaucoup trop large et crée du scrolling horizontal ce qui est vachement désagréable.

Donc voilà, je ne sais plus quoi essayer et j'accepte de jeter l'éponge et de demander de l'aide.

Merci d'avance !

[Toryudo]

Bonjour !
C'est une question de <table> dans votre cas. Si je prends le code tel que je le vois :

Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
   <tr>
      <td>
         <a href="/">
            <img src="https://i.servimg.com/u/f51/20/43/11/48/bann0210.jpg" id="i_logo" border="0" alt="Bleach Seken" vspace="1" />
         </a>
      </td>
      <td align="center" width="100%" valign="middle">
      <!-- <div class="maintitle"><h1>Bleach Seken</h1></div><br /><span class="gen">Forum rpg Bleach au contexte original éloigné du manga, venez rejoindre les 13 divisions du Gotei, les forces de l'Espada ou l'armée des Sternritters Quincy.<br />&nbsp; </span>-->
      </td>
   </tr>
</table>

Vous avez un tableau <table> avec une ligne <tr> et deux colonnes <td>.
Si on regarde comment sont définies les colonnes, la première n'a rien de spécial quand la deuxième a width="100%".
Votre code indique donc que la deuxième colonne, qui ne contient que du code commenté, doit faire 100% de la taille de la table, ce qui laisse donc 0% à la colonne qui contient votre logo ! Si vous ajoutez un width="100%" sur la première colonne, ou que vous supprimez carrément la seconde qui ne contient rien, alors hop, le logo va apparaitre !

Ps : dans le CSS,
- un max-width: 100% ne fonctionnera que sur les écrans < à la taille de l'image, c'est à dire 1080px
- un width: 100% va fonctionner pour tous les cas
Plutôt préférer width: 100% ?

[WrittenWitch]

Et oui c'était juste ça ! Je l'aurais cherché tellement longtemps. J'avais enlevé le titre du forum et la description, mais j'ai pas enlevé la colonne. Merci beaucoup !! Et merci pour le ps, je vais aller modifier mon css tout de suite pour ne pas l'oublier !