Ne plus ouvrir un bouton sur une page google

12 décembre 2021 à 15:40:23

Salut, j'aurai besoin d'aide pour un problème de bouton. Je suis débutant et je sais pas si mon problème va être compréhensible.

Je suis entrain de faire une extension chrome et du coup j'utilise de l'html et du css. Dans cette extension il y a 3 boutons, le problème (esthétique) c'est que je peux maintenir appuyer sur mon bouton et l'ouvrir dans un nouvel onglet google. J'aimerai ne plus pouvoir le prendre pour le déplacer car je trouve ça juste moche. J'ai posté une vidéo en non répertoriée sur ma chaine montrant mon problème car je ne pense pas que vous allez comprendre.

https://youtu.be/WXxleyzAyww

Si quelqu'un sait régler ce problème merci beaucoup, voici mon code html et css :

<!DOCTYPE html>
<html lang="en">
    
<html> 
    <head>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    </head>
        <body>
        	<div id = "logo">
                <img src="/images/logov2.png">
            </div>
        </body>
        <a class="button button-dashboard" href="dashboard.html">DASHBOARD</a>
        <a class="button button-option" href="option.html">OPTION</a>
        <a class="button button-test" href="test.html">TEST</a>
</html>

.button {
	background-color: #2c0f39;
	padding: 10px 30px;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	margin: 20px;
	border-radius: 10px;
	position: relative;
	left: 120px;
	top: 20px;
	font-weight:600;
	font-family: Arial, Helvetica, sans-serif;
	box-shadow: 6px 6px 20px 4px rgba(0, 0, 0, 0.3);
	transition: 0.2s;
}

.button:hover{
	background:rgba(212, 109, 0, 0.80);
}

AbcAbc6

12 décembre 2021 à 15:53:02

Bonjour, une vidéo de trois secondes, pas facile de comprendre le problème!!

Si tu prends un objet d'une page HTML et que tu le glisses dans la barre d'adresse cet objet va s'ouvrir dans le navigateur, je ne vois pas le problème en cela.

Par contre il existe des erreurs dans votre code HTML. Passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

La balise <img> ne sort jamais sans sont attribut alt obligatoire.

La balise <title> est obligatoire dans le <head> et non vide.

Rien après la fermeture de la balise </body>, vos lien doivent être entre <body> et </body> comme toutes les balises d'affichages.

Pour ouvrir un lien dans un nouvel onglet, il existe l'attribut target="_blank"

https://developer.mozilla.org/fr/docs/Web/HTML/Element/a#attributs

JérémyPerret4

12 décembre 2021 à 16:51:53

AbcAbc6 a écrit:

Bonjour, une vidéo de trois secondes, pas facile de comprendre le problème!!

Si tu prends un objet d'une page HTML et que tu le glisses dans la barre d'adresse cet objet va s'ouvrir dans le navigateur, je ne vois pas le problème en cela.

Par contre il existe des erreurs dans votre code HTML. Passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

La balise <img> ne sort jamais sans sont attribut alt obligatoire.

La balise <title> est obligatoire dans le <head> et non vide.

Rien après la fermeture de la balise </body>, vos lien doivent être entre <body> et </body> comme toutes les balises d'affichages.

Pour ouvrir un lien dans un nouvel onglet, il existe l'attribut target="_blank"

https://developer.mozilla.org/fr/docs/Web/HTML/Element/a#attributs

Oui le code HTML était mal écrit car c'était juste le temps d'un test mais est ce bon maintenant ?

<!DOCTYPE html>
<html lang="en">
    
    <head>
    <title>MoonLight</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    </head>
        <body>
        	<div id = "logo">
                <img src="/images/logov2.png" alt="logo">
            </div>
        <a class="button button-dashboard" href="dashboard.html">DASHBOARD</a>
        <a class="button button-option" href="option.html">OPTION</a>
        <a class="button button-test" href="test.html">TEST</a>
    </body>
</html>