Discussion :

[knolz]

Bonjour,

Voila mon problème. Je suis en train de réaliser un site, et j'ai la partie du milieu qui contient du texte. Pour rendre le tout plus joli, j'aimerais mettre une image derrière le texte.

Actuellement ce qu'il se passe, c'est que lorsque je met l'image, tout le texte est décalé et se met à côté de l'image.

http://img217.imageshack.us/my.php?image=bugth1.jpg

Comme vous le voyez, le "Bienvenue..." se décale sur la droite alors que j'aimerais qu'il soit sur la barre bleu.

J'ai testé en mettant des position relative/absolute dansl e CSS mais je n'y arrive pas.

Merci

PS : en ce qui concerne mes div, j'ai ça :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="cadre_middle"> 
 
	<div id="cadre_barre"> 
	</div>
 
[....]
</div>

[MasterOfChakhaL]

Salut,

Peut-être qu'un peu de code pourra nous aider à te répondre (xhtml et css)

[knolz]

Disons que je ne savais pas trop quoi mettre. Je vous met le CSS des 2 div :

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
 
#cadre_middle {
	width:58%;
	margin-top : 0px;
	margin-left: 11px;
	margin-right: auto;
	float:left;
}
 
#cadre_barre {
	background-image:url(images/barre.gif);	
	height:20px;
	width:62%;
	margin-top : 0px;
	margin-left: -5px;
	margin-right: auto;
	float:left;

[Er3van]

Sans le code HTML on ne sait pas trop à quoi correspond quoi...

Ceci étant, j'vois pas pourquoi tu ne mets pas simplement ton image en arrière-plan ( background ), ça marcherait très bien.

[knolz]

Le code HTML ne servirait à rien puisque dans le cadre_middle, il peut y avoir tout et n'importe quoi, c'est le corps du site. J'ai essayé en mettant l'image dans le css en background de cadre_barre, et également en mettant dans le div le HTML pour mettre l'image (et gérer le positionnement dans le css) mais ça me décale tjrs le texte.

Sinon j'ai essayé avec l'image en background du cadre_middle, mais ce qui me gêne c'est que je ne peux pas placer mon image ou je le souhaite (si je fais des margin-top etc, ça me décale mon texte également)

[MasterOfChakhaL]

Pour positionner l'image de fond, il suffit d'utiliser la propriété css suivante:

Code :

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

background-position: TOPpx LEFTpx

[Er3van]

J'suis pas sûr de comprendre ce que tu veux, mais

Code :

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

background-image:url(images/barre.gif) x y ;

permet de fixer des points d'ancrage de ton image, où x est le positionnement horizontal et y vertical.