Affichage ecriture

font site css

Sujet résolu

6 décembre 2017 à 15:42:30

Bonjour j'ai un problème, mon texte ne s'affiche pas lorsque je ne met pas de font-size mon texte bonjour ne s'affiche pas ! Voici mon code

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-color: #45CCFF;
}
.two {
  background-color: #49E83E;
}
.three {
  background-color: #EDDE05;
}
.four {
  background-color: #E84B30;
}

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<link rel="stylesheet" href="style.css">
	<script src="jquery-3.2.1.min.js"></script>
</head>
<body>

</body>
</html>


<div id="container">
  <div id="container2">
    <div class="box one"><div>Bonjour</div></div>
    <div class="box two"><div>2</div></div>
    <div class="box three"><div>3</div></div>
    <div class="box four"><div>Last</div></div>
  </div>

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

Mewen_bzh

6 décembre 2017 à 15:55:37

Salut,

Première chose choquante, ton code est placé après la fermeture de ta balise </html>...

Je ne réponds pas aux messages privés.

ChrisLebure

6 décembre 2017 à 16:01:13

Bonjour,

mets la div container entre les deux balises body,
sinon ton problème vient de ce que container2 est à font-size:0
font-size hérite de la dernière valeur indiquée pour un parent, c'est la notion essentielle d'héritage.
donc si tu ne précises pas d'autres tailles, tous les enfants et descendants de container2 auront une taille = 0

-
Edité par ChrisLebure 6 décembre 2017 à 16:01:46

Rougelz

6 décembre 2017 à 18:42:26

Merci bien, le problème venait bien du font-size 0 sur le parent, j'avais complètement oublié de vérifier cette notion, merci beaucoup en tout cas!

Cependant j'ai un nouveau problème, quand j’enlève ce font-size 0, j'ai un trait gris qui apparait entre mon panneau bleu et mon panneau vert, comme vous pouvez le voir ici:

-
Edité par Rougelz 6 décembre 2017 à 18:47:31

ChrisLebure

6 décembre 2017 à 18:59:05

oui c'est le display inline-box qui transforme les div en éléments inline, donc espace si font-size n'est pas nul
mets le font-size sur les "box" et ça ira, c'est le conteneur des éléments inline qui créé l'espace
et supprime les <div> en trop autour de "bonjour" etc

Rougelz

6 décembre 2017 à 19:43:36

quand je met le font-size 0 sur les box ca enleve toujours l'écriture..

ChrisLebure

6 décembre 2017 à 19:54:14

oui normal il faut mettre le 0 sur container2, et mettre un font-size non nul sur box, c'est le conteneur qui doit être à zéro pour que les éléments inline n'aient plus d'espaces, donc le conteneur à font-size=0 -> container2, et les box font-size:14px p.e.

Rougelz

6 décembre 2017 à 20:02:02

C'est ce que j'ai fais merci beaucoup! Sujet résolu