Soucis de résolution site WEB HTML et CSS

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
fiox
Arias
Messages : 1
Inscription : 13 mars 2023, 20:24

Soucis de résolution site WEB HTML et CSS

Message par fiox »

Bonjour,
Je me suis lancé dans un site WEB je veut faire un "Find The Button" en site WEB (c'est un prétexte pour découvrir le HTML et le CSS)
mais en ayant fait un bouton tout petit que j'ai caché dans le point du point d'exclamation de mon titre principale, je me suis rendue compte en changeant d'ordinateur que vu que les deux PC n'ont pas la même résolution le point changeais de place (et d'autres élément mais j'ai réussi à les replacés). Je vous demande donc si vous avez une solution pour que mon bouton soit toujours dans le point du point d'exclamation. Petite précision le bouton est un "div". Dite moi si il faut que je vous envoie d'autre chose ou précision.

Cordialement fiox

Code : Tout sélectionner

<a id="a1" href="4.1page-DWOhdRLrruix9gBLJiQT.html">
	<div id="div1" onclick="alert('Bravo ! Passont à la suite !');"></div>
</a>
^Le HTML^

Code : Tout sélectionner

div{
	background-color: black;
	cursor: pointer;
	position: relative;
	top: -32px;
	left: 58.36%;
	border-radius: 50%;
	width: 2px;
	height: 2px;
}
^Le CSS^
RAlpha
Arias
Messages : 1
Inscription : 07 avr. 2023, 06:58

Re: Soucis de résolution site WEB HTML et CSS

Message par RAlpha »

Bonjour,

Il existe plusieurs méthodes pour résoudre ce problème et assurer que votre bouton reste toujours dans le même emplacement. L'une des méthodes les plus courantes consiste à utiliser des unités de mesure relatives, telles que les pourcentages, au lieu d'unités absolues, telles que les pixels. Cela permettra à votre bouton de s'adapter à la taille de l'écran de l'utilisateur, tout en restant à la même position relative par rapport à votre point d'exclamation.

Par exemple, vous pouvez utiliser quelque chose comme ceci dans votre CSS:

#div1 {
background-color: black;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 2%;
height: 4%;
}

Ceci permettra de positionner votre bouton au centre de l'écran de l'utilisateur, tout en restant à la même position relative par rapport à votre point d'exclamation. D'ailleurs, vous pourrez retrouver quelques infos supplémentaires sur https://netlinking.gb.net/

J'espère que cela vous aidera à résoudre votre problème,

Cordialement,
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités