superposition texte et image

23 nov. 2007, 10:40

Bonjour,

je cherche à mettre une image étirable en fond pour un texte dans un conteneur DIV.
Pour cela j'ai tenté de faire quelque chose du genre :

Code : Tout sélectionner

<div><IMG SRC="images/Background.jpg" CLASS="fondMenu"><P CLASS="titreRubrique">LE TEXTE</P></div>

et le CSS :

Code : Tout sélectionner

.titreRubrique {position:absolute;top:1em;left:1em;}
.fondMenu { width:100%;height:100%;}

Mais le positionnement du texte ne se fait que depuis le coin haut gauche de la page. J'aimerais qu'il se fasse depuis le coin haut gauche du conteneur DIV. Est ce possible?
Sinon comment mettre du texte au dessus d'une image étirée?

23 nov. 2007, 10:57

En mettant la position en absolute, tu sors le paragraphe du "suivi" de la page, hors de la hierarchie des objets, et il se place par rapport à la fenêtre globale (dans ce cas 1em du haut et de la gauche, donc le coin supérieur gauche).

Ce serait mieux de faire comme ceci:

Code : Tout sélectionner

.titreRubrique {position:relative;margin-top:-100%;}

Par exemple..

23 nov. 2007, 11:02

Merci c'est exactement ce que je cherchais,
Un grand merci à toi berzemus!

23 nov. 2007, 13:01

Je réouvre le sujet parce qu'il me reste encore un petit problème que je n'arrive pas à résoudre:

Le but de ma manip est de réaliser un cadre contenant une image en tant que fond et un texte dessus.
Lorsque la souris passe sur ce cadre, le texte disparait et laisse place à 2 liens qui prennent respectivement la partie gauche et la partie droite du cadre.

Pour ce faire, j'ai implémenté ceci avec les recommendations précédents :

Code : Tout sélectionner

<div ID="sb1"  CLASS="rubriqueMenu" onmouseover="afficherSousRubrique('sb');"><IMG SRC="images/Background2.jpg" CLASS="fondMenu"><P CLASS="titreRubrique">TEXTE</P></div>
<div ID="sb2" CLASS="rubriqueMenu" STYLE="display:none;" onmouseout="cacherSousRubrique('sb')">
	<IMG SRC="images/Background2.jpg" CLASS="fondMenu">
	<A HREF="..." CLASS="sousRubriqueMenu" STYLE="position:relative;margin-top:-120px;width:48%;height:120px;">gauche</A>
	<A HREF="..." CLASS="sousRubriqueMenu" STYLE="position:relative;margin-top:-120px;width:48%;height:120px;">droite</A>
</div>

.rubriqueMenu {width:48%;height:120px;display:inline;}

et les 2 fonctions javascript qui font le travail :

Code : Tout sélectionner

function afficherSousRubrique(debutId){
		document.getElementById(debutId+"1").style.display="none";
		document.getElementById(debutId+"2").style.display="inline";
	}
	
function cacherSousRubrique(debutId){
		document.getElementById(debutId+"1").style.display="inline";
		document.getElementById(debutId+"2").style.display="none";
	}

Le nom de la rubrique fonctionne très bien. C'est lorsqu'on passe avec la sours que ca cloche.
Les 2 mots sont bien remontés sur l'image mais malheureusement dans le résultat, les parties gauche et droite ne sont pas des liens (juste le mot) et il y a de l'espace blanc sous l'image...

23 nov. 2007, 15:04

j'ai résolu le problème en faisant comme ceci :

Code : Tout sélectionner

<div ID="sb2" CLASS="rubriqueMenu" STYLE="display:none;" onmouseout="cacherSousRubrique('sb')">
   <IMG SRC="images/Background2.jpg" CLASS="fondMenu"><DIV STYLE="position:relative;margin-top:-120px;width:100%;height:120px;"
   <A HREF="..." CLASS="sousRubriqueMenu" STYLE="width:49%;height:98%;">gauche</A>
   <A HREF="..." CLASS="sousRubriqueMenu" STYLE="width:49%;height:98%;">droite</A>
   </div>
</div>

par contre j'au du coller les balises dans le code <IMG ..><DIV ...> sinon IE affichait un espace sous l'image...

superposition texte et image

Qui est en ligne