Ajouter une bannière à une page jsp

cs_cosworth Messages postés 40 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 16 mai 2008 - 4 avril 2008 à 11:43
cs_cosworth Messages postés 40 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 16 mai 2008 - 8 avril 2008 à 11:32
bonjour,
j'ai une page index.jsp, header.jsp et footer.jsp
en fait je veux ajouter une bannière à la page index cette banière est une image qui représente le nom de l'application (.jpg ou .gif)
je veux que l'image soit bien étirée pour couvrir tout le haut de la page index.jsp
si c'est possible j'utiliserai les css mais comment ?

7 réponses

Ombitious_Developper Messages postés 2333 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 26 juillet 2013 38
4 avril 2008 à 11:59
Salut:

Personnellement, je préfère séparé les feuilles de style CSS et les images et faisant une arborescence comme la suivante.

|-----------+ css
|           |------------- stylesheet.css
|           |------------- ...
|
|-----------+ images
            |------------ picture.png

En CSS:

.top {
    background-image: URL('../images/picture.png');
    background-repeat: no-repeat;
}
0
cs_cosworth Messages postés 40 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 16 mai 2008
4 avril 2008 à 14:57
merci pour ton aide cher frère,
pour cette application ya un seul fichier css et les images sont dans un dossier séparé, moi je veux inserer une bannière dans la page index et je veux savoir le code que je dois ajouter pour faire cela en tenant compte qu'il ya un fichier header.jsp et footer.jsp
0
Ombitious_Developper Messages postés 2333 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 26 juillet 2013 38
4 avril 2008 à 16:11
Salut:

Il faut faire attention au chemin où se trouve les images.

Aussi, pour les dimensions réelles (width, height) de l'images, ici j'ai mis des valeurs fictives.

// Fichier CSS

.banner {
    background-image: URL('../images/banner.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 250px;
}

On crée un élément HTML qu'on lui attribut la régle de style CSS.

// Fichier JSP
0
cs_cosworth Messages postés 40 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 16 mai 2008
6 avril 2008 à 22:15
merci pour votre réponse, en fait j'ai pu ajouter l'image mais sa taille n'est pas convenable, moi je veux qu'elle soit étirer selon la taille de la fenetre, je croix que c'est un problème au niveau css.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Ombitious_Developper Messages postés 2333 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 26 juillet 2013 38
7 avril 2008 à 22:44
Salut:

Généralement, (d'après ce que j'ai remarqué) on utilise une image de taille déterminée et au lieu d'étirer cette image (ce qui n'est pas une bonne pratique) on utilise généralement l'attribut background-color.

L'attribut background-color permet de définir la couleur de fond.

Le principe est en fait très simple, supposons qu'on a une bannière content une image et le fond de cette image est par exemple bleu ciel. Alors on définit l'attribut background-image comme étant la couleur bleu ciel ce qui donne illusion que c'est la continuité de l'image alors que ce n'est pas le cas.

Personnellement, j'utilises la pipette de GIMP pour déterminer le couleur de fond en notation héxadécimale (#??????).

.banner {
    background-color: URL("../images/logo.png");
    background-color: #EE00FF;
    background-repeat: no-repeat;
}
0
Ombitious_Developper Messages postés 2333 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 26 juillet 2013 38
7 avril 2008 à 22:45
Salut:

Petite erreur de frappe:

Le principe est en fait très simple, supposons qu'on a une bannière
content une image et le fond de cette image est par exemple bleu ciel.
Alors on définit l'attribut background-color comme étant la couleur
bleu ciel ce qui donne illusion que c'est la continuité de l'image
alors que ce n'est pas le cas.
0
cs_cosworth Messages postés 40 Date d'inscription mardi 21 novembre 2006 Statut Membre Dernière intervention 16 mai 2008
8 avril 2008 à 11:32
merci infiniment pour votre aide cher frère,

je vais essayer votre solution et vous dire le resultat

à bientot
0