Discussion :

[jubourbon]

Bonjour,

Je développe actuellement un cadre à intégrer dans une page internet.
Pour faire simple, ce cadre possède en fond une belle image et par dessus je viens intégrer mon texte et une image.
Pour simplifier et dynamiser cela, j'ai découper cette image-cadre en 3:

1. ThematiqueTop qui a en image de fond (background image) le haut du cadre, et contient une image et du texte (ThematiqueTitre, ThematiqueSSTitre)
   
2. ThematiqueZ1Middle qui a en image de fond une partie du centre du cadre que je répète sur toute la hauteur de la div et qui contient une image et du texte.
   
3. et enfin ThematiqueZ1Bottom qui étant vide, contient une image du bas du cadre.

Tout ceci fonctionne parfaitement, sauf dans le cas ou dans le ThematiqueZ1Middle, l'image est plus grande que le texte. Dans ce cas précis, l'image background du ThematiqueZ1Middle ne se repete pas.

Étrange, je ne comprend pas.

Voici mon code et en dessous le CSS associé. Il y a du style dans le html aussi pour des raisons pratique et de debugage.

Code :

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
 
<div id="thematiqueZ1">
	<div id="ThematiqueTop" style="background-image:url('images/deco/contenu/Cont_Top_Grey.png');">
	    <div id="ThematiqueTitre">
            <img src="images/deco/conten/Agenda.png" alt="Agenda"/>
        </div>
	    <div id="ThematiqueSSTitre">Test de texte</div>
	</div>
	<div id="ThematiqueZ1Middle" style="background-image:url('images/deco/contenu/Cont_Middle_Grey.png');">
		<div id="ThematiqueImg" style="float:left;">
			<img src="images/deco/vignette/accueil_sortir.png" alt="vignSortir"/>
		</div>
		<div id="ThematiqueTexte">Lorem ipsum dolor sit amet,.
		</div>
	</div>
	<div id="ThematiqueZ1Bottom" style="background-color:blue;">
		<img src="images/deco/contenu/Cont_Bottom_Grey.png" alt="imgBottom"/>
	</div>
</div>

Code CSS:

Code :

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
37
38
39
40
41
 
#thematiqueZ1{
	position:relative;
	top:0px;
	left:30px;
	width: 712px;
	margin-bottom:20px;
 
}
	#ThematiqueZ1Top{
	height: 50px;
	background-repeat:no-repeat;
	}
		#ThematiqueTitre{
		float:left;
		position:relative;
		left:-20px;
		top:2px;
				}
		#ThematiqueSSTitre{
		font-family:Arial, Helvetica, sans-serif;
		font-weight:bold;
		font-size:medium;
		color:white;
		margin-top:8px;
		}
	#ThematiqueZ1Middle{/*Le Middle contient une image et le texte*/
	background-repeat:repeat-y;
	}
		#ThematiqueImg{
		margin:2px;
		margin-left:10px;
		margin-right:5px;
		}
		#ThematiqueTexte{
		font-family:Arial, Helvetica, sans-serif; 
		font-size:small;
		text-align:justify;
		margin-left:20px;
		margin-right:20px;
	}

[Erwan31]

Bonjour,
sans visualiser le problème en ligen il va être difficile de t'aider.
D'autre part tu as certains div inutiles ou inappropriés ici:

Code :

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

1
2
3
4
<div id="ThematiqueZ1Middle" style="background-image:url('images/deco/contenu/Cont_Middle_Grey.png');">
		<p id="ThematiqueTexte"><img id="ThematiqueImg" src="images/deco/vignette/accueil_sortir.png" alt="vignSortir" /> Lorem ipsum dolor sit amet,.
		</p>
	</div>

Attention le alt vignSortir ne veut rien dire. En lecture continue ça donne :
"vignSortir Lorem ipsum dolor sit amet"
Le style="float:left; de l'image peut être transférer dans la CSS.
Toujours donner une taille (en HTML) aux images.

[jubourbon]

Merci pour ta réponse.
J'ai suivi tes modifs, mais ca ne change pas grands chose.
J'ai opté pour un min-height de ma div middle, c'est du bricolage, mais ca tiendra tant que l'image ne sera pas plus petite.

Merci.