28173 sujets

CSS et mise en forme, CSS3

Background-image impossible a afficher dans Firefox ! Rage !!

Pages :
Bonjour à tous !
Cela fait maintenant qq mois que je viens très régulièrement sur ce site pour y trouver toutes les infos dont j'ai besoin, mais là malgrès une recherche assidue dans les articles, le forum etc..., et bien je ne trouve pas la solution.

Voilà, je fais actuellement le thème (pour un cms) d'un site.
J'en suis à la 19eme version Smiley eyecrazy .
Jusqu'à présent, j'étais un peu brouillon et j'ai donc décidé de faire le ménage.
Mais voilà, j'ai du trop faire le ménage parceque maintenant j'ai une image en background-image qui s'affiche pas sous Firefox et correctement sous IE.

J'ai lu le post où il y avait le même prb et en désactivant AdBlock ça a marché, mais pas dans mon cas.

Pour vous situer, il y a un conteneur "global" qui centre la page avec une largeur de 960px.
Dans le conteneur, il y a un bandeau, un menu gauche, un contenu et enfin un pied de page.
Rien que du classique pour la majorité d'entres vous ! Smiley prie

J'ai choisi d'afficher l'image de fond dans le "global", mais là prb:

Voici le css du global : 

.global {
	width: 960px;
	padding-bottom:5px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	background-color: #446693;
	background-image: url('/images/bg_menu.gif');
}


Vous voyez une erreur ??

En vous remerciant vivement pour votre aide et vos pistes !!
Modifié par geeko (30 Jun 2006 - 09:47)
Bonjour geeko et bienvenue parmi nous ! Smiley smile

Les apostrophes dans le chemin de ton image sont peut-être à l'origine de ton problème.



background-image: url(/images/bg_menu.gif);
Merci de ta réponse, mais ça n'a rien changé.
Par ailleur, j'ai d'autres images qui utilisent aussi les apostrophes et elles s'affichent correctement.

Peut-être est-ce du à l'ensemble ?
Je peux mettre le code CSS mais il est long.
Dis moi si ça pourrait aider que je le mette.
Modifié par geeko (30 Jun 2006 - 09:44)
Le chemin est bon je l'ai testé.

Par contre je viens de remarquer qq chose de bizar.
Si j'enlève l'en-tête, j'ai une fine bande en haut de la page avec justement la fameuse image mais elle ne s'affiche pas sur le reste de la page.
As-tu essayé de commenter toutes tes div pour ne laisser que ton body. Peut étre un background sur tes div masque celui du body...
Modifié par coccimaster (30 Jun 2006 - 09:58)
Désolé, le réveil, besoin de café... Smiley sweatdrop
Au lieu de ne laisser que le body, je voulais dire de ne laisser que le global. Au passage, mets lui une hauteur et une bordure pour être certain qu'il est bien dimensionné...
Salut,

essaye :


/*background-color: #446693;*/ vire ça

	background: url(/images/bg_menu.gif);   /*vire [i]-image[/i]*/

Modifié par Hum (30 Jun 2006 - 10:30)
Hum :
Ca marche pas non plus.

coccimaster :
l'image s'affiche si je mets une hauteur fixe.
J'ai rajouté le reste, l'image s'affiche mais du coup pas sur toute la hauteur.

J'ai ajouter background-repeat : repeat-y;
Mais ça n'a rien changé.
Deux-trois petites précisions;: comment sont positionnées tes div dans ton global; est-ce que ce sont des flottants, et si oui, quand tu retire la hauteur mais laisse la bordure, ça te donne un truc tout porrave du genre tous tes bloc en dehors de ton global.

Dans ce cas essaye
.global{position: absolute;}

ou, mais ça risque de pas marcher sous IE, il faudra bidouiller,
.global:after{content:""; clear:both}

ou encore rajoute sous ton global un <hr /> et dans ton css
hr{clear:both; border:0px;}


Si tu es positionné en flottant, il y a un article qui t'expliquera bien mieux que moi ici

En esperant que dans tous ça quelque chose marche a+
salut,
Si tu ne spécifie pas de hauteur a ton conteneur je crois que l'image ne sera repeter qu'une seule fois sur l'axe y sous FF.
Il me semble egalement que tu peut enlever 'image' a background :
background: #446693 url(fd_input.gif);


+
lav_01 a écrit :
salut,
Si tu ne spécifie pas de hauteur a ton conteneur je crois que l'image ne sera repeter qu'une seule fois sur l'axe y sous FF.
Il me semble egalement que tu peut enlever 'image' a background :
background: #446693 url(fd_input.gif);


+


Si j'enlève le chemin, je n'aurais plus l'image de fond.

La seule chose que j'ai réèllement modifiée c'est l'utilisation des class au lieu des id.
J'ai vu pour ça le tuto ici :http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Construire-un-site-sans-tableaux

Quelle est la différence entre class et id ?

Merci
Modifié par geeko (30 Jun 2006 - 11:39)
re,

Il faut effectivement que tu mette ton chemin, je ne te disais pas de l'enlever
mais d'enlever
a écrit :
tu peut enlever 'image' a background :

la notation etait certes mal exprimée Smiley confused mais avait juste valeur d'exemple.
C'est le fond bleu que tu veut repéter ??

+
Oups toutes mes excuses !
J'ai essayé, sans succès.

L'image que je veux répéter, c'est celle qui est avec un fond bleu, puis continu sous le contenu central avec le fond blanc puis de nouveau fond bleu pour le bord droit.
geeko a écrit :
Quelle est la différence entre class et id ?

Un id, c'est l'identifiant unique d'un objet dans la page, on ne doit donc trouver qu'un id donnée dans la page. Il est unique car c'est lui qui permet de "récupérer" un élément précis, en javaScript par exemple. Une class, c'est un groupe d'objets qui ont des propriétés communes. La différence, au niveau du css, c'est que l'id aura plus de "poids" lors des résolutions de conflits. Par exemple, tu as ce code : 
*****HTML*****

<div id="box"><span class="texte">bubu</span></div>

*****CSS*****

#box > *{color: #FF0000;}
.texte  {color: #00FF00;}
span  {color: #00FF00;}

Les 3 régles peuvent s'appliquer au span texte, il y a un calcul sur les 3 sélecteurs et la régle du plus fort s'applique. En gros id > class > élément simple

Voilou
Si j'ai bien compris, étant donné que j'utilise qu'un fois le global, il vaut mieux donc que j'utilise un id.
Pages :
Sujet clos
Aller à