Discussion :

[Spirit94]

Bonjour, j'ai un souis avec l'arière plan de mon header qui ne s'affiche pas sur mon site en ligne.

par contre sur le disque dur en local, l'arrière plan apparait bien. ( Fond bleu plus foncé avec des liseraies rouges de chauqe coté du header )

Il n'y a aucun soucis de chemin de fichier puisqu'en local il apparait sous Firefox, sous IE, sous google Chrome. Il s'agit de l'image arrière_plan_rayure_header8.png

Il n'y a qu'en ligne que l'arrière n'apparait pas.

Code :

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

1
2
3
4
<div id="header">
	<div class="header1"> 		
	</div>
</div>

Code css :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
*{
	padding: 0;
	margin: 0;	
}
 
img{
display: block;
margin: auto;
} 
 
body{
   width: 1000px;
   margin-left: auto; /* Pour centrer notre page */
   margin-right: auto; 
   margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 0px;    /* Idem pour le bas du navigateur */   
   background-image: url("images/header/arrière_plan_rayure_header8.png");
   background-repeat : repeat-x;
   background-color:#0a75b5;
   text-align: center; 
   font-family: Verdana, font-family, Comic Sans MS, Arial, serif, sans-serif;
}
 
 
/* Mon HEADER */
#header{ 
}
.header1{
   width: 1097px;
   height: 475px;
   margin-left: -47px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-right: auto;
   margin-top: 0px;
   margin-bottom: 0px;
   background-image: url("images/header/header4.png");
   }

Merci à vous de m'éclairer sur ce problème d'affichage en ligne.

[Muchos]

1. Supprimez les caractères spéciaux dans les URL (conseillé);
2. Vérifiez l'adresse de l'image. images/header/arrière_plan_rayure_header8.png signifie que l'arrière-plan est dans le dossier HEADER, du dossier IMAGES, qui est lui-même situé dans le répertoire où se trouve le fichier CSS.

ps:

Code css :

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

margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */

FAIL

[Spirit94]

Bonjour MUCHOS, merci de ta participation.
Ben en fait, j'ai enlevé l'accent sur le mot "arrière" dans le fichier CSS en "arriere", j'ai enregistré le fichier CSS, j'ai aussi modifié cet accent sur le nom de l'image dans le répertoire du site.
j'ai mis en ligne le nouveau fichier image et le fichier css en écrasant les autres.
Tu as résolu mon problème.
çà s'affiche bien maintenant, c'était juste une question d'accent que les navigateurs n'aiment pas.
Un grand merci à toi.

[Muchos]

c'était juste une question d'accent que les navigateurs n'aiment pas.
Un grand merci à toi

De rien
Je ne pense pas que ce soit un problème de navigateurs mais un comportement des serveurs Apache.

[Spirit94]

Ok, merci encore.

Un forumiste m'a dis ceci :

Plutôt que de mettre une largeur à body et de le centrer, crée une div qui contiendra ton site, donne-lui la largeur que tu veux, et centre-la ; et laisse juste margin: 0; sur body.

Je ne comprends pas trop.
Il m'a conseillé de nettoyer mon code en :

Code css :

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
body {
    width: 1000px;
    margin: 0 auto;
    background: #0a75b5 url("images/header/arrière_plan_rayure_header8.png") repeat-x;
    text-align: center;
    font-family: Verdana, "Comic Sans MS", Arial, sans-serif;
}
 
/* Mon HEADER */
#header {
 
}
 
.header1 {
    width: 1097px;
    height: 475px;
    margin: 0 auto 0 -47px;
    background: url("images/header/header4.png");
}

Il m'a également suggéré de ne pas mettre çà :

Ça, à proscrire absolument :

Code css :

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

1
2
3
4
*{
    padding: 0;
    margin: 0; 
}

=> Bon je repars dans mon autre topic sur les images SLIDES où je suis en très grande difficulté.