Header qui ne s'affiche pas

Bon, je remercis ceux qui m'ont aider jusqu'à maintenant, leur aide a porté ses fruits. Mon site est presque fini, le seul truc qui me manque c'est un header. J'ai donc voulu le réaliser mais voila ce que ça donne :
Le texte qui est dedans est le même que celui du footer, j'ai vérifier les liens des images et tout est en ordre.

Mon html (du moins la partie concernée) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="header">
     <div id="bottomheader">
      <div id="bannière">
       <p>Copyright "Kodenji" © 2005-2006. Tous droits réservés, reproduction interdite.</p>    
 
      </div>
     </div>
  </div>

Mon .css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header {
margin-top: 50px;
width: 760px;
background: url("header.png") no-repeat top left;
}
 
#bottomheader {
background: url("bottomheader.png") no-repeat bottom left;
margin-bottom: 20px;
}
 
#bannière p {
padding-bottom: 10px;
padding-left: 20px;

L'id "bannière contient normalement la bannière, pas du texte mais elle n'est pas terminé .

Salut

J'ai une question: Tes div sont imbriqués, ça ne complique pas leur positionnement?

Si mes div sont imbriqués c'est pour permettre au cadre d'être extensible dans le sens de la hauteur en fonction de ce qu'il contient.

Merci! Ce soir, je vais me coucher plus savante.

Le problème vient des images, elles sont trop grandes pour pouvoir "se crasher" comme il faut avec ce petit contenu, rajoute quelques lignes pour voir si ça s'arrange, si ça s'arrange, le problème viendrait bien des images

Déja définir l'attribut position de tes div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position: absolute(ou autre);

devrait pouvoir t aider, au moins définir celui du header serrait peut etre une solution.

On dirait que le haut de ton header est caché par le bas
Essaie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header { 
width: 760px; 
background: url("header.png") no-repeat top left; 
} 
 
#bottomheader { 
margin-top: 50px;
background: url("bottomheader.png") no-repeat bottom left; 
margin-bottom: 20px; 
} 
 
#bannière p { 
padding-bottom: 10px; 
padding-left: 20px;

Pour margin-top de #bottomheader, tu mets la hauteur de ton image header.png

Dis-nous si c'est ok

Merci de vos réponses, en fait pour résoudre mon problème j'ai recopié mot pour mot mon footer (qui s'affichait donc à la place de mon header), puis j'ai remplacé au fur et à mesure les images, les tailles etc...
Finalement, après avoir tout remplacé les images étaient parfaitement bien placé, et donc ça marche parfaitement.

Pour ceux que ça intéresse, mon code est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#header {
width: 760px;
background: url("images/header.png") no-repeat top left;
padding-top: 20px;
margin-bottom: 10px;
}
 
#bottomheader {
background: url("images/bottomheader.png") no-repeat bottom left;
padding-bottom: 6px;
}
 
#bottomheader p {
margin: 0 30px 0 20px;
}
 
.bannière {
width: 726px;
margin-left: -3px;
margin-top: -9px;
}

Et mon xhtml correspondant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 <div id="header">
		   <div id="bottomheader">
				   <p> <img src="images/bannière.jpg" alt="bannière" class="bannière" /> </p>    
		   </div>
		</div>