Taille de bannières et résolution

Bonjour,

Je débute un peu avec le CSS et j'ai une petite question:

J'ai crée une bannière pour mon site mais elle s'affiche mal suivant les résolutions.
Quelqu'un aurait une idée pour qu'elle ait le même positionnement, la même taille et qu'elle occupe le même espace avec n'importe quel résolution?

Le lien:

http://www.joueurs-mythiques.fr/test

Merci de votre aide.
Modifié par NyKo (09 Jun 2007 - 19:27)

Hello,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Je te suggère vivement d'éditer ton message afin de corriger ce problème.

J'ai été un peu trop vite désolé.

C'est édité.

Bonjour,

Tu as placé ta bannière en image de fond d'un bloc si avoir un rendu correct pour des résolution supérieure à 1024, il faut la positionner car par défaut elle sera en repeat-x et repeat-y.
Essaye de la positionner au centre

background-position: center;

et de définir avant une couleur de fond : background-color qui puisse "boucher" l'espace supplémentaire en cas de résolutions supérieures.
par exemple : background-color: #7ca423;

Par exemple:

#header {
	height: 140px;
	padding: 0px;
        background-position: center;
        background-color: #7ca423;
	background: url(../images/ban2.gif) no-repeat;
	}

ghost a écrit :
Bonjour,

Tu as placé ta bannière en image de fond d'un bloc si avoir un rendu correct pour des résolution supérieure à 1024, il faut la positionner car par défaut elle sera en repeat-x et repeat-y.
Essaye de la positionner au centre

background-position: center;

et de définir avant une couleur de fond : background-color qui puisse "boucher" l'espace supplémentaire en cas de résolutions supérieures.
par exemple : background-color: #7ca423;

Par exemple:

#header {
	height: 140px;
	padding: 0px;
        background-position: center;
        background-color: #7ca423;
	background: url(../images/ban2.gif) no-repeat;
	}

En fait j'ai une résolution superieur (1280*800) et c'est parfait. C'est plutot avec des résolutions inferieur que cela me pose problème. Seulement une partie de la bannière s'affiche.
A part réduire sa taille il existe d'autres solutions?

Deux possibilités (voir trois...) :

- Soit tu fais une bannière où l'information est lisible en 800, où les éléments décoratifs apparaissent en 1024, et qui se fond dans une couleur ou un motif de fond sur les côtés pour les résolutions plus grandes. Bref, une image avec une largeur figée en pixels, et on compose pour que ça passe bien dans toutes les résolutions.

- Soit tu trouves un moyen de faire que ton image s'agrandisse ou se réduise en fonction de la largeur de la fenêtre du navigateur. C'est théoriquement possible ainsi :

[b]HTML :[/b]
<div id="entete">
	<img alt="Joueurs mythiques - la crème de la crème" />
</div>

[b]CSS :[/b]
div#entete {
	background: green;
}
div#entete img {
	width: 100%;
}

Mais les algorithmes de redimensionnement des images des navigateurs ne sont pas très bons (pour éviter que ça ne consomme des ressources comme quand on fait du rééchantillonage avec un logiciel de graphisme bitmap), donc le résultat sera probablement assez moyen.

Une autre possibilité consiste à faire une animation Flash (pas animée, en l'occurence) avec ton image, et de lui faire prendre toute la largeur. Il me semble que le redimensionnement des images est plus performant dans ce cas de figure.

- Enfin, dernière possibilité : en Javascript, tu récupères la largeur de body, et suivant la tranche où elle se trouve tu changes l'image.