18041 sujets

Questions générales et questions de débutants

Z-index : le texte ne s'affiche pas sur l'image

Bonjour,

mon projet concerne l'impression d'un certificat de réussite. J'ai donc une image de fond qui est le certificat avec la cocarde, et le texte qui devrait s'imprimer au-dessus.

J'essaie de faire apparaître le texte sur l'image de fond, mais sans succès. Je n'arrive pas à comprendre si c'est la syntaxe des div qui n'est pas bonne où celle de z-index. En effet, le texte apparaît toujours en dessous de l'image...

C'est peut-être une question bête, mais je suis débutante...

Je précise que je dois tout coder dans un fichier html (pas de css).

Merci par avance pour votre aide,

Voici le html : 

<html>
<head>
	<title>Impression certificat</title>
</head>

<body>
<center>
			<div class='bgimage'><img src='certificatbackground.jpg'/></div>
      		
      	    <div class="result">
      		  <span style="text-align: center; font-size:36px; font-weight:bold">Certificat de r&eacuteussite</span>
       		  <br><br>
              <span style="font-size:18px">attestant que</span>
              <br><br>
              <span style="font-size:30px">l'étudiant</span><br/><br/>
              <span style="font-size:25px">a termin&eacute avec succ&egraves</span> <br/><br/>
              <span style="font-size:30px">le module "Initiation au RGPD"</span> <br/><br/>
              <span style="font-size:20px">&Agrave Rennes, le jour J</b></span> <br/><br/><br/><br/>
   	   </div>
    </center>


	<style type="text/css">

		#contenant{
			position:relative;
			z-index:1;
		}

		#result{
			position:absolute;
			font-family:Times new roman;
			z-index:2;
		}

	</style>

</body>

</html>
Pas de CSS ? Pourtant il y a des class=" "...

certificatbackground.jpg doit être en fond de la div texte pas dans une avant.
<center>
            <div class="result" style="background: url('certificatbackground.jpg')">
      		  <span style="text-align: center; font-size:36px; font-weight:bold">Certificat de r&eacuteussite</span>
       		  <br><br>
              <span style="font-size:18px">attestant que</span>
              <br><br>
              <span style="font-size:30px">l'étudiant</span><br/><br/>
              <span style="font-size:25px">a termin&eacute avec succ&egraves</span> <br/><br/>
              <span style="font-size:30px">le module "Initiation au RGPD"</span> <br/><br/>
              <span style="font-size:20px">&Agrave Rennes, le jour J</b></span> <br/><br/><br/><br/>
   	   </div>
    </center>
Bonjour kerlutinoec,

merci, c'est astucieux.
Désolée, je voulais dire pas de fichier css séparé.

Mais maintenant du coup, l'image est coupée en bas et le texte est totalement décentré. Je ne vois pas comment récupérer la totalité de l'image (image size ne semble pas aider), ni comment aligner le texte, j'ai tenté de modifier les marges margin-top, mais cela ne fait pas effet...

Avez-vous d'autres pistes ?

Mille merci par avance pour votre aide.
upload/1646928009-78747-capture.png Kerlutinoec, J'ai toujours l'image coupée
J'ai essayé de modifier la taille avec background-size : 100%, mais il y a toujours un problème avec la hauteur (comme sur l'image).

Une idée ?

merci Smiley smile
Modifié par NNK (10 Mar 2022 - 17:00)
Bonjour Parsimonhi,

joli jeu de mots Smiley smile

La taille de l'image est 2380 * 1339 px. Est-ce trop grand ?
Est-ce que je dois la réduire ?

Merci beaucoup pour votre aide !
Quoi que je fasse, c'est toujours la hauteur de l'image qui est rognée en haut et en bas.

Voici le code :

Merci par avance pour votre aide,


<html>

<head>
	<title>Impression certificat</title>
</head>

<body>
<center>      		
      	    <div class="result" style="background: url('certificatbackground.jpg');background-repeat: no-repeat; background-position: center;background-size: 50% auto; margin-top: 60px;">
      		  <span style="text-align: center; margin-top: 50px ; font-size:36px; font-weight:bold">Certificat de r&eacuteussite</span>
       		  <br><br>
              <span style="font-size:18px">attestant que</span>
              <br><br>
              <span style="font-size:30px">l'étudiant</span><br/><br/>
              <span style="font-size:25px">a termin&eacute avec succ&egraves</span> <br/><br/>
              <span style="font-size:30px">le module "Initiation au RGPD"</span> <br/><br/>
              <span style="font-size:20px">&Agrave Rennes, le jour J</b></span> <br/><br/><br/><br/>
   	   </div>
    </center>

</body>

</html>

Modifié par NNK (10 Mar 2022 - 19:06)
Modérateur
Bonjour,

Beaucoup de détails ne vont pas dans ton code. Le mieux me semble être, comme l'a proposé aussi Kerlutinoec de mettre l'image en background via css.

Ton css ne pouvait pas fonctionner car tu as bien mis des classes dans ton code html, mais tu mettais des # dans ton css, ce qui veut dire que ce qui suit est un id et non une classe.

On n'utilise plus la balise <center>.

On évite les attributs style="" (on met le css ... dans le css).

On évite les <br>.

On travaille en UTF-8 (en ajoutant <meta charset="utf-8"> dans le code html).

On met comme doctype html (en ajoutant <!DOCTYPE html> au début du code html), sinon on peut avoir des surprises à l'affichage.

J'ai refais tout ça, en simplifiant le html, en tenant compte du fait que ton image a une hauteur comprise entre 0,56 et 0,57 fois sa largeur, en centrant le background, et en centrant le texte. Ça devrait fonctionner désormais quelque soit la largeur de ta fenêtre.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Impression certificat</title>
<style>
body{
	margin:0;
	padding:0;
}
.contenant{
	width:100vw;
	height:57vw;
	font-family:'Times new roman',serif;
	background:url('certificatbackground.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.contenant p:nth-of-type(1){
	font-size:36px;
	font-weight:bold;
}
.contenant p:nth-of-type(2){
	font-size:18px;
}
.contenant p:nth-of-type(3){
	font-size:30px;
}
.contenant p:nth-of-type(4){
	font-size:25px;
}
.contenant p:nth-of-type(5){
	font-size:30px;
}
.contenant p:nth-of-type(6){
	font-size:20px;
}
</style>
</head>
<body>
<main class="contenant">
<p>Certificat de réussite</p>
<p>attestant que</p>
<p>l'étudiant</p>
<p>a terminé avec succès</p>
<p>le module "Initiation au RGPD"</p>
<p>À Rennes, le jour J</p>
</main>
</body>
</html>

Amicalement,
Meilleure solution
Parsimonhi,

merci beaucoup pour votre aide précieuse !!

Je sais, de mon côté, il y a du chemin à parcourir et je ne suis pas très douée...alors...bon...

Merci encore !
Sujet clos
Aller à