28172 sujets

CSS et mise en forme, CSS3

Background image en pied de page

Bonsoir,
Je débute en css...
J'ai essayé toute cette après midi de réaliser un petit exercice CSS mais je n'y suis pas arrivé Smiley decu
Voila le but de ce petit entrainement était de réaliser une page avec deux backgrounds, un en tête de page, l'autre en pied de page.

J'ai tout essayé dans les limites de mes compétences (patience) mais rien à faire... Ca ne marche toujours pas.

[résolu] > De plus je rencontre un problème avec IE, les images ne s'affichent même pas.

Voila, j'ai besoin d'un petit coups de pouce... Smiley sweatdrop
Merci d'avance

Pass1


index.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=utf-8" />
<link media="screen" rel="stylesheet" href="style.css" />
<!-- <script src="javascript.js" type="text/javascript"></script> -->
<title>dev+</title>
</head>
<body>
<div id="head-background"></div>

<div id="primary-content">

<div id="footer-content">
	pofjzeopfjzpefofjzepofj<br />
	pofjzeopfjzpefofjzepofj<br />
	...
	pofjzeopfjzpefofjzepofj<br />
	pofjzeopfjzpefofjzepofj<br />

</div>
</div>

<div id="foot-background"></div>
</body>
</html>


style.css
body { 
	background-color: #544815; 
	margin:0; 
	padding:0;
	z-index:0;
}

#primary-content{
width: 800px;
margin: auto;
margin-top: -20px;
margin-bottom: -355px;
z-index:10;
}


/*FOOTER CONTENT*/
#footer-content{
width:100%;
background-color: #665464;
}

/*BACKGROUND*/
#head-background{
	z-index:1;
	width: 100%;
	height: 164px;
	background: url(images/1.gif)0px -56px repeat-x;
}
#foot-background{
	z-index:2;
	bottom: 0;
	width: 100%;
	height: 355px;
	background: url(images/1.gif)0px -220px repeat-x;
}

Modifié par pass1 (29 Apr 2009 - 00:29)
Bonjour,
Mon problème est toujours d'actualité.
J'espère que quelqu'un pourra m'aiguiller.

Merci d'avance,
Pass1
Bonjour,

1. Tu peux virer toutes les propriétés z-index de ton code, elles sont purement et simplement ignorées par les navigateurs. Voir la secton «Apprendre» pour le pourquoi du comment (faire une recherche sur "z-index", par exemple).

2. Pourquoi utiliser une DIV pour placer cette image de fond?

3. Les blocs avec des marges négatives telles que margin-bottom: -300px, c'est un bricolage foireux, à éviter autant que possible (notamment si on ne sait pas précisément ce que l'on fait). Smiley cligne
Bonsoir,

Le problème de background persiste... -_-
J'ai testé les différents types de position(relative|absolute) mais toujours rien.

a écrit :
2. Pourquoi utiliser une DIV pour placer cette image de fond?

C'est une mauvaise pratique?

a écrit :
3. Les blocs avec des marges négatives telles que margin-bottom: -300px, c'est un bricolage foireux, à éviter autant que possible (notamment si on ne sait pas précisément ce que l'on fait). cligne

Oui c'est vrai.

Néanmoins, j'ai réussi à résoudre le problème de compatibilité sous IE. 

/*background: url(1.gif)left -220px repeat-x;*/ Je ne comprends pas pourquoi cette ligne passe pas sous IE...

background-image:url(1.gif);
background-repeat: repeat-x;
background-position: left -220px;


Merci d'avance
Bonne soirée,
Pass1
Modifié par pass1 (27 Apr 2009 - 21:08)
Bonsoir,

Pour illustrer mon problème un petit schéma :
http://img230.imageshack.us/img230/916/sdz.jpg

A gauche ce que j'ai actuellement avec quelque modif. (j'ai mis les div les une après les autre)
A droite ce que je cherche à réaliser, sachant que le fond rouge doit être à la fin du contenu(et dessous celui-ci).

Est-ce que la disposition de mes divs est la bonne?

Je reattaquerai les tests ce weekend,
bonne nuit.
Modifié par pass1 (29 Apr 2009 - 00:38)
Sujet clos
Aller à