Déplacer deux sliders CSS/HTML

Fermé

SenLie_ Messages postés 12 Date d'inscription mardi 1 novembre 2022 Statut Membre Dernière intervention 24 mai 2024 - 13 mars 2024 à 10:25
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 22 mars 2024 à 20:22

Bonjour,

Je travaille sur un projet avec d'autres personnes en tant que débutante

Je n'arrive pas à déplacer les deux sliders de manière à qu'une ligne les sépare et qu'ils soient à droite de l'image, pour l'instant vide.
Pourriez-vous m'aider et m'expliquer ?

Code HTML :

  <div class="flex">
    <figure>
    <div class="camera">
      <img alt="Camera">
      <figcaption>Ici sera positionnée la caméra</figcaption>
    </figure>
    </div>
    <div class="servo">
      <h1 class="servo1">
        {{ servo1 }}
      </h1>
      <div class="slider">
        <input type="range" min="0" max="180" value="90" class="slider" id="servo1Slider" onchange=
        "update_value(this.value, 'servo1')">
      </div>
      <div id="sep"></div>
      <h1 class="servo2">
        {{ servo2 }}
      </h1>
      <div class="slider">
        <input type="range" min="0" max="180" value="90" class="slider" id="servo2Slider" onchange=
        "update_value(this.value, 'servo2')">
      </div>
    </div>
</div>

</body>
</html>

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

}

.camera{
  display: flex;
  justify-content: center;
  margin-left: 1%;
  margin-top: 2%;
  background-color: rgb(206, 206, 206);
}
.camera img{
  width :500px;
  height: 500px;
}
.sep{
  border-top: 1px solid #000;
  width: 700px;
 }

/*.servo{
  
 }
 */

Merci d'avance !

A voir également:

Déplacer deux sliders CSS/HTML
Déplacer une colonne excel - Guide
Editeur html - Télécharger - HTML
Deux ecran pc - Guide
Faire deux colonnes sur word - Guide
Déplacer barre des taches windows 11 - Guide

1 réponse

Réponse 1 / 1

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié le 22 mars 2024 à 00:29

commence par lire les reponses deja faite !!

https://forums.commentcamarche.net/forum/affich-37998956-css-separer-deux-sliders-pour-les-deplacer#2

sinon voila ta page

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
    .flex {
      display: flex;
      align-items: flex-start; /* Alignement des éléments en haut */
      flex-direction: row;
    }

    .camera-container {
      margin-right: 20px; /* Espacement entre la caméra et les servos */
    }

    .camera {
      width: 500px; /* Définir la largeur */
      height: 500px; /* Définir la hauteur */
      background-color: rgb(206, 206, 206);
    }

    .servo {
      flex-direction: column;
      align-items: flex-end;
      margin-right: 22%;
    }

    .slider {
      margin-top: 10px; /* Espacement entre le titre et le slider */
    }

    #sep {
      border-top: 5px solid ;
      color: #000;
      margin-top: 20px;
      margin-bottom: 10px;
      padding-top: 20px;
      width: 280px;
      top: 50%;
    }
    </style>
  </head>
  <body>
    <div class="flex">
      <div class="camera-container">
        <figure>
          <div class="camera">
            <img alt="Camera">
            <figcaption>
              Ici sera positionnée la caméra
            </figcaption>
          </div>
        </figure>
      </div>
      <div class="servo">
        <h1 class="servo1">
          {{ servo1 }}
        </h1>
        <div class="slider">
          <input type="range" min="0" max="180" value="90" class="slider" id="servo1Slider" onchange=
          "update_value(this.value, 'servo1')">
        </div>
        <div id="sep"></div>
        <h1 class="servo2">
          {{ servo2 }}
        </h1>
        <div class="slider">
          <input type="range" min="0" max="180" value="90" class="slider" id="servo2Slider" onchange=
          "update_value(this.value, 'servo2')">
        </div>
      </div>
    </div>
  </body>
</html>

bg62 Messages postés 23711 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 12 avril 2025 2 401
22 mars 2024 à 19:28

@RAD ZONE StatutContributeur

cc :) je vais supprimer la première demande, c'est vraiment dommage de donner des réponses sans avoir de suite .... certains posent des questions, d'autres veulent les aider et la réponse reste sans suite .... ^^

politesse © politesse - par un GAMIN de 11 ans !!!

merci de dire ce que tu penses de cette réponse ...

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360 > bg62 Messages postés 23711 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 12 avril 2025
22 mars 2024 à 20:22

1000 % d accord Bg !

j ai remarque que c est de plus en plus fréquent sur le forum !

A+

Discussions similaires

Comment supprimer une conversation Messenger pour les 2 personnes ?