Forum : Problème d'intégration de texte

Bonjour,

Voila je rencontre un petit problème avec mon code.

Pour mon cours d'NSI je suis sensé faire un site avec un moyen de signaler sa présence en cours.
J'ai déjà fait deux blocs avec un scroll horizontal mais j'ai remarqué que tout se déforme une fois que j'essaye de mettre mon texte et le formulaire.

<style>
body {
  margin:0;
}
#container .box {
  width:100vw;
  height:100vh;
  display:inline-block;
  position:relative;
}
#container .box > div {
  color:#FFF;
  position:absolute;
 /* font-size:10px; */
}
#container {
  overflow-y:hidden;
  overflow-x:hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}
#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space:nowrap;
  font-size:0;
}

.one {
  background-image:url(img/crayons.jpg);
  background-repeat:no-repeat;
}
.two {
  background-color: white;
  background-repeat:no-repeat;
}
p.title{
  font-size: 75px;
  color: red;

}
</style>

<!DOCTYPE html>
<html>
<head>
    <title>Absents</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
  <div id="container">
  <div id="container2">
    <div class="box one">

    </div>
    <div class="box two"></div>
  </div>
   <script type="text/javascript">
            document.getElementById('container')
.addEventListener('mousewheel', function(e) {
    this.scrollTop += e.deltaY;
});
    </script>
</div>

</body>
</html>

Sans le texte les deux images sont parfaitement côtes à côtes et de même taille.
Quand je met mon "Qui est absent?" le texte est au dessus de l'image (qui est sensé être un fond d'écran) et une partie grise remplace la partie où l'image était sensé être. (Si vous voulez voir un screen, mon discord SAGIII#3709).
Je peux bien évidemment scroll sur l'image de droite qui est intacte.
Je penses que j'ai mal placé mon texte dans le code et j'ai déjà essayé plusieurs dispositions.
Merci d'avance!

Problème d'intégration de texte

1 réponse