Decalage en passant le curseur sur un bouton
Fermé
SnoutPower
Messages postés
18
Date d'inscription
jeudi 1 juin 2017
Statut
Membre
Dernière intervention
12 juin 2017
-
1 juin 2017 à 12:46
SnoutPower Messages postés 18 Date d'inscription jeudi 1 juin 2017 Statut Membre Dernière intervention 12 juin 2017 - 5 juin 2017 à 10:53
SnoutPower Messages postés 18 Date d'inscription jeudi 1 juin 2017 Statut Membre Dernière intervention 12 juin 2017 - 5 juin 2017 à 10:53
A voir également:
- Decalage en passant le curseur sur un bouton
- Mettre un mot de passe sur un dossier - Guide
- Comment retrouver le curseur sans souris - Guide
- Comment trouver le mot de passe wifi sur son téléphone - Guide
- Réinitialiser chromecast sans bouton - Guide
- Comment ajouter quelqu'un sur facebook sans le bouton ajouter - Guide
2 réponses
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 565
1 juin 2017 à 16:34
1 juin 2017 à 16:34
Salut,
le problème vient certainement du fait que la taille ou le style de ton bouton change au survol, ce qui décale les autres éléments.
Il y a plusieurs possibilités, tout va dépendre des modifications de style que tu as avec ton hover...
Des pistes de réponse ?
https://stackoverflow.com/questions/14417433/how-to-enlarge-a-div-without-moving-other-elements
https://stackoverflow.com/questions/18144239/resizing-an-element-on-hover-to-not-move-the-others-around
https://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element
le problème vient certainement du fait que la taille ou le style de ton bouton change au survol, ce qui décale les autres éléments.
Il y a plusieurs possibilités, tout va dépendre des modifications de style que tu as avec ton hover...
Des pistes de réponse ?
https://stackoverflow.com/questions/14417433/how-to-enlarge-a-div-without-moving-other-elements
https://stackoverflow.com/questions/18144239/resizing-an-element-on-hover-to-not-move-the-others-around
https://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element
SnoutPower
Messages postés
18
Date d'inscription
jeudi 1 juin 2017
Statut
Membre
Dernière intervention
12 juin 2017
2 juin 2017 à 11:18
2 juin 2017 à 11:18
Cela vient du Css alors ?
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 565
2 juin 2017 à 11:57
2 juin 2017 à 11:57
Certainement, ça doit être un hover qui traine quelque part et qui bouge tes éléments, dans ce que tu montres, il n'y a que les checkbox en hover, mais ça ne doit pas être ça.
Pour montrer ton code, copie/colle ton code directement en utilisant les balises prévues, sinon c'est compliquer pour tester...
Pour montrer ton code, copie/colle ton code directement en utilisant les balises prévues, sinon c'est compliquer pour tester...
SnoutPower
Messages postés
18
Date d'inscription
jeudi 1 juin 2017
Statut
Membre
Dernière intervention
12 juin 2017
>
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
Modifié le 2 juin 2017 à 14:24
Modifié le 2 juin 2017 à 14:24
Ah pardon...
body{
background-image: url(special.jpg);
background-size: cover;
background-attachment: fixed;
}
h1{
color: red;
font-family: calibri light;
text-shadow: 5px 5px #000000;
}
h2{
color: red;
font-family: calibri light;
text-shadow: 2px 2px #000000;
}
label{
color: Chartreuse;
font-family: calibri light, Baskerville;
font-size: 100%;
}
input[type=checkbox]:hover{
box-shadow: 0px 0px 10px #00ff00;
}
li{
display: inline-block;
width: 10px;
}
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Configurator Tool</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<center>
<h1>Configurator Tool !</h1>
<h2>
<u>Step 1 : Do you..... ?</u>
</h2>
</center>
<fieldset>
<center>
<form action="Options">
<input type="checkbox" name="checkbox 1"><label for="checkbox">Option 1</label>
<input type="checkbox" name="checkbox 2"><label for="checkbox">Option 2</label>
<input type="checkbox" name="checkbox 3"><label for="checkbox">Option 3</label>
<input type="checkbox" name="checkbox 4"><label for="checkbox">Option 4</label>
<input type="checkbox" name="checkbox 5"><label for="checkbox">Option 5</label>
</form>
</center>
</fieldset>
<center>
<form action="html2.html">
<a href="html2.html" rel="nofollow noopener noreferrer" target="_blank"><input type="button" value="Next -->"></a>
</form>
</center>
</body>
</html>
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 565
2 juin 2017 à 14:14
2 juin 2017 à 14:14
Avec la balise de code, ça sera parfait :)
https://jsfiddle.net/p0k0cohe/
il y a peut être d'autres styles impliqués ? Parce que là, rien ne bouge, mis à part le halo autour des checkbox
https://jsfiddle.net/p0k0cohe/
il y a peut être d'autres styles impliqués ? Parce que là, rien ne bouge, mis à part le halo autour des checkbox
SnoutPower
Messages postés
18
Date d'inscription
jeudi 1 juin 2017
Statut
Membre
Dernière intervention
12 juin 2017
>
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
Modifié le 5 juin 2017 à 11:02
Modifié le 5 juin 2017 à 11:02
j ai fait ce changement:<a href="html2.html" rel="nofollow noopener noreferrer" target="_blank">
mais cela n`a pas fontionner.
De plus j`ai fait un petit changement pour mettre les checkboxes aligner verticalement : Maintenant j`ai un nouveau probleme...
Voici le code :
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Configurator Tool</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<center>
<h1>Configurator Tool !</h1>
<h2>
<u>Step 1 : Do you..... ?</u>
</h2>
</center>
<fieldset>
<center>
<form action="Options">
<input type="checkbox" name="checkbox 1"><label for="checkbox">Option 1</label>
<input type="checkbox" name="checkbox 2"><label for="checkbox">Option 2</label>
<input type="checkbox" name="checkbox 3"><label for="checkbox">Option 3</label>
<input type="checkbox" name="checkbox 4"><label for="checkbox">Option 4</label>
<input type="checkbox" name="checkbox 5"><label for="checkbox">Option 5</label>
</form>
</center>
</fieldset>
<center>
<form action="html2.html">
<a href="html2.html" rel="nofollow noopener noreferrer" target="_blank"><input type="button" value="Next -->"></a>
</form>
</center>
</body>
</html>
mais cela n`a pas fontionner.
De plus j`ai fait un petit changement pour mettre les checkboxes aligner verticalement : Maintenant j`ai un nouveau probleme...
Voici le code :
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Configurator Tool</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<center>
<h1>Configurator Tool !</h1>
<h2>
<u>Step 1 : Do you..... ?</u>
</h2>
</center>
<fieldset>
<center>
<form action="Options">
<input type="checkbox" name="checkbox 1"><label for="checkbox">Option 1</label>
<input type="checkbox" name="checkbox 2"><label for="checkbox">Option 2</label>
<input type="checkbox" name="checkbox 3"><label for="checkbox">Option 3</label>
<input type="checkbox" name="checkbox 4"><label for="checkbox">Option 4</label>
<input type="checkbox" name="checkbox 5"><label for="checkbox">Option 5</label>
</form>
</center>
</fieldset>
<center>
<form action="html2.html">
<a href="html2.html" rel="nofollow noopener noreferrer" target="_blank"><input type="button" value="Next -->"></a>
</form>
</center>
</body>
</html>
