Sujet Précédent Sujet Suivant

Déplacer deux sliders CSS/HTML

SenLie_ Messages postés 11 Date d'inscription mardi 1 novembre 2022 Statut Membre Dernière intervention 13 mars 2024 - 13 mars 2024 à 10:25
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 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
Deux comptes whatsapp - Guide
Editeur html - Télécharger - HTML
Déplacer la barre des taches windows 11 - Guide
Deux ecran pc - Guide

1 réponse

Réponse 1 / 1

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
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 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353 > bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024
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

Un seul de mes écouteurs marche. Que faire ?

2 comptes facebook avec même mail et même nom

Espace en HTML

[CSS] Forcé retour à la ligne

Déplacer deux sliders CSS/HTML

1 réponse

Votre réponse

Discussions similaires

Newsletters