Superposition texte image par Angel Otaku - page 1

Salut ton problème est pas très bien posé essai d'être plus clair si tu veux des réponses.

Un exemple vite fait à l'arrache pour que tu saisisses le fonctionnement des positions :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
	html {
		box-sizing: border-box;
	}
	body {
		margin: 0;
		padding: 0;
	}
	* {
		box-sizing: inherit;
	}
	.container {
		width: 50%;
		height: 200px;
		position: relative;
		margin: auto;
		border: 1px solid black;
	}
	img {
		min-width: 100%;
		height: 50%;
	}
	p {
		color: white;
		position: absolute;
		top: 10px;
	}
</style>
</head>

<body>
 <div class="container">
 	<img src="CoutelierLODI.jpg" alt="description"/>
 	<p>Minecraft</p>
 </div>
</body>
</html>

Le résultat :

Explication :

Les éléments html qu'ils soient en block ou en inline ne peuvent pas se superposé. Pour le faire tu dois positionner les éléments. Dans mon exemple je positionne le texte en absolute pour pouvoir le placer à ma convenance et je positionne le conteneur en relatif car un élément positionné en absolute doit avoir son parent positionné (c'est a dire pas en static).

Ce n'est pas ce que tu veux précisément mais j'espère t'avoir un peu éclairé si tu veux une aide plus approfondi il faudrait que tu poses ton problème de manière plus claire.

Cdlt

Angel Otaku

25 mai 2017 à 11:34:28

Bonjour,

J'aimerais dans le cas précensenté ci-dessous,que le texte soit surperposé à l'image c'est à dire qu'il soit sur l'image et non tout en bas de la bordure.Merci de votre réponse.

Mamashi

26 mai 2017 à 15:30:37

Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité

Lamecarlate

26 mai 2017 à 23:05:14

sinon on peut aussi mettre l'image en background dans le CSS, si c'est censé être juste une décoration.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Superposition texte image

Supprimer

Modérer

Signaler le message aux modérateurs