28182 sujets

CSS et mise en forme, CSS3

[Résolu] Mon lien se balade sur la page

Bonjour, j'ai cherché durant des semaines si ce sujet avait était traité mais apparement ça n'est pas le cas.

Je vous mets dans la situation. Je suis en train de faire mon propre site et j'ai quelques problèmes avec des liens sur des images :

<a class="a_2" href="trap_samples_pack.html"><img src="img/trap.png" class="F_2"></a>




.F_2{
	position: relative;
	top: 125px;
	left: -36%;
	width: 20%;
	border-radius: 20px;
	transition-duration: 0.4s;
}
.F_2:hover{
	box-shadow: 5px 5px 25px white;
}

Mon problème est que le lien de l'image se balade sur la page et je n'arrive pas à le coller sur l'image et seulement sur l'image.

Pouvez vous m'aider svp ?
Modifié par Flyxen (14 May 2019 - 17:26)
Bonsoir c'est normal tu fait sortir ton image hors de la page avec ton left: -36%;
en gros pose ton doigt à 10cm du coté gauche de ton écran et tu auras le doigt sur ton image, ou supprime juste ce fameux left.
Modérateur
laisse tomber le position relative et ce qui va avec.

Probablement que display:inline-block; pour le lien et accessoirement un display:block ou vertical-align:top sera suffisant pour l'image.

En fait, j'imagine que tu veut que ton lien englobe entièrement ton image , ou bien ?
En fait je cherche a ce que mon lien soit collé sur l'image mais là il part à gauche, à droite ou est difforme.
Tiens explique moi ce qui ne va pas en fait par rapport à ceci, et j'ai aussi une question pourquoi transition-duration: 0.4s;


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body{
		background: black;
	}
	img{
		height: 100px;
		width: 100px;
	}

		.F_2{
	position: relative;
	top: 125px;
	/*left: -36%;*/
	width: 20%;
	border-radius: 20px;
	transition-duration: 0.4s;
	background: grey;
    }
.F_2:hover{
	box-shadow: 5px 5px 25px white;
    }

	</style>

</head>
<body>

	<a class="a_2" href="trap_samples_pack.html">
		<img src="https://upload.wikimedia.org/wikipedia/commons/6/67/Firefox_Logo%2C_2017.svg" class="F_2" alt="truc">
	</a>


</body>
</html>
Le transition duration c'est pour l'animation du box shadow.

J'ai pu resoudre mon problème grâce à un float left mrc à tous
Sujet clos
Aller à