Decalage en passant le curseur sur un bouton
SnoutPower
Messages postés
19
Statut
Membre
-
SnoutPower Messages postés 19 Statut Membre -
SnoutPower Messages postés 19 Statut Membre -
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)
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 -
-
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...- 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- 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>
-
