5569 sujets

Sémantique web et HTML

Problème d'alignement d'un element

Bonjour, je cherche a aligner correctement mon :


<input type="range" id="rangeInputVertical" min="0" max="255" value="128" step="1">


J'essai sans succé de placer la barre a droite de l'image. Y a t'il une astuce?

C'est pour un projet de robot tondeuse.

Ma page est visible ici: http://tondeuse.freeboxos.fr:8080

user: admin passe: sousou
Bonsoir, 

#test {
  width: 30px;
  height: 300px;
  border: 1px solid black;
  position: relative;
}
#rangeInputVertical {
position: absolute;
  top: 125px;
  left: -145px;
}

Si j'ai bien compris.
Il aurait été bien de ne pas bloquer le clic droit!!! Heureusement qu'il est possible d’analyser le code avec les outils de développement (F12)
Modifié par casper2 (19 Nov 2024 - 22:03)
Ok, j'ai également constaté que le clic droit ne fonctionne pas en haut de l'écran mais il fonctionne en bas... Le serveur web est généré depuis python, peut être sa viens de la.

Je peux montrer mon fichier css si nécessaire.
Modérateur
Salut,

oublie transform rotate....

le html : 

    <input type="range" orient="vertical">

le css : 

input{
  appearance: none;
  width: 30px;
  height: 300px;
  background: orangered;
}
Merci sa fonctionne bien, j'arrive maintenant a positionner correctement le curseur, sauf que je viens de tester sur mon tel android, il est impossible de modifier la valeur du curseur.

Au sujet du blocage du clic droit je viens de comprendre que c'est pour eviter de faire apparaitre le menu contextuel sur naviguateur android lorsqu'on clique sur les fleches de directions.
Je viens de tester sous firfox sous android sa fonctionne mais pas sur le naviguateur par defaut. (chrome je pense)
Modérateur
wemosd1 a écrit :
Je viens de tester sous firfox sous android sa fonctionne mais pas sur le naviguateur par defaut. (chrome je pense)


Peut être que ça vient de appareance : none; supprime le et fais un test.
Je viens d'essayer sur chrome (android) , il n'est pas possible de changer la valeur.

Par curiosité j'ai testé avec chrome sur pc et la valeur ne peux pas être changé également.
Modifié par wemosd1 (20 Nov 2024 - 19:58)
Modérateur
Depuis Avrill 2024 pour Chrome et Novembre 2023 pour Firefox, il est préférable d'utiliser writing-mode: vertical-lr et direction: rtl ou writing-mode: vertical-rl et direction: lr

Ce qui donne : 

<main>
  <div>
    <input type="range" orient="vertical">
  </div>
</main>




html, body{
  overflow: hidden;
}

main{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

input{
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: none;
  width: 16px;
  height: 300px;
  background: orangered;
}

Modifié par niuxe (21 Nov 2024 - 19:43)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à