Etendre un background à la largeur d'un div

Version imprimable

Bonjour,

mon problème en image...

http://youmeet.intofacto.com/test.png

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

Mon code:

Code:

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:

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.

13/05/2009, 17h41
devyan

Salut,

Normalement, il devrait suffire d'oter width:100% qui limite la largeur de ton DIV à celle de la zone visible du navigateur.
13/05/2009, 18h00
Poulpynette

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.
14/05/2009, 09h26
jeanmarc7575

J'ai tenté d'enlever width: 100% mais en vain ...
14/05/2009, 09h32
Macmillenium

Bonjour,

Enlève aussi le width:1000px et rajoute un margin:0 et padding:0 sur le body.
14/05/2009, 09h42
Poulpynette

Citation:

Envoyé par jeanmarc7575

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

Et la hauteur fixe dont je parlais juste avant ? ^^
14/05/2009, 12h14
jeanmarc7575

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 !
14/05/2009, 12h49
devyan

Essaye en mettant "position:absolute" sur body.

Mais dans ce cas tu devras aussi lui supprimer les marges (margin:0)
14/05/2009, 14h26
Poulpynette

Citation:

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.
14/05/2009, 14h37
devyan

Citation:

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 ;)
14/05/2009, 14h43
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 ;)
14/05/2009, 14h59
desert
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:

1 2 3 4 #header_leiste { ... width: 1000px; /* au lieu du 100% */ }
14/05/2009, 15h02
devyan

Citation:

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 ;)
14/05/2009, 15h08
Macmillenium

Citation:

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à :mrgreen:
C'est plutôt IE6- qui ne gère pas le min-height ;)
14/05/2009, 15h43
devyan

Citation:

Envoyé par Macmillenium

Heu ... devyan tu inverse là :mrgreen:
C'est plutôt IE6- qui ne gère pas le min-height ;)

Possible :D
14/05/2009, 16h10
He@deR

Etendre un background à la largeur d'un div :piste de solution
salut,

c'est plutôt

Code:

width:100%;

qui pose problème, le block
Code:

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:

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.
;)