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