Discussion :

[28ToM47]

Bonjour!

Mon problème est simple, la solution l'est peut être moins. Cette fois mon ami Google a séché.

Explication en quelques mots :
J'ai deux div, l'un avec une image-background, l'autre avec du texte. Je souhaite que le premier passe par dessus le second, et que le texte reste DERRIERE la div. Or, là, il se décale.

Explication en direct : (c'est bien plus parlant)
http://www.tom-portfolio.fr/civel/

Au passage, j'espère que ce que je tente est faisable ^^
Merci d'avance pour vos précieuses réponses !
Tom'

[warwill]

selon l'exemple en ligne:
tu veux que ton text se place dans le cadre blanc (après survole de la souris)
ou qu'il reste intégralement dans l'image?
peux tu nous montrer ton code?

[desert]

Bonjour,
De quels div parles-tu ? Je ne vois qu'une liste à puces avec du texte dans chaque balise li.
En essayant d'interpréter ce que tu souhaites, je mettrais chaque texte dans une balise p possédant une largeur fixe :

Code xhtml :

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

1
2
3
4
...
<li style="width: 74px;" class="qui"><p>blabla...</p></li>
<li style="width: 128px;" class="img1"><p>blabla...</p></li>
...

Et dans ta feuille de style imageMenu.css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
#imageMenu ul li p {
    margin: 0;
}
#imageMenu ul li.qui p {
    width: 74px;
}
#imageMenu ul li.img1 p {
    width: 128px;
}
...

[28ToM47]

Bonjour !

C'est marrant, j'ai relu mon message, j'ai rien compri ... Du coup je reclarifie un peu la chose.
D'abord merci à vous deux pour vos réponses.

Warwill : Effectivement je souhaite que le texte apparaisse dans le cadre blanc et qu'il ne soit pas visible lorsque les page sont fermées

J'ai modifié un peu la chose histoire que ce soit plus clair:
ici vous pouvez voir le site tel qu'(il est actuellement, avec les menus fermés : http://www.tom-portfolio.fr/civel/
et ici vous pouvez voir ce que je cherche à faire : placer le texte correctement dans le cadre blanc au moment du clic : http://www.tom-portfolio.fr/civel/th...ew/exemple.jpg

Desert : De quel div je parle ? Effectivement, erreur de ma part, il s'agissait de listes. J'étais fatigué hier soir :p
Merci de ta réponse, mais je souhaiterais en fait que le texte n'apparaisse pas du tout lorsque le menu est fermé. Avec une simple balise <p>, je ne pense pas que ca fonctionne.

Au passage, voici le fonctionnement côté html/css :
-dans la page html:

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
<div id="imageMenu">
 
			<ul>
				<li class="qui"></li>
				<li class="img1"></li>
				<li class="echange"></li>
				<li class="img2"></li>
				<li class="sejour"></li>
				<li class="pair"></li>
				<li class="img3"></li>
				<li class="programme"></li>
			</ul>
 
 
 
			</div>

-le 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
#imageMenu {
	width: 990px;
	height: 532px;
	overflow: hidden;
	border: 2px solid;
}
 
 
 
#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 532px;
	width: 2000px;
	float: left;
 
	}
 
#imageMenu ul li {
	float: left;
	width:300px;
	height: 532px;
	border-right: 2px solid #fff;
	display:block;
	overflow:hidden;
	cursor:pointer;
}
#imageMenu ul li.qui {
	background: url(../images/quisommesnous_06.jpg) no-repeat scroll 0%;
	width:74px;
 
}
 
#imageMenu ul li.img1 {
	background: url(../images/dim_08.jpg) no-repeat scroll 0%;
	width:128px;
}
 
etc ...

Est-il donc possible, juste en modifiant le css/html, que le texte apparaisse dans le cadre blanc prévu à cet effet, une fois que l'on a cliqué sur un menu?

Voilà, j'espère que je suis un peu plus clair cette fois.
Merci d'avance !

[desert]

Oui, c'est possible.
Il suffit de reprendre le code html que j'ai mis en exemple plus haut et de changer le code css :

Code css :

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

1
2
3
4
5
6
7
8
 
#imageMenu ul li.qui p {
    margin: 0 0 0 **px;
}
#imageMenu ul li.img1 p {
    margin: 0 0 0 **px;
}
/* etc... */

Et remplacer ** par la largeur en px de l'image visible.

[28ToM47]

Ok ca fonctionne parfaitement !

Merci à toi vraiment je me croyais reparti pour une après-midi de blocage la dessus !

A bientôt !
Tom'