28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis pas trop abile avec le CSS.
J'aimerais mettre du texte sur une image qui represent un cadre et un fond. Mais mon texte bouge avec differente résolution d'écran.

Voici mon code CSS :

#textcadre1 {
	position:absolute;
	left:295px;
	top:159px;
	width:561px;
	height:242px;
	z-index:1;
}


Voici aussi le code html de mon texte:

<div id="textcadre1">
  <p><em><span class="Style30"><strong>V</strong></span>ous d&eacute;couvrirez comment d&eacute;velopper des<span class="Style66"> <span class="Style30 Style70">strat&eacute;gies  marketin</span>g</span>, avec notre ebook &laquo;&nbsp;Les secrets des emails sont enfin d&eacute;voil&eacute;s  au grand jour !&nbsp;&raquo;</em></p>
  <em><span class="Style30"><strong>C</strong></span>et ebook est offert gratuitement et vous d&eacute;voile ses  astuces.&nbsp; Durant sa lecture, il vous  donnera tout les outils dont vous avez besoin, pour cr&eacute;er votre <strong>boutique de  vente en ligne</strong> : </em>
<p class="text17"><span class="para1"><span 
        class="text18"> </span></span></p>
</div>



Code html de mon image:

<div class="cadre1">
    <div align="center"><img src="image/cadre1.gif" width="593" height="303"></div>
  </div>


Merci pour votre aide
Modifié par byters (27 Sep 2007 - 22:26)
Bonjour byters,

le positionnement absolu d'un élément est par rapport à son conteneur.
Si tu mets ton bloc #textcadre1 directement dans body, le positionnement se fera par rapport au coin haut-gauche de ta page, donc il est normal que ca "bouge" selon les diverses résolutions.
Si j'ai bien compris, tu veux mettre du texte par dessus une image.

je te conseille de procéder plutôt comme ceci :

---- css ----
#conteneur{
position:relative;
width:593px;
margin:0 auto; /*marges haut et bas :0 ; marges gauche et droite auto pour un centrage du bloc*/
}
#texte{
position:absolute;
top:10px;
left:10px;
width:561px;
height:242px;
}

---- html ----
<div id="conteneur">
<img src="image/cadre1.gif" width="593" height="303" alt="texte alternatif" />
<div id="texte">ton texte...</div>
</div>


Voilà, ce devrait faire l'affaire si toutefois j'ai bien saisi ta demande.
Bon courage.
Merci yyoupla,

C'est nikel, tu me la super bien expliqué et maintenant tout fonctionne bien.

Je te remerci à nouveau