[Résolu] Problème de background sous firefox

Bonjour,


J'aimis une image de fond pour un de mes titre, seulement cette image n'apparait pas sur firefox.

Je fais des sites webs depuis unmoment mais jen'ai jamais fait tout un site avec des feuilles de style du coup quelque fois je bloque.; j'ai un bouquin très bien fait qui me guide pas à pas mais bon il me reste quand même quelques interrogations.

Voici le code de ma class :

.bandeautitre2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	background-color: #000000;
	background-attachment: fixed;
	background-image: url(../images/fd_titre2.gif);
	background-repeat: no-repeat;
	background-position: left;
	text-align: left;
	width: 335px;
	height: 28px;
	vertical-align: middle;
	font-style: italic;
	padding-top: 2px;
	padding-left: 60px;
	font-weight: bold;
	background-color: #FFFFFF;
}

édiat par Igor:c'est celui-ci qu'il fallait édité

Merci pour votre réponse
Modifié par mary (08 Feb 2006 - 15:44)

Bonjour Mary et bienvenue sur Alsacréations,

Merci d'éditer ton message pour présenter lisiblement ton code comme demander dans les règles à l'aide de [ code] et [ /code] (sans les espaces.

Bonjour,

Tu définis deux fois la propriété "background-color", il y a peut-être un problème à ce niveau.
Tu peux utiliser une notation plus compacte:

background: #000000 url(le_chemin_vers_ton_image) no-repeat fixed top left;

Sans le code html, je ne sais pas si ça va répondre à ta question. Si tu peux envoyer une adresse pour tester.

+

Euh, désolée pour mon code, il me semblait qu'il était assez lisible pourtant.
Je ferai un effort la prochaine fois.. Faut dire que je suis à la bourre et qu'il faut que je corrige cette erreur assez rapidement donc j'ai pris le code tel quel et je l'ai collé.

Mille excuses.

Sinon, non, j'ai retiré effectivement la deuxième définition du background color et ça ne fonctionne toujours pas.
Je ne peux pas mettre le site sur un serveur de test, ce serait trop compliqué sorry.

Je vais essayer de simplifier le code p'tèt queça va fonctionner ...
Merci .. Je vous dis quoi.

Non, ça ne fonctionne pas.. Mince alors...
En fait, j'ai ça aussi lorsque je défini une image de fond pour mes boutons..

Sur mon ordi, sous firefox, aucune image de fond ne fonctionne ... Pourtant j'ai le version 1.0.7..

mary a écrit :
Euh, désolée pour mon code, il me semblait qu'il était assez lisible pourtant.
Je ferai un effort la prochaine fois..

Pourquoi pas tout de suite ? Tu as juste à éditer ton premier post avec le bouton "éditer" en haut à droite.

Bonjour mary,

Met ton "background-color" après ton "background-image" comme ceci :

.bandeautitre2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
background-attachment: fixed;
background-image: url(../images/fd_titre2.gif);
background-repeat: no-repeat;
background-position: left;
background-color: #000000;
text-align: left;
width: 335px;
height: 28px;
vertical-align: middle;
font-style: italic;
padding-top: 2px;
padding-left: 60px;
font-weight: bold;
background-color: #FFFFFF;
}

Modifié par papillon41 (08 Feb 2006 - 11:29)

ça ne change rien bouhouhou..
Mon code est le suivant (j'espère bien rédiger mon message cette fois..)

.bandeautitre2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	background:url(../images/fd_titre2.gif) no-repeat fixed top left;
	background-color: #FFFFFF;
	width: 335px;
	height: 28px;
	vertical-align: middle;
	font-style: italic;
	padding-top: 2px;
	padding-left: 60px;
	font-weight: bold;
}

Essayes le code d'Orlondow:

background: #000 url(../images/fd_titre2.gif) no-repeat fixed top left;

C'est à dire sans déclarer background-color.

ça ne fontionne pas...
Mon dieu que c'est compliqué... C chouette les css mais pour que les mep soient tout à fait compatibles, il faut jongler...
D'un côté c'et bien j'apprends plein de nouveaux trucs.

Voici mon code :

.bandeautitre2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
 	background : #000 url(../images/fd_titre2.gif) no-repeat fixed top left;
	width: 335px;
	height: 28px;
	vertical-align: middle;
	font-style: italic;
	padding-top: 2px;
	padding-left: 60px;
	font-weight: bold;
}

Essayes de ne mettre que la déclaration de background dans un premier temps. voir si ça fonctionne, et rajoute une à une les autres.

Tu es sûr que tu n'a pas 3 mn pour mettre ta page en ligne ?

Je vais essayer de mettre ma page sur le serveur cette aprem. Merci et j'espère que vous serez encore là.

me revoilà...

Voici l'adresse de mon site de test : http://testcss.tnl.be/index.htm

et voici l'adresse vers mes feuilles de style :

Je vouspréviens je commence donc si vous travez ça un peu brouillon c'est normal... Il fautun début à tout. Je me sers de mon bouquin CSS2 (super bouquin)dont la vignette est présentée ci dessus...

http://testcss.tnl.be/styles/charpente_index.css

http://testcss.tnl.be/styles/contenu_index.css

Je me sers de dreamweaver pour les créer.
Voilà voilà.
Donc je résume mon problème ce situe au niveau de mon style :

.bandeautitre2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
 	background : #000 url(../images/fd_titre2.gif) no-repeat fixed top left;
	width: 335px;
	height: 28px;
	vertical-align: middle;
	font-style: italic;
	padding-top: 2px;
	padding-left: 60px;
	font-weight: bold;
}

Merci pour votre aide
Modifié par Felipe (08 Feb 2006 - 15:38)

salut, avec ce code chez moi l'image d'arrière-plan s'affiche correctement :

.bandeautitre2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
 	background : url(images/fd_titre2.gif) #fff no-repeat top left;
	width: 335px;
	height: 28px;
	font-style: italic;
        padding: 2px 0 0 60px;
	font-weight: bold;
}

Après faudra jouer avec les padding et le positionnement de ton image pour la mettre exactement où tu veux.

a+

yes!!! alléluïa merci beaucoup ça fontionne youpeeee.
Bises bises!!

Maintenant autre question... Comment puis je faire pour que le fond de de ce bandeau ait la bonne dimension sur Firefox ? Sur iexplore il fait la bonne taille w=335 h=28 mais sur Firefox, il s'arrête à la fin de mon texte.

Encore merci
Super ce forum!!

Tu peux ajouter à ta classe :

display: block;

afin que ta balise span ne s'affiche plus en tant que balise inline mais comme un block. Là les dimensions que tu as spécifiées seront prises en compte.

a+
Modifié par Daweed (08 Feb 2006 - 15:33)

Re yes ! Franchement merci merci et encore merci c top cool de la mort qui tue.

Trop contente tu m'enlèves un poid.

Bonjour,

le sujet peut-il être considéré comme [Résolu]? (promis c'est la dernière fois qu'on t'embête )

Oui...
Encore merci et vous ne m'embêtez pas.. Pas du tout.