Avoir un titre à 100% de sa hauteur... recouvrant toute la div

centrage vertical

Le problème exposé dans ce sujet a été résolu.

Bonsoir, Je tente en vain d’avoir un texte qui recouvre toute le fenêtre. Seulement voilà, un text-align vertical ne fonctionne pas. Et je ne m’en sort pas avec les margin. :( Le texte est bien responsive mais bouge considérablement en hauteur, n’est pas "fixe". Un exemple en ligne : https://lapagetest.fr/hauteur/index.html

Voici les CSS :

#jaune {
	height: 100vh!important;
	background-color: 
yellow;
	overflow:hidden;
	text-align: center;
}
#jaune p{
	margin-top:-0.2em; 
	position: relative;
	font-size: 114vh!important;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

Merci pour votre aide et bonne soirée;) PLS

+0 -0

avoir un texte qui recouvre toute le fenêtre. Seulement voilà, un text-align vertical ne fonctionne pas.

Chez moi, ça recouvre bien toute la fenêtre et plus (je ne saurai dire quel est le texte affiché, en plus ça se barre avant que j’ai le temps de tenter de deviner)

Capture de toute ma fenêtre dans Firefox
+0 -0

Bonjour, Je tente en vain d’avoir un texte qui recouvre toute le fenêtre. Seulement voilà, un text-align vertical ne fonctionne pas. Et je ne m’en sort pas avec les margin. :( Le texte est bien responsive mais bouge considérablement en hauteur, n’est pas "fixe". Un exemple en ligne : https://lapagetest.fr/hauteur/index.html

Voici les CSS :

#jaune {
	height: 100vh!important;
	background-color: 
yellow;
	overflow:hidden;
	text-align: center;
}
#jaune p{
	margin-top:-0.2em; 
	position: relative;
	font-size: 114vh!important;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

@Gil Cot : le résultat attendu est celui-ci (pour ROCK ;)

Merci pour votre aide et bonne journée;)

PLS

+0 -0

Normalement, un simple text font-size: 100vh devrait fonctionner.

Ok, non ça donne une marge en haut et en bas que je n’explique pas. 🤔

Problème intéressant, je m’y pencherais quand j’aurais le temps.

J’ai ça :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test ROCK</title>
  </head>
<body>
  <div>ROCK</div>
  <style>
body {
  font-family: 'Lato';
  background-color: yellow;
  margin: 0;
  padding: 0;

  overflow: hidden;
  position: relative;
}
body div {
  position: relative;

  margin: 0;
  padding: 0;
  font-size: 135vh;
  line-height: 0.67;
  font-weight: 600;
  color: lime;

  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% { left: -200%; }
  100% { left: +100%; }
}
  </style>
</body>
</html>

Mais je ne comprends pas pourquoi 100vh ne marche pas.

+0 -0

@Gil Cot : le résultat attendu est celui-ci (pour ROCK ;)

Intéressant… Je me demande si l’affichage que j’ai :

…ne serait pas à cause de la marge négative en haut

#jaune p{
	margin-top:-0.2em; 
	position: relative;
	font-size: 114vh!important;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
+0 -0

Salut,

un des soucis est que la "boîte" de rendu qui entoure un caractère est plus grande que simplement le caractère. Tu peux t’en rendre compte en surlignant une lettre avec la souris: le carré bleu dépasse des deux côtés.

Ces espaces sont là pour qu’il n’y ait pas d’emmerdes de superposition des lignes quand tu utilises des accents ou autres diacritiques, je te laisse regarder https://jsfiddle.net/jL897614/1/ où j’ai simplement changé ROCK par ROČÇK.

Comment régler cela ? Malheureusement, cela dépend de la police de caractères que tu vas utiliser. Il faudra donc faire un peu comme @ache, et tâtonner pour trouver la bonne valeur de line-height. Par exemple, ici, en supposant qu’il n’y a pas d’accent, on peut utiliser line-height: 150vh qui fait plus ou moins le café (mais tu remarqueras que les lettres n’ont pas toutes la même taille, c’est la faute à la police). https://jsfiddle.net/jL897614/2/

Edit: par contre je ne suis pas sûr de comprendre pourquoi il y a encore une scroll bar.

+2 -0

Super melepe, c’est EXACTEMENT ce que je recherche. MERCI :soleil:

Mais je n’arrive pas à reproduire cela:’(

mes CSS :

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-weight: 300;
	font-size: 15px;
	position: absolute;
	overflow-x: hidden;
	overflow-y: visible;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width:100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/PBal1.jpg);
	background-color: black;
}
#jaune {
	height: 100vh!important;
	background-color: yellow;
	overflow:hidden;
	text-align: center;
			}
#jaune p{  position: relative;

  margin: 0;
  padding: 0;
  font-size: 150vh;
  line-height: 130vh;
  font-weight: 600;
  color: lime;
}

le line-height change selon la taille de la fenêtre :(

Encore merci et bonne soirée, PLS

+0 -0

Je ne comprends pas pourquoi tu fais ça ?

Pourquoi un double rotate ? Pourquoi le z-index ? Pourquoi le margin-top ? Et je pense que le position: relative n’a pas lieu d’être.

+2 -0

Salut ache,

RESOLU :D

Vous ne pouviez pas deviner sans avoir toutes les données. Désolé.

Mais j’ai réussi grâce à vous et aux jsfiddle :bounce: Encore merci. Sans vous…

J’ai supprimé la classe pelvis qui n’avait pas (plus) lieu d’être et rajouter un rotate à la div #jaune p :

#jaune p{
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 120vh;
  line-height: 100vh;
  font-weight: 600;
  color: lime;
  transform: rotate(0deg);
}

Et ça roule comme le jsfiddle de melepe.

Encore merci à vous ;)

+0 -0

Très content pour toi @PaulLoupSulitzer !
Et j’aurais appris quelque chose. Merci.

N’oublie pas que si tu changes de police d’écriture (font) tu devras aussi régler line-height et font-size. ^^

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte