Comment positionner un div avec bgd-image par dessus un div texte ?

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'

Bonjour,

28ToM47 a écrit :
Mon problème est simple

Il disent tous ça.

28ToM47 a écrit :
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.

Ok, là j'ai suivi.

28ToM47 a écrit :
Or, là, il se décale.

Hein?

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

Ça m'a pas du tout parlé. J'ai pas vraiment saisi le rapport avec le schmilblick.

28ToM47 a écrit :
Au passage, j'espère que ce que je tente est faisable ^^

Aucune idée. La description générale ressemble à quelque chose de faisable, mais les précisons données laissent planer un gros doute.
Modifié par Florent V. (20 Apr 2009 - 07:25)

Alors comme ça on veut cacher du texte derrière une image pour Mr Google ? Petit malin, va. Tu peux même économiser un div en mettant l'image en dur à la suite du texte puis en positionnant l'image en relative. Mais cacher un texte reste une pratique peu recommandable si ce n'est fait à bon escient et pour d'excellentes raisons.

huhu ^^

Oula, effectivement, je crois qu'il faut que j'évite de poster juste avant d'aller me coucher .. Je devais trop penser à mon lit.

considérez mon premier message comme jamais existé.
Mon travail est toujours ici : http://www.tom-portfolio.fr/civel/ (merci de regarder, sans quoi vous ne comprendrez pas de quoi je parle ensuite)

Donc, le système de mon site est basé sur un script Mootools de Phatfusion "image menu". Le principe et qu'au passage de la souris, la largeur du <li> est modifiée(le script utilise des listes et non pas des div).
mes bandeaux verticaux sont appelés donc de cette facon :

<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>

J'ai ensuite mon fichier css :

#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 !
Modifié par 28ToM47 (20 Apr 2009 - 11:14)

L'image la plus a droite va motiver Florent V; a t'aider... gone inside

gilles6975 -> pas compri ^^

Sinon j'apporte juste cette précision :
http://www.tom-portfolio.fr/civel/ -> là où j'en suis, les menus sont fermés
http://www.tom-portfolio.fr/themes/new/exemple.jpg -> une fois que l'on a cliqué sur "qui-sommes-nous" le menu doit s'ouvrir pour laisser apparaitre le texte.

comment faire ?
Merci

Problème résolu !

Merci à tous ceux qui ont tenté de pencher sur mon problème où au moins qui ont essayer de le comprendre ^^

Il me suffisait de mettre une balise <p> :

#imageMenu ul li.qui p {
    margin: 0 0 0 **px;
}
#imageMenu ul li.img1 p {
    margin: 0 0 0 **px;
}
/* etc... */

Merci à tous
Tom'

gilles6975 a écrit :
L'image la plus a droite va motiver Florent V; a t'aider... gone inside

Mouais. Ce qui me motive, c'est quand on essaye de faire des choses intéressantes qui contribuent à la qualité d'un site. Or, je considère que ce type d'interface est une erreur ergonomique: trop déstabilisatrice, pas assez ancrée dans les habitudes de navigation, demande une bonne maitrise du pointeur de la souris, difficile à négocier avec un touchpad ou si on souffre de tremblements même légers, inutilisable au clavier, etc.

Florent V. a écrit :

Mouais. Ce qui me motive, c'est quand on essaye de faire des choses intéressantes qui contribuent à la qualité d'un site. Or, je considère que ce type d'interface est une erreur ergonomique: trop déstabilisatrice, pas assez ancrée dans les habitudes de navigation, demande une bonne maitrise du pointeur de la souris, difficile à négocier avec un touchpad ou si on souffre de tremblements même légers, inutilisable au clavier, etc.

Je trouve cette remarque très intéressante pour être constructive, mais je la désaprouve.
Ce site est une réponse à une commande pour une association. Pour un budget de 500 euros, j'ai dû créer l'entière identité visuelle, donc logo et charte graphique du site, avec interface d'administration sécurisée permettant de gérer commentaires, les pages du site, newsletter, contact form, et bien d'autres.
Pour ce qui est de l'ergonomie du site, je n'ai pas choisi ce type d'interface parceque je suis tombé sur le script de phatfusion. J'ai plutôt trouvé ce script par bénédiction en cherchant quelque chose du genre. Le but était d'offrir quelque chose de dynamique, en limitant considérablement le nombre de page a charger (pour l'utilisateur,il y'aura donc ici uniquement 3 pages à charger dans le navigateur, les 3 onglets en haut.)
Si cette interface s'avère peu commune et qu'elle sort du lot et "pas assez ancrée dans les habitudes de navigation", j'ai envie de dire : tant mieux !
il y'en a marre de tous ces sites blogs, barre de menus a gauche, bannière en haut ! il y'en a marre de ces agences de webdesign qui vous pompent 2000 euros pour vous filer un site Joomla avec un template bidon !
Et puis pour ma part, cette interface me parait relativement intuitive, le roll over me parait facile à prendre en main, pour ce qui est des touches claviers, qui s'en sert ? A part peut etre le backspace (qui ne gêne ici en rien dans la nav), je ne vois pas.

Pour finir, je pense justement que les interfaces "classiques" sont souvent trop "déstabilisatrices", parce que justement, ayant toute plus ou moins la même gueule, elle ne répondent plus au besoin précis du site. Exemple : les blogs: ergonomie 0/20

Bref, en vous remerciant, et si au passage vous avez un petit avis à donner comme Florent V, je suis preneur !
A bientôt
Tom'

PS : Une petit question comme ça, pensez-vous que remplacer le roll-over par un mouseclick serait plus ergonomique ? Le problème du roll-over est évidemment que l'on ne peut pas retirer la souris, sinon la page se ferme. Ceci pourrait effectivement poser problème.
Modifié par 28ToM47 (20 Apr 2009 - 17:28)