Etendre un background à la largeur d'un div

**jeanmarc7575** · 13/05/2009, 17h21

Bonjour,

mon problème en image...

J'aimerais que le background bleu aille jusqu'au bout de la fenetre.

Mon code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#header_leiste {
	background-image: url(../img/background.jpg);
	background-repeat:repeat-x;
	height: 41px;
	width: 100%;
}
 
#logo {
	position: absolute;
	top: 15px;
	right: 15px;
}

Code html :

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

1
2
3
4
5
6
<body>
	<div id="header_leiste">
		´<div id="logo"><img src="img/chart.png"></div>
	</div>
	<div style="width:1000px; height: 500px;background-color: black;color: white;">test</div>
</body>

Merci de votre aide.

**devyan** · 13/05/2009, 17h41

Salut,

Normalement, il devrait suffire d'oter width:100% qui limite la largeur de ton DIV à celle de la zone visible du navigateur.

**Poulpynette** · 13/05/2009, 18h00

Bonjour jeanmarc7575,

Je te conseille d'utiliser les balises code pour une meilleure lisibilité de tes messages et de mettre un titre plus parlant la prochaine fois.

"Problème de CSS" : bah vi on se doute vu qu'on est dans le forum CSS

Sinon pour ton souci, j'ajouterais d'enlever également la hauteur fixe si le fait d'enlever la largeur ne suffit pas.

**jeanmarc7575** · 14/05/2009, 09h26

J'ai tenté d'enlever width: 100% mais en vain ...

**Macmillenium** · 14/05/2009, 09h32

Bonjour,

Enlève aussi le width:1000px et rajoute un margin:0 et padding:0 sur le body.

**Poulpynette** · 14/05/2009, 09h42

Envoyé par jeanmarc7575

J'ai tenté d'enlever width: 100% mais en vain ...

Et la hauteur fixe dont je parlais juste avant ? ^^

**jeanmarc7575** · 14/05/2009, 12h14

Le height je ne peux pas l'enlever il le faut !

Le width:1000px je peux pas non plus !

Le probleme se pose uniquement lorsque je reduit la fenetre du navigateur, lorsque je srcroll ver la droite pour voir le coté droit du div noir, le background du header ne suit pas !

**devyan** · 14/05/2009, 12h49

Essaye en mettant "position:absolute" sur body.

Mais dans ce cas tu devras aussi lui supprimer les marges (margin:0)

**Poulpynette** · 14/05/2009, 14h26

Envoyé par jeanmarc7575

Le height je ne peux pas l'enlever il le faut !

C'est dommage dans ce cas, car j'ai eu le même problème il y a quelques temps, et laisser une hauteur fixe te posera problème.

Tu peux toujours ruser en mettant un élément dans ton div qui aura la hauteur désirée, et ainsi virer la hauteur fixe sur le div parent.

**devyan** · 14/05/2009, 14h37

Envoyé par Poulpynette

C'est dommage dans ce cas, car j'ai eu le même problème il y a quelques temps, et laisser une hauteur fixe te posera problème.

Tu peux toujours ruser en mettant un élément dans ton div qui aura la hauteur désirée, et ainsi virer la hauteur fixe sur le div parent.

Oui tu dois pouvoir "ruser" en utilisant : min-height et line-height qui devraient t'assurer que ton élément ne fera pas moins de cette hauteur mais qui lui laisse la possibilité de s'agrandir si besoin

**Poulpynette** · 14/05/2009, 14h43

Attention pour min-height qui je crois n'est pas compris par IE.

Mais un élément fils peut avoir une hauteur fixe, tant que l'élément qui s'étire n'en a pas, c'est bon

**desert** · 14/05/2009, 14h59

Bonjour,
Si tu ne peux pas retirer le width:1000px, pourquoi ne pas simplement l'appliquer sur le div qui ne s'étend pas ?

Code css :

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

1
2
3
4
#header_leiste {
    ...
    width: 1000px; /* au lieu du 100% */
}

**devyan** · 14/05/2009, 15h02

Envoyé par Poulpynette

Attention pour min-height qui je crois n'est pas compris par IE.

Mais un élément fils peut avoir une hauteur fixe, tant que l'élément qui s'étire n'en a pas, c'est bon

min-height pour IE et line-height pour FF et autres qui ne gèrent pas min-height justement

**Macmillenium** · 14/05/2009, 15h08

Envoyé par devyan

min-height pour IE et line-height pour FF et autres qui ne gèrent pas min-height justement

Heu ... devyan tu inverse là

C'est plutôt IE6- qui ne gère pas le min-height

**devyan** · 14/05/2009, 15h43

Envoyé par Macmillenium

Heu ... devyan tu inverse là

C'est plutôt IE6- qui ne gère pas le min-height

Possible

**He@deR** · 14/05/2009, 16h10

salut,

c'est plutôt

Code :

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

 width:100%;

qui pose problème, le block

Code :

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

1
2
3
4
 
<div id="header_leiste">
		´<div id="logo"><img src="img/chart.png"></div>
	</div>

suit la largeur de la fenêtre mais pourtant

Code :

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

1
2
 
<div style="width:1000px; height: 500px;background-color: black;color: white;">test</div>

garde sa taille fixe, c'est pour cela qu'il y a ce décalage lorsque tu fais varier la largeur de la fenêtre.
le mieux serait de mettre tous soit en pourcentage, soit en pixel.

Etendre un background à la largeur d'un div

Dimensionnement en CSS

Discussions similaires

Partager

Partager