Sujet Précédent Sujet Suivant

Mettre à droite d'une caméra deux sliders HTML/CSS

SenLie_ Messages postés 11 Date d'inscription mardi 1 novembre 2022 Statut Membre Dernière intervention 13 mars 2024 - 11 févr. 2024 à 15:37

Bonjour,

Bonjour,

Je travaille sur un projet où j'ai du mal à aligner deux sliders et une caméra. La caméra est bien à gauche, les sliders se superposent bien mais ils ne se mettent pas à côté de la caméra. Lorsque ela serait fait, je pourrais augmenter la ligne de séparation pour qu'elle prenne toute la page.

le body du html : 

<body>

  <div class="flex">

    <div class="camera-container">

      <figure>

      <div class="camera">

        <img alt="Camera">

        <figcaption>Ici sera positionnée la caméra</figcaption>

      </figure>

      </div>

    </div>

    <div class="servo">

        <h1 id="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>

    <div id="sep"></div>

    <div class="servo">

        <h1 id="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>

la page css : 

.flex {

  display: flex;

  align-items: flex-start; /* Alignement des éléments en haut */

}

.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);

}

.servos {

  display: flex;

  flex-direction: column;

  align-items: flex-start; /* Alignement des servos en haut */

}

.servo {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.servo h1 {

  margin: 0; /* Réinitialiser les marges */

}

.slider {

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

}

#sep {

  border-top: 5px solid #000;

  margin-top: 20px;

  margin-bottom: 10px;

  padding-top: 20px;

  width: 280px;

  margin-left: auto; /* Centre la ligne à gauche */

  margin-right: auto; /* Centre la ligne à droite */

}

Merci de bien vouloir m'aider.

A voir également:

Discussions similaires

Un seul de mes écouteurs marche. Que faire ?
VM_417 -
vali54 -

4 réponses
Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses
Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses