Logo décalé sur petits écrans

[Fuox]

Bonjour,
J'ai un petit problème en ce qui concerne la position de mon logo. En effet, avec ma résolution d'écran (1280*1024), le logo s'affiche normalement.
Je suis allé dernièrement sur un autre poste avec un plus petite résolution, et le logo était décalé vers la droite.

Mon forum de test : http://forum-de-test-cdp.forumactif.com

Merci à tous ceux qui prendront le temps de me répondre

[Anzu]

Bonsoir,

Vérifiez dans Affichage > Page d'accueil > En tête et navigation > Position du logo > que la case "centré" soit cochée.

Cordialement.

[Fuox]

Merci de votre réponse.
Oui, j'avais déjà regardé ça. Je ne pense donc pas que le problème vient de là, car sur les plus grands écrans, tout s'affiche normalement...

[Fuox]

Quelqu'un n'aurait pas une petite idée ?

[Hiro']

Soir'

Et avec

Code:

#i_logo {
margin:0 auto ; }

?

Cdt

[Fuox]

Bonsoir,
Ca ne marche pas non plus... :no

[Kiirii]

Bonsoir,

L'éternel problème des résolutions d'écran...
Pour régler ce problème il faudrait que vous adaptiez votre logo en fonction de la résolution du visiteur ainsi que la largeur de votre forum.

[Fuox]

Merci de votre réponse, dont j'en déduis qu'il faut que je rétrécisse mon logo. Auriez-vous une idée d'une "bonne" taille de logo ?

Edit : J'ai déniché ce code :

Code:

<script type="text/javascript">
  <!--
  if(screen.width < 801) document.body.style.backgroundImage="url('img/bg_800.jpg')";
  else if(screen.width < 1025) document.body.style.backgroundImage="url('img/bg_1024.jpg')";
  if(screen.width < 1281) document.body.style.backgroundImage="url('img/bg_1280.jpg')";
  if(screen.width < 1601) document.body.style.backgroundImage="url('img/bg_1600.jpg')";
  else document.body.style.backgroundImage="url('img/bg_2000.jpg')";
  //-->
</script>

Serait-il possible de l'adapter pour le logo ?

[Kiirii]

Oui bien sûr!

Code:

<script language="JavaScript1.2" type="text/javascript">
if (screen.width < 801)
document.write('<img src="URLDEL'IMAGE" width="LARGEURDEL'IMAGE" height="HAUTEURDEL'IMAGE">');
else if (screen.width < 1025)
document.write('<img src="URLDEL'IMAGE" width="LARGEURDEL'IMAGE" height="HAUTEURDEL'IMAGE">');
else if (screen.width < 1281)
document.write('<img src="URLDEL'IMAGE" width="LARGEURDEL'IMAGE" height="HAUTEURDEL'IMAGE">');
else if (screen.width < 1601)
document.write('<img src="URLDEL'IMAGE" width="LARGEURDEL'IMAGE" height="HAUTEURDEL'IMAGE">');
else
document.write('<img src="URLDEL'IMAGE" width="LARGEURDEL'IMAGE" height="HAUTEURDEL'IMAGE">');
</script>


Ce code sera à placer dans la template Overall_header en-dessous du code du logo centré.

D'ailleurs en spécifiant la hauteur et la largeur l'image sera redimensionnée, il est déconseillé d'agrandir l'image car la qualité s'en verra réduite. En rétrécissant aussi mais c'est moins visible en général.

[Fuox]

Et pensez-vous que l'image ne sera pas redimensionné si je n'indique pas de taille ?

[Kiirii]

Si vous n'indiquez pas de taille c'est comme si vous mettiez une image entre les balises BBCode img. Donc l'image aura donc la taille par défaut.

Le code ne dit juste Si la largeur de l'écran est de X alors j'affiche l'image X. En aucun cas le code ne redimensionne ici, il affiche juste une image selon la résolution, elle peut être de n'importe quelle taille. Donc en spécifiant la largeur et la hauteur c'est vous qui donnerez les dimensions à l'image.

[Fuox]

D'accord, merci. Je teste tout ça et je vous tiens au courant

Edit: A priori ça marche, sauf qu'en fait ça ne reprend pas le CSS attribué au logo (normal, après tout). Le truc c'est comment faire pour que ça le soit ? (le CSS en question est de l'ordre du "margin-top")

Re-Edit: Ça marche (en bidouillant du CSS).

Euh juste, pour voir si ça marche réellement (pour les différentes résolutions), vous avez quelle résolution ?

[Kiirii]

Désolée j'ai la même que vous: 1280x1024

[Fuox]

Zut...
Pas grave, merci pour tous les renseignements que vous m'avez fourni (sur ce topic et d'autres) ! :thanks:

Vous méritez vraiment votre titre de Méritactif !