Sujet Précédent Sujet Suivant

CSS problème affichage cause : display: flex;

JE6478 Messages postés 34 Date d'inscription vendredi 14 janvier 2022 Statut Membre Dernière intervention 30 novembre 2024 - Modifié le 27 nov. 2024 à 11:14

Bonsoir,

J'ai crée un menu qui s'affiche très bien sur jsbin, mais dès que je le publie sur le site, tout est de travers (les colonnes, etc...). J'ai repéré que cela venait du CSS.

body{ display: flex; }

Avez-vous une idée de la modification à effectuer ? Je précise que je le publie dans WPBAKEY via un bloc HTML. J'ai d'autres slides identiques, d'autres formes qui fonctionnent très bien avec les mêmes fonctions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Input Range with Dynamic Label</title>
</head>
<body>
  <div class="range-wrap">
    <div class="range-value" id="rangeV"></div>
    <input id="range" type="range" min="10000" max="1000000" value="20000" step="10000" >
  </div>
</body>
</html>

<p style="text-align: center;"><strong><span style="font-size: 18pt;">Vous gagnerez </span><span id="result" style="font-size: 18pt;">1600</span><span style="font-size: 18pt;"> € * en plus pour vos autres projets</span></strong></p>

<script>
document.querySelector('#range').addEventListener('input',function(){ 
  document.querySelector('#result').textContent =this.value*0.08 
})
</script>

body{
  min-height: 100vh;
  padding: 0 10vh;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #999999;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #A89153;
  box-shadow: 0 0 1px 0 rgba(0,0,0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #A89153;
}
.range-wrap{
  width: 500px;
  position: relative;
}
.range-value{
  position: absolute;
  top: -230%;
}
.range-value span{
  width: 150px;
  height: 100px;
  line-height: 24px;
  text-align: center;
  background: #ffffff;
  color: #A89153;
  font-size: 25px;
  font-family: arial;
    box-shadow: 1px 1px 10px rgba(0, 0, 0);
  font-weight: bold;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 6px;
}
.range-value span:before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #A89153;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 101%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
.text-box{
 width: 100px;
  height: 100px;
  line-height: 14px;
  text-align: center;
  color: #212121;
  font-size: 10px;
  font-family: arial;
font-weight: NORMAL;
 
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);

}

const
  range = document.getElementById('range'),
  
  setValue = ()=>{
    const
      newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
      newPosition = 10 - (newValue * 0.2);
    rangeV.innerHTML = `<span><p class="text-box">PRIX DE VENTE DE VOTRE BIEN</p> <Br><Br>${range.value} €</span>`;
    rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
 };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value
 
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML =  this.value; 
}
function separateur($matches) {
$nombre = number_format($matches[0], 0, ' ', ' ');
return ("$nombre");
}

Image comme il devrait s'afficher et image comme il apparaît sur le site :

Si quelqu'un a une idée avec flex.

Merci d'avance à tous

A voir également:

CSS problème affichage cause : display: flex;
Affichage double ecran - Guide
Problème affichage fenêtre windows 10 - Guide
Windows 11 affichage classique - Guide
Comment agrandir l'affichage de l'écran - Guide
Modifier taille affichage outlook - Forum Outlook

Discussions similaires

adele

Probleme d'affichage google chrome

Leboncoin : j'ai un problème d'affichage

Les images ne s'affichent plus

Problème d'affichage d'une page web.

Votre réponse

Discussions similaires