28220 sujets

CSS et mise en forme, CSS3

[RESOLU] Recouvrement de texte par image !

Bonjour,

je souhaite créer un texte, et ou l'on trouvera sur deux coins opposés une image (représentant un coin stylisé)



Le CSS :

#haut{
  display:block;
  position:absolute;
  top:0;
  right:0;
  padding:0;	
  margin:0;
  background: url(hautdroit.jpg) no-repeat;
  height:158px;
  width:160px;

}
#bas{
  position:absolute;
  display:block;
  height:158px;
  width:160px;
  padding:0;	
  margin:0;
  background: url(basgauche.jpg) no-repeat;
  bottom:0;
  left:0;   
}

div#texte{
  position:absolute;
  text-align:justify;
  top:230px;
  left:330px;
  width:260px;
  padding:30px;
  z-index:10;
}


le HTML :



<div id="texte">
<p id="haut"></p>
<p id="bas"></p>

<p>Vivamus a metus a sem consequat auctor. Vestibulum commodo. In quis est at lorem aliquam tincidunt. Vestibulum hendrerit dapibus nisl. Mauris luctus, nunc eu imperdiet cursus, eros lorem sodales felis, id facilisis sem metus quis nibh. Etiam nisi sem, nonummy a, rhoncus sodales, tempor non, urna.</p>
</div>


Les images, le cadre et le texte s'affichent, sauf ce dernier (le texte) est recouvert par les deux images (remplacé ici par deux carrés noir et rouge), et je n'arrive pas à faire que le texte (sur fond bleu) soit au dessus des images ! Quelqu'un peut m'aider ?

Smiley bawling upload/7967-essai.jpg



Merci

Luk
Modifié par Luska (09 Aug 2006 - 17:05)
Il faudrait que le texte soit lui-même positionné (en relatif ou en absolu), ce qui te permettrait de jouer avec les z-index pour indiquer l'ordre d'empilement des éléments. Mais si le texte n'est pas positionné, tu ne peux pas lui appliquer de z-index.

Sinon, il y a peut-être plus simple d'utilisation qu'une tripotée d'éléments positionnés en absolu, pour faire des coins décorés. Est-ce que les contraintes du design à réaliser imposent ce genre de méthode ?
Bonjour Luk,

Ce serait peut-être plus facile et judicieux d'englober le div#texte d'un autre auquel serait donné une image de fond.
Par exemple : 
<div id="conteneur_texte">
   <div id="texte">
	<p>texte</p>
  </div>
</div> 
#conteneur_texte {
position: absolute;
text-align: justify;
top: 230px;
left: 330px;
width: 260px;
z-index: 10;
background: url(hautdroite.jpg) no-repeat right top;
}

#texte {
background: url(basgauche.jpg) no-repeat left bottom;
padding: 30px;
}
Mpop : j'ai essayé de mettre le texte en relatif pour jouer sur les z-index, mais rien y fait.

En fait le texte pourra apparaitre en plusieurs langues, donc des longueurs de texte différentes et aussi au niveau de l'accessibilité, je souhaite que les images évoluent avec le texte si on fait zoomer ce dernier.

Alan : je vais essayer ca.

Merci à vous deux Smiley biggrin
mpop : OK, merci, ca fonctionne, meme si le réglage des margin et padding est un peu galère. Merci Smiley smile
Sujet clos
Aller à