Discussion :

[djimaestro]

Bonjour à tous!

J'ai un gros problème avec IE7. J'ai un div avec une image en background. Souhaitant afficher complètement cette image, je fixe son width à 100% et son height à 300px.

CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#selecteur-passion{
	background: url(../images/selecteur-passions.jpg) 100% 100% no-repeat;
	background-position:top;
	width : 100%;
	height : 300px;
	color: #CCCCCC;
	margin-top:-30px;
	padding-top: 20px;
	padding-left: 20px;
	position: relative;
}

A l'intérieur de ce div, j'ai deux autre div :

Code :

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

1
2
3
4
5
6
 
#selecteur-lig1{
	margin-top:10px;
	text-align:right;
	width:100%;
}

Le html est de la sorte :

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="selecteur-passion">
     <div id="selecteur-lig1">
         COUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOU
     </div>
     <div id="selecteur-lig1">
        BLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLA
     </div>
</div>

SI tout marche avec FF3 et IE6, IE7 me superpose COUCOU ET BLABLA, alors que je souhaite qu'ils s'affichent l'un en dessous de l'autre.

Cela semble donc venir de la propriété height fixée à 300px (si j'enlève cette ligne, ça marche). Mais alors l'image ne s'affiche plus entièrement...

UNE SOLUTION?

Merci d'avance!

[desert]

Bonjour,
ce que tu désires, c'est que l'image que tu veux afficher occupe toute la largeur de la page ? ou bien simplement l'afficher entièrement sans l'étirer ?
Dans le 1er cas, avec un background-image, tu dois répéter l'image de fond, c'est la seule solution ou alors tu utilises une balise img.
Dans le 2ème, ce que tu as fait est presque bon :

Code css :

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

1
2
3
4
5
6
7
8
#selecteur-passion{
	background: url(../images/selecteur-passions.jpg) no-repeat left top;
	width : 100%;
	height : 300px;
	color: #CCCCCC;
	margin-top:-30px;
	position: relative;
}

Etant donné que le div occupe à une largeur de 100%, les padding sont à enlever sinon on les dépasse ces 100%.
Tu dois aussi savoir que les id doivent rester uniques. Tu ne peux donc pas appliquer un id à deux balises différentes. Dans ton cas, il faut utiliser les classes.

Code xhtml :

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

<div class="selecteur-lig1">...</div>

Code css :

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

1
2
3
4
5
.selecteur-lig1 { 
	margin-top:10px;
	text-align:right;
	width:100%;
}

Normalement, ils devraient s'afficher l'un en-dessous de l'autre.

[GihefBey]

Bonjour,

Sans en voir plus, on peut peut-être ajouter qu'étant donné que le width: 100% est le comportement par défaut des <div>, ils sont ici inutiles.

-

[djimaestro]

Bonjour, et merci pour vos réponses.

J'ai effectué les changements que Desert a spécifié, mais le problème reste malheureusement entier! J'ai fait une capture d'écran qui parler sans doute plus que mes quelques lignes d'explications.

Je précise à nouveau lorsque je supprime la ligne "height : 300px;" du css, l'affiche des div est bon... mais l'image d'arrière plan ne s'affiche pas entièrement (elle est coupée en bas, juste à la fin du texte).

Une autre idée?

Merci d'avance!!!

[djimaestro]

Petit up, mon problème est toujours d'actu malheureusement...

[djimaestro]

Problème résolu :

ll faut ajouter la propriété height à la classe selecteur-lig1 pour IE7 !