Déplacer deux sliders CSS/HTML
SenLie_
Messages postés
12
Statut
Membre
-
RAD ZONE Messages postés 5362 Statut Contributeur -
RAD ZONE Messages postés 5362 Statut Contributeur -
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 !
1 réponse
-
commence par lire les reponses deja faite !!
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>
-
@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 ...
-
