Decalage en passant le curseur sur un bouton
SnoutPower
Messages postés
18
Date d'inscription
Statut
Membre
Dernière intervention
-
SnoutPower Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
SnoutPower Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
Bonjour,J ai un probleme qui fait que quand je passe le curseur sur un bouton (ex: Next), ma page se decale de queques pixels vers le haut... je ne sais pas pourquoi ??!!!
Dsl pour les magnifiques et enormes fautes d orthographies, en ce moment je suis en Angleterre, donc clavier Querty...
Merci pour votre/vos reponse(s)
Dsl pour les magnifiques et enormes fautes d orthographies, en ce moment je suis en Angleterre, donc clavier Querty...
Merci pour votre/vos reponse(s)
A voir également:
- Decalage en passant le curseur sur un bouton
- Comment trouver le mot de passe wifi sur son téléphone - Guide
- Comment faire apparaître le curseur sans souris - Guide
- Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
- Bouton reinitialisation pc - Guide
- Diagnostic bouton photo - Accueil - Outils
2 réponses
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
Cela vient du Css alors ?
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...
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>
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
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>