28173 sujets

CSS et mise en forme, CSS3

Ecrire sur un image sans utiliser "background"

Salut pra95.
Ce qui t'intéresse, c'est les z-index !

Cette instruction permet d'empiler les div.
Pour cela il faut que ce dernier soit positionné et que tu lui affecte un z-index.
La valeur la plus haue sera le div qui sera sur le dessus.

Il me semble qu'il y a un article dessus dans la FAQ.

Smiley cligne
dsl mais j'ai rien compris lol... je vais voir dans le faq

on doit mettre quel valeur ???
Modifié par pra95 (27 Sep 2006 - 17:14)
Excuse-moi, il semblerait que je sois allée un peu vite en explication.
Ce que je voulais dire c'est que tu dois utiliser les z-index pour afficher ton texte par dessus ton image. Par exemple :

Ton HTML :
<div id="fond">
  <div id="contenu">Ici ton texte et ce que tu veux</div>
</div>


Et ton CSS :
#fond {
background:url('image.jpg') no-repeat top left;
position:relative;
width:200px;
height:100px;
z-index:1;
}

#contenu {
position:relative;
top:0;
left:0;
width:100px;
background-color: blue;
z-index:10;
}


Tu remarqueras que l'on positionne les deux div (position:reative;) et qu'on leur affecte un ordre (z-index).
Le chiffre le plus petit équivaut à l'élément le plus en-dessous du tas.

Voilà... Smiley murf
Je pense que ça devrait aller mieux, non ? Smiley rolleyes
Modifié par Cygnus (27 Sep 2006 - 17:25)
merci mais coment on fait pour que ca soit transparent ??? le "div" où l'ont met le text...
Modifié par pra95 (27 Sep 2006 - 17:32)
Salut
_ L'exemple de Cygnus met en œuvre la propriété "background" dont tu veux te passer.
De plus, il n'est pas besoin de z-index dans cet exemple puisque "contenu" est inclu dans "fond" et comme il le suit dans l'écriture de la page il se trouve automatiquement "au dessus".

Ton image, celle de l'exemple, mesure 467 X 246px, je ferais donc un truc du genre:

.imagesport {
	width: 467px;
	height: 246px;
}
.textesport {
	position: relative;
	width: 150px;
	margin-top: -246px; /* remonte le texte de la hauteur de l'image */
	color: white;
	background: transparent url("150pxblue.png") repeat-y;
}

_ Il faudrait que tu fabriques une petite image en png translucide si tu veux une écriture bien blanche sur un fond transparent car si tu utilises les propriétés d'opacité, ton texte lui aussi laissera voir l'image au travers (transparences png pas au top sur I.E parait-il)
_ Autre problème qui risque de se poser: il faudrait aussi définir une hauteur identique à celle de l'image pour que le fond descende jusqu'en bas. Ca risque d'être embêtant pour tous ceux qui ont des réglages d'affichage typo différents.
L'image disposée en "background" me semble bien plus simple d'utilisation. Si c'est parce que tu veux conserver l'attribut "alt" en ce cas, remplace le par "title" qui peut peut-être jouer un rôle vaguement similaire.
Administrateur
Ah, juste en passant rapidement : http://blog.alsacreations.com/billets/arriere-plan.htm

Code :
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#arriere {
position: absolute;	/* dimension et positionnement du bloc conteneur  de l'image */
left: 10em;
top: 5em;
height : 20em;	
width : 30em;
}
#arriere img {
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#arriere p {	
position: absolute;	/* placement du texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
color: white;
}
-->
</style>
</head>
<body>

<div id="arriere"><img alt="" src="image.png />
<p>titre sur une image en arrière-plan étirée <br />
Modifiez la taille du texte avec votre navigateur : l'image suit la cadence !</p>
</div>

</body>
</html>


@Auréance : le soucis avec ta méthode, c'est que le texte va être décalé (position relative) mais va continuer à laisser un vide à sa place de départ.
je crois que j'ai trouvé ce que je cherché :

css :

#storyshorttitleboxcontainerhome {border-bottom:solid 1px #004898; margin: 0px;}
#storyshorttitlebox {position: relative; top:0px; left:0px; height:238px; width:458px; background:#000;z-index:1;}
#storyshorttitleimage {position:absolute;top:0px;right:0px;height:238px;}
#storyshorttitletextback {position:absolute; top:0px; left:0px; height:238px; width:141px; background:#004898 none repeat scroll 0%; opacity:0.75; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);}
#storyshorttitletext {position:absolute; top:0; left:0; height:238px; width:141px;color:#fff;z-index:2;}



xhtml :

<div id="storyshorttitleboxcontainerhome">

<div id="storyshorttitlebox">

<div id="storyshorttitleimage">
<a href="#">
<img src="http://i.eurosport.fr/2006/09/26/310023-1442859-458-238.jpg" alt="&quot;Fermé et compliqué&quot;" border="0"></img></a>
</div>

<div id="storyshorttitletextback">
</div>

<div id="storyshorttitletext">La TEXT</div>

</div>
</div>


en tous cas merci pour vos aides.... Smiley cligne
Modifié par pra95 (27 Sep 2006 - 18:14)
"" Bien heureux celui qui croit avoir trouvé car, le monde du CssZenGarden le portera vers l'immensité de l'inconnu. ""
La présentation de la solution serait plus facilement consultable ainsi :

#storyshorttitleboxcontainerhome {
	border-bottom:solid 1px #004898;
	margin: 0px;
	}
#storyshorttitlebox {
	position: relative;
	top:0px; left:0px;
	height:238px;
	width:458px;
	background:#000;
	z-index:1;
	}
#storyshorttitleimage {
	position:absolute;
	top:0px;
	right:0px;
	height:238px;
	}
#storyshorttitletextback {
	position:absolute; 
	top:0px; 
	left:0px; 
	height:238px; 
	width:141px; 
	background:#004898 none repeat scroll 0%;
        opacity:0.75;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);
	}
#storyshorttitletext {
	position:absolute; 
	top:0; 
	left:0; 
	height:238px; 
	width:141px;
	color:#fff;
	z-index:2;
	}

a écrit :
@Auréance : le soucis avec ta méthode, c'est que le texte va être décalé (position relative) mais va continuer à laisser un vide à sa place de départ.

@Raphaël : Est-tu sûr de ça ? Je n'avais jamais remarqué d'emprise vers le bas (espace vide) avec cette méthode.
PS:// Ton lien est atrocement "dégueulasse", j'ai horreur des ces deux bestioles qui baisent dans le désert (crabes, araignées, "super-mega-acariens" ? quelle horreur !) J'ai peine à regarder l'image… Heureusement qu'il y a le code pour se défouler.
Modifié par Aureance (28 Sep 2006 - 00:14)
Sujet clos
Aller à