28172 sujets

CSS et mise en forme, CSS3

Lier un fichier Css

Bonjours , je sais qu'il existe des sujet sur cela mais cela marche pas dans mon cas Smiley ohwell
je souhaite lier un fichier css a une image bouton mais je n'y arrive pas
<div  class="bouton"><a href="index.html"><img style="position: absolute;top:104px;left:927px;width:246px" src="la carte.png"></img></div>

/* Halo lumineux */
.light div {
	position: relative;
}
.light div::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.light div:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

Modifié par Kyllzen (16 Jan 2018 - 00:26)
Modérateur
Bonjour,

Kyllzen a écrit :
je souhaite lier un fichier css a une image bouton

La phrase est bizarre. Je ne vois pas comment on peut "lier" un fichier css à une image.

Le css fait référence à un élément de classe nommée "light". Il n'y en a pas dans ton html.

Il manque aussi un </a> avant le </div>.

Et sinon, c'est quoi qui ne marche pas et que tu attendais ?

Amicalement,
parsimonhi a écrit :
Bonjour,


La phrase est bizarre. Je ne vois pas comment on peut "lier" un fichier css à une image.

Le css fait référence à un élément de classe nommée "light". Il n'y en a pas dans ton html.

Il manque aussi un &lt;/a&gt; avant le &lt;/div&gt;.

Et sinon, c'est quoi qui ne marche pas et que tu attendais ?

Amicalement,
en faite j'ai crée une image cliquable pour changer de page , et je voudrais y mettre un effet css ( celui que j'ai mis en second) mais je ne sais pas comment faire pour "lier" cette effet css a mon image ^^ merci j'avais pas remarquer pour le </a> manquant est rectifier Smiley smile
Modifié par Kyllzen (16 Jan 2018 - 19:00)
Modérateur
Bonjour,

Il y a aussi un </img> à supprimer dans ton code html (les img n'ont pas de balises fermantes). Il est également déconseillé de mettre des espaces dans les noms de fichiers.

Ceci étant, ton problème vient du fait que la div sur laquelle tu fais ton hover a une hauteur nulle (car ce qu'elle contient est en position:absolute). Du coup, tu as beau passer ta souris sur l'image ou ailleurs, il ne se passe rien. Après, bon, je ne sais pas exactement ce que tu essaies de faire, ni quelles sont tes contraintes par ailleurs. Mais avec le code ci-dessous, on voit bien un effet se produire quand on fait un hover sur la div (j'ai rajouté la balise div ayant pour classe "light", j'ai donné une hauteur et un background à la div sur laquelle on fait le hover pour qu'on puisse voir quelque chose, j'ai supprimé le </img> et j'ai remplacé l'espace dans le nom de l'image par un "_").
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
.light div {
	position: relative;
	height:100px;
	background:#ccc;
}
.light div::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.light div:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
</style>
</head>
<body>
<div class="light">
<div class="bouton">
<a href="index.html">
<img style="position: absolute;top:104px;left:927px;width:246px;" src="la_carte.png">
</a>
</div>
</div>
</body>
</html>

Il ne te reste plus qu'à adapter tout ça !

Amicalement,
Sujet clos
Aller à