CSS -Séparer deux sliders pour les déplacer
FerméRAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour, je suis assez débutante en css et j'ai remarqué que je pouvais aligner mes sliders à l'image en les mettant en position absolue. Cependant, je n'arrive pas à les séparer à fin de les décaler. Pouvez vous m'aider ?
Le code 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);
}
.servo {
position:absolute;
display: flex;
flex-direction: column;
align-items:flex-end;
margin-right: 22%;
}
.slider {
margin-top: 10px; /* Espacement entre le titre et le slider */
}
#sep {
position:absolute;
border-top: 5pxsolid#000;
margin-top: 20px;
margin-bottom: 10px;
padding-top: 20px;
width: 280px;
align-items: flex-end;
margin-left: 61%; /* Centre la ligne à droite */
top:50%;
}
html :
<body>
<divclass="flex">
<divclass="camera-container">
<figure>
<divclass="camera">
<imgalt="Camera">
<figcaption>Ici sera positionnée la caméra</figcaption>
</figure>
</div>
</div>
<divclass="servo">
<h1class="servo1">{{ servo1 }}</h1>
<divclass="slider">
<inputtype="range"min="0"max="180"value="90"class="slider"id="servo1Slider"onchange="update_value(this.value, 'servo1')">
</div>
</div>
<divid="sep"></div>
<divclass="servo">
<h1class="servo2">{{ servo2 }}</h1>
<divclass="slider">
<inputtype="range"min="0"max="180"value="90"class="slider"id="servo2Slider"onchange="update_value(this.value, 'servo2')">
</div>
</div>
</div>
</body>
Merci de m'aider.
- CSS -Séparer deux sliders pour les déplacer
- Déplacer colonne excel - Guide
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Séparer pdf - Guide
- Nombre de jours entre deux dates excel - Guide
1 réponse
Salut
en les mettant en position absolue
non non pas utile !
bon je vais pas te faire un cour sur le css ,
flex est une simplification css mais peut causer des problèmes sur des pages plus complexe !
Perso je n utilise pratiquement jamais flex ,
je préfère la méthode classic avec les les float, les clear both les inline-block ect un peu plus complexe a appréhender mais bien plus versatile !
mais ton problème ne vient pas de la !
il vient du fait que tu sépare les 2 servo en 2 div de même class "servo" dans ton cas !
les 2 div ont les mêmes valeurs css ! donc se chevauche !
met les 2 servo dans UNE SEULE div de class servo et il ne se chevaucheront plus !
<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>
fait aussi attention a bien séparer les éléments html de leurs attribut
<div class="flex"> OK
<divclass="flex"> PAS BON
parce que dans le code que tu as mis toute les ligne html ont ce problème.
et la prochaine fois utilise la touche "insérer un extrait de code" entre Normal et image dans la barre de tache en haut des messages que tu post
a+