Bannière apparait 2 fois

**demu73** · 27/09/2012, 22h26

Bonjour

J'ai petit souci. La bannière apparait deux fois au lieu d'une seul. Je vous mets le code HTML et le CSS de cette partie de page :

Le HTML

Code html :

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

1
2
3
4
5
6
<body>
<header>
<!--titre logo -->
    <div id="banniere_image">
        <img src="http://www.triebzug.ch/divers/logobilde.jpg" alt="logo" />
    </div>

Le CSS

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
#banniere_image
{
    margin-top: 15px; 
	height: 200px; 
	border: 5px; 
	background-image: url('http://www.triebzug.ch/divers/logobilde.jpg'); 
    background-repeat: no-repeat;
	background-position : center;  
	margin-bottom: 25px; 
}
#banniere_image	
{
    float: center;  
	width: 100%; 
	height: 100%; 
	padding-top: 15px; 
	padding-left: 4px; 
	background-color: #EBDE13(24,24,24); 
	color: #FFF; 
	font-size: 0.8em; 
}

Sur la page ça donne ceci

Merci d'avance de votre aide

**Torgar** · 27/09/2012, 22h53

Bonsoir,

Par où commencer ?

Je pense qu'avant d'aller plus loin il serait judicieux de revoir un peu les bases du CSS. Je t'invite pour cela à te rendre sur cette page. Tu trouveras toutes les ressources nécessaires afin de t'aider dans cette tâche.

À ce que je vois il est normal que ton image s'affiche plusieurs fois. D'une, tu l'affiches en tant qu'image par cette ligne :

Code :

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

<img src="http://www.triebzug.ch/divers/logobilde.jpg" alt="logo" />

Si tu veux l'afficher en image de fond, cette ligne doit être supprimée au profit d'une définition CSS.

De deux, le CSS. La première erreur est d'avoir deux définitions #banniere_image. Une seule suffit. Mais ce n'est pas la seule cause.

Qui plus est, float: center; n'existe pas (Cf. http://torgar.developpez.com/glossai...ent.php#afloat)

Idem ici background-color: #EBDE13(24,24,24);. Tu mélanges deux méthodes (rgb et hexadécimale)

**demu73** · 28/09/2012, 21h05

Merci pour les conseils

Comme la bannière est uniquement pour la page index, j'ai modifié uniquement dans la CSS :

html

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
#banniere_image
{
    margin-top: 15px; 
	height: 200px; 
	border: 5px; 
	background-position : center;  
	margin-bottom: 25px; 
	width: 100%; 
	height: 100%; 
	padding-top: 15px; 
	padding-left: 4px; 
	background-color: #EBDE13; 
	color: #FFF; 
	font-size: 0.8em; 
}

La seul chose qui me gène encore, la bannière ne se centre pas sur la page. Elle reste collée à gauche.

**Bovino** · 28/09/2012, 21h45

Code :

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

text-align: center;

?

**demu73** · 29/09/2012, 16h28

Envoyé par Bovino

Code :

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

text-align: center;

?

J'ai fait le test avec cette idée d'alignement. C'est tout à fait ce que je cherchais, merci à vous.

Le problème étant résolu, j'ai édité mon premier messages et indiqué résolu.

Bannière apparait 2 fois

CSS

Vue hybride

Discussions similaires

Partager

Partager