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.

[Candygirl]

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.

Si tu veux associer directement les valeurs de background-position avec l'url, tu dois alors utilise la propriété raccourcie background et non plus background-image:

Code :

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

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

[Er3van]

Oui, tout à fait d'accord ^^'

Juste fait un copier-coller en pensant gagner du temps

[knolz]

Merci, je test ça cet après-midi et je vous tiens au courant

[knolz]

Alors j'ai fait les tests, mais j'ai quelques soucis :

Code :

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

1
2
 
	background:url(images/barre.gif) -10px 500px;

Le premier, c'est que j'ai besoin de mettre une valeur négative en X pour que mon image soit collée à celle de gauche. Avec une valeur négative,ça décale l'image vers la gauche mais elle reste toujours dans le div ! c'est à dire que le bout qui aurait du être à gauche passe à droite sur la même ligne. Et justement, mon image ne prenant pas toute la largeur du div, elle se répéte plusieurs fois (qui est mon deuxième problème).

Enfin, quelque soit ma valeur en Y, mon image reste collée en haut de mon div.

Merci à tous.

[Er3van]

Code :

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

background:url(images/barre.gif) -10px 500px no-repeat ;

Mais quoi que t'en dises avec du code on pourrait mieux t'aider, parceque vu ce que tu décrit c'est un peu nawak ton code.

[knolz]

Mais ce que j'ai donné au début, c'est la fin de mon header. Après j'appelle tel ou tel fichier, donc je vois pas en quoi ça pourrait aider de te donner un fichier alors que je peux en appeler une 20aine qui sont complétement différents de celui que je t'aurais donné...

Mes fichiers commencent par require('header.php'), et après y'a du code...

Mon header finit par

Code :

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

1
2
3
4
5
6
7
 
	<?php require('auth.php'); ?>
	<?php require('menu.php'); ?>
 
 
	<div id="cadre_middle"> 
		<br></br><br></br>

J'appelle ensuite les fichiers selon la page en question.

[knolz]

personne svp ? :'(