CSS problème affichage cause : display: flex;

JE6478 Messages postés 34 Date d'inscription Statut Membre Dernière intervention -

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
Thunderbird problème affichage message - Forum Thunderbird
Problème affichage facebook ✓ - Forum Facebook

Discussions similaires

Les images ne s'affichent plus

impossible de voir les photos et videos sur une conversation messenger

Probleme d'affichage google chrome

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

Problème d'affichage/bugs graphiques sur Chrome sur Android

Votre réponse

Discussions similaires