Déplacer deux sliders CSS/HTML
SenLie_
Messages postés
12
Date d'inscription
Statut
Membre
Dernière intervention
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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 colonne excel - Guide
- Editeur html - Télécharger - HTML
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Nombre de jours entre deux dates excel - Guide
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 .... ^^
merci de dire ce que tu penses de cette réponse ...
1000 % d accord Bg !
j ai remarque que c est de plus en plus fréquent sur le forum !
A+