28172 sujets

CSS et mise en forme, CSS3

Problème de background urgent

Bonjour,

Je suis en train de develloper un site pour des entreprises (qui utilisent principalement IE). J'ai un fond avec une grande image de fond qui marche très bien sous IE mais sa ne le prend pas en compte sous firefox. Je suis désespéré et préssé et je crois que je vais jeter mon ordi par la fenetre, qui sait sa peut marcher...

Merci de votre aide Smiley smile

[code]
#footer {
background-image: url(images/fond-inter.jpg);
width: 900px;
background-repeat: no-repeat;
}
.contenu {
width: 385px;
float: left;
margin-left: 80px;
margin-top:-25px;
}

<div id="footer">
<div class="contenu">
bla bla bla

</div>
</div>
Salut moi j'utilise ce code là pour les images de fond:


background: url(../back.png) no-repeat;


Je pense que ça devrait résoudre ton problème.


V.
@vzc
Non, les deux bouts de code suivants sont équivalents. Le problème ne vient sans doute pas de là. Par contre il faudrait que rollergirl nous donne un peu plus que ça pour pouvoir proposer une ou des solutions (page en ligne, code html) Smiley cligne 


background-image: url(images/fond-inter.jpg);
background-repeat: no-repeat;




background: url(images/fond-inter.jpg) no-repeat;

Modifié par audrasjb (10 Dec 2008 - 11:28)
Bonjour,

Trois mots:
- dépassement
- des
- flottants.

Bonne continuation. Smiley smile

(Pour en dire un peu plus: je parie que l'image de fond s'affiche bien, et ce sur toute la largeur et la hauteur du pied de page. Par contre, il est probable que le pied de page en question soit un bloc de largeur 900px et de hauteur zéro pixels. Firebug -- outil indispensable, ne pas l'utiliser est une faute professionnelle Smiley cligne -- le confirmera, via son onglet «Apparence», lui aussi indispensable.)

(Et pour en dire encore plus, pour le plaisir: le rendu obtenu dans Internet Explorer est dû à un bug d'Internet Explorer. Smiley lol )
Modifié par Florent V. (10 Dec 2008 - 11:30)
Merci pour ta piste.

Je me doutais que l'affichage correct sous IE était une erreur de sa part...

Par contre pour firebub, j'ai été dans apparence et le schéma me dit 1007*1276 alors que j'ai définit ma page à 900 ?

Je vois pas le problème j'ai pas de margin ni rien ??
Dsl mais le site est en local pour le moment, l'hébergeur sera actif dans l'aprem

Voila le css: 



body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin:0px;
	padding:0px;
	background-color: #FFFFFF;
}
a:link, a:hover, a:visited {
color:#FFFFFF;
}

#header {
	height: 129px;
	width: 900px;
	background-image: url(images/head.png);
	background-repeat: no-repeat;
}
#contentD {
	background-color: #685139;
	background-image: url(images/contentD.jpg);
	background-repeat: no-repeat;
	height: 538px;
	width: 477px;
	float: left;
}
.menuG {
	background-image: url(images/fond-gauche-inter.jpg);
	background-repeat: no-repeat;
	height: 503px;
	width: 85px;
	float: left;
}
.interieur_txt {
	background-image: url(images/fond-centre-inter.jpg);
	float: left;
	height: 503px;
	width: 385px;
}

.contenu {
	width: 385px;
	float: left;
	margin-left: 80px;
	margin-top:-25px;
}

.contenu p {
	color: #cccc99;
	margin-top: 50px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
	width: 393px;
	text-align:justify;
}

.contenu li {
	color: #cccc99;
	margin-left: 50px;
	list-style-type: square;
}


.exterieur_txt {
	background-image: url(images/fond-centre2-inter.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 503px;
	width: 322px;
}
.interieur_droite {
	background-image: url(images/fond-droiteinter.jpg);
	background-repeat: no-repeat;
	height: 503px;
	width: 108px;
	float: left;
}

.bleu {
	color: #00FFFF;
}
.menuG li {
	text-align: right;
	padding-right: 30px;
	list-style-type: none;
}
#tete {
	color: #cccc99;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 15px;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
}




.contenu h2 {
	color: #cccc99;
	margin-top: 30px;
	margin-bottom: 15px;
}



#edito {
	width: 350px;
	color: #cccc99;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 80px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 50px;
}
#contentD #signature {
	color: #cccc99;
	width: 350px;
	text-align: right;
	margin-left: 50px;
	margin-top: 50px;
	background-image: url(images/signature.png);
	background-repeat: no-repeat;
	background-position: left;
	height: 106px;
}
#signature h3 {
	color: #FFFFFF;
	margin-top: -15px;
}




#conteneur {
	margin-right: auto;
	margin-left: auto;
	height:auto;
	width:901px;
	background-color: #685139;	


	
}
#contentG {
	float: left;
	height: 538px;
	width: 423px;
	background-color: #685139;
	background-image: url(images/contentG.jpg);
	background-repeat: no-repeat;
}

#BG_menu {
	background-image: url(images/menuSbis.jpg);
	background-repeat: no-repeat;
	height: 65px;
	width: 900px;
}

#BG_menuB {
	background-image: url(images/menuS.jpg);
	background-repeat: no-repeat;
	height: 68px;
	width: 900px;
}
.contenuB {
	height: 386px;
	width: 623px;
	float: left;
	
}
.contenuB p {
	color: #cccc99;
	margin-top: 50px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
	width: 393px;
}
.contenuB h2 {
	color: #cccc99;
	margin-top: 30px;
	margin-bottom: 15px;
}
#footer {
	background: url(images/fond-inter.jpg) no-repeat;
	width: 900px;
}


et le html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link href="a2s.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="conteneur">
<div id="header">



</div>


<div id="footer">

<div class="contenu">
bla bla bla

 </div>
</div>

</div>

</body>
</html>
Je comprend pas Smiley confus Tu as dit que tu avait une grande image de fond à appliquer à ta page, mais dans ce cas là elle devrait soit être sur l'élément body, soit sur ta div conteneur, non ? Là je ne voit pas d'image de fond pouvant couvrir ta page nulle part Smiley confus
rollergirl a écrit :
Par contre pour firebub, j'ai été dans apparence et le schéma me dit 1007*1276 alors que j'ai définit ma page à 900 ?

Oui mais ça c'est pour body, pas pour #footer, non? Il faut d'abord sélectionner le bon élément pour avoir les bonnes infos dans Firebug.
En fait j'ai un conteneur pour centrer mon site avec une couleur de fond, un header avec son fond, un "footer" qui ici est le centre de mon site et qui a une image de fond de 900px (qui est la largeur du site), dedans j'ai contenu qui met en forme mon texte et voila.

Mon problème ici est avec l'image de fond de "footer" qui n'est pas prise en compte.

La piste de Florent V. m'a appris que quelque part j'ai une dimension de 1007x1296, mais je ne vois pas comment c'est possible .
Florent V. >> Quand je sélectionne footer dans Firebug sa me met bien 900x0

C'est normal (enfin je crois ) car je veux que mon footer s'adapte à la taille du contenu
a écrit :
Florent V. >> Quand je sélectionne footer dans Firebug sa me met bien 900x0

C'est normal (enfin je crois ) car je veux que mon footer s'adapte à la taille du contenu


Oui sauf que 900x0 ça veut dire qu'il fait 0px de haut... Pas étonnant qu'on n'en voit pas l'image de fond.

Enleve le float à ton #footer .contenu, ça devrait le remettre dans le flux.
Merci, en faite mon erreur était toute bete, sa ne m'étonne même plus de moi.

En tous cas merci de votre aide j'ai encore appris des trucs Smiley langue
Sujet clos
Aller à