centrer verticalement un ensemble de div dans le body

Bonjour tout le monde,

Je fais suite à ce topic :

https://zestedesavoir.com/forums/sujet/16582/une-opacite-qui-ne-change-pas-lors-dun-hover

Je souhaiterais centrer verticalement l’intégralité des div, mais malheureusement la class "centrage" s’applique aussi à la class curtain et pour le coup décale complètement le background-image en mode cover.

J’ai tout essayé… tout ?

Voici mes CSS :

.test {margin-top: 0px;}

body
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.container
{
	text-align: center;
	top:0;
	margin-bottom: 100px;


}
.centrage {
	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
	transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */}

.curtain
{
	position:fixed !important;
	z-index: -1;
	background-image: url(./images/fond.jpg);
	background-repeat: no-repeat;
	background-size: cover !important;
	background-position: center !important;
	filter: blur(1.5rem);
	transition: filter 1s;
	min-width: 100vw !important;
	min-height: 100vh !important;
	z-index: -1;
	left: 0; top: 0 !important; margin-top: initial;
}

Et mon HTML :

<div class="container">
	<div class="content centrage">
		<h1>Titre</h1>
		<div  class="test">
			<a href="./drvonklafout.html" class="btn-lg btn-success button" role="button">ENTRER</a>
			<div class="curtain"></div>
			<a href="javascript:history.go(-1)" class="btn-lg btn-warning button" role="button">SORTIR</a>
		</div>
	</div>
	<img src="./images/PBal.jpg" alt="Portrait">
	<img src="./images/PBal1.jpg" alt="Portrait">
</div>

Je n’arrive pas à m’en sortir

Merci et bon week-end !

Salut,

Que veux-tu dire par "une class s’applique à une autres class" exactement ?

Dans ton CSS j’ai l’impression que la syntaxe n’est pas valide… es-tu passé par un outil de vérification de syntaxe pour t’assurer que ton CSS est correct ?

Bonjour viki53,

Merci pour ta réponse

Je pense que la <div class="curtain"></div> hérite des CSS des son parent <div class="content centrage">. Pour le coup, plus de background cover mais une image à 100% de sa taille réelle, avec une importante marge en haut et à gauche

J’ai bien cherché à y remédier

Merci et bonne fin de week-end,

P.

Salut,

Je vois que tu as un problème pour centrer verticalement tes div avec la classe "centrage". Je pense que le souci vient du fait que tu appliques cette classe aussi à la div avec la classe "curtain", qui est en position fixe et qui a une hauteur et une largeur minimales de 100%. Du coup, la div "curtain" se décale vers le bas de 50vh, ce qui fait que le background-image ne couvre plus tout l’écran.

Pour résoudre ce problème, tu peux essayer de ne pas mettre la classe "centrage" à la div "curtain", mais plutôt à la div "test", qui contient les deux boutons. Ainsi, tu centres verticalement les boutons, mais pas le fond flou. Tu peux aussi enlever le margin-top: 0px de la classe "test", qui n’est pas nécessaire.

Voici le code modifié :

.test {}

body
{
width: 100%;
height: 100%;
overflow: hidden;
}

.container
{
text-align: center;
top:0;
margin-bottom: 100px;

}
.centrage {
margin-top: 50vh; / poussé de la moitié de hauteur de viewport /
transform: translateY(-50%); / tiré de la moitié de sa propre hauteur /}

.curtain
{
position:fixed !important;
z-index: -1;
background-image: url(./images/fond.jpg);
background-repeat: no-repeat;
background-size: cover !important;
background-position: center !important;
filter: blur(1.5rem);
transition: filter 1s;
min-width: 100vw !important;
min-height: 100vh !important;
z-index: -1;
left: 0; top: 0 !important; margin-top: initial;
}

Et mon HTML :

<div class="container">
<div class="content">
<h1>Titre</h1>
<div  class="test centrage">
<a href="./drvonklafout.html" class="btn-lg btn-success button" role="button">ENTRER</a>
<div class="curtain"></div>
<a href="javascript:history.go(-1)" class="btn-lg btn-warning button" role="button">SORTIR</a>
</div>
</div>
<img src="./images/PBal.jpg" alt="Portrait">
<img src="./images/PBal1.jpg" alt="Portrait">
</div>

J’espère que ça va t’aider à centrer tes div. Tiens-moi au courant si ça marche ou si tu as d’autres questions.

Bonne journée !

Bonjour Luna6,

Merci énormément d’avoir pris de ton temps

Le <h1> pose problème Le texte n’est pas centré verticalement (mais à top: 0) et les buttons en "tiennent compte" pour leur emplacement; qui se trouve donc bien bas

Si je retire le <h1>, tout roule, le fond comme le centrage des buttons.

Comment faire pour que le texte soit lui aussi centré, au dessus des boutons ?

Merci encore, bonne journée,

P.

Tu as regardé les styles par défaut appliqués par le navigateur ?

Par exemples les marges…

Bonjour viki53,

Tu as regardé les styles par défaut appliqués par le navigateur ?

Comment faire ? Il faut passer par quoi ?

Merci viki pour ton aide

Via les outils de développement de ton navigateur (Ctrl + I ou Clic droit > Inspecter), le premier réflexe à acquérir pour le développement front et/ou l’intégration

Bonjour viki53,

Je ne comprends pas, les marges détectées par l’inspecteur ne correspondent pas à mes CSS

J’ai mis le h1 dans la div centrage :

		<div class="container">
			<div class="content">
				<div class="test centrage">
								<h1>Titre</h1>

					<a href="./drvonklafout.html" class="btn-lg btn-success button" role="button">ENTRER</a>
					<div class="curtain"></div>
					<a href="javascript:history.go(-1)" class="btn-lg btn-warning button" role="button">SORTIR</a>
				</div>
			</div>

ça va mieux mais le h1 reste à une certaine distance du top, les boutons suivent bien le titre; mais rien n’est centré

Merci et bonne journée

C’est normal : ton navigateur a des styles de base qui s’appliquent sur n’importe quelle page (sinon une page HTML de base ressemblerait juste à un fichier texte brut).

Mais ton CSS peut les surcharger/redéfinir si besoin.

Attention aussi à la combinaison des marges et à l'overflow : un élément peut voir sa marge dépasser de son parent et donc le décaler.

Je viens de faire beaucoup de tests. Excepté la class centrage qui ne s’applique pas ou très mal. Je ne vois rien

cela n’est pas du au HTML ?

Merci viki53

Bonsoir,

J’ai PEUT-ETRE trouvé le problème (????).

D’où vient le line-height ? Ce n’est pas dans mes css

https://lecomptearebours.fr/lineheight.png

Merci pour votre aide,

Bonne soirée

line-height est généralement calculé automatiquement à partir de font-size s’il n’est pas forcé.

Bonjour viki53,

Je ne comprends pas, qu’entends-tu par "forcé" ?

Un line-height: normal !important; ne change rien. Il y a très peu de CSS, mais je n’arrive pas à trouver là où ça bloque

Merci pour ton aide et bonne fin de journée

Bonjour viki53,

Je n’ai toujours pas trouvé la solution

Puis-je en savoir plus sur le "forcé" ?

Merci beaucoup et bonne journée

Je veux simplement dire que si tu ne définis rien toi-même le navigateur calcule une valeur par défaut automatiquement.

Cette valeur par défaut correspond au comportement lié à la valeur normal et dépend de chaque navigateur : https://developer.mozilla.org/fr/docs/Web/CSS/line-height#normal

Tu as donc probablement un font-size un peu élevé.

Bonjour viki53 et merci d’être toujours présent

Je pense avoir tout fait niveau CSS pour régler cette histoire "d’espace" en haut qui empêche mon <h1> d’être centré verticalement.

Voici mes CSS :

			.test
			{				line-height: normal !important;

			}

			body
			{
				width: 100%;
				height: 100%;
				overflow: visible;
				line-height: normal !important;
			}

			.container
			{
				text-align: center;
				margin: auto;
			}

			.centrage
			{
				margin-top: 50vh;
				/ poussé de la moitié de hauteur de viewport / transform: translateY(-50%);
			/ tiré de la moitié de sa propre hauteur /}

			.curtain
			{
				position:fixed !important;
				z-index: -1;
				background-image: url(./images/Attention.jpg);
				background-repeat: no-repeat;
				background-size: cover !important;
				background-position: center !important;
				filter: blur(1.5rem);
				transition: filter 1s;
				min-width: 100vw !important;
				min-height: 100vh !important;
				z-index: -1;
				left: 0;
				top: 0 !important;
			}

			.button
			{
				margin-right:20px;
				text-decoration:none;
			}

			.button:hover + .curtain
			{
				filter: blur(0);
			}

			img
			{
				width: 0px;
			}

			.btn:active, .btn:focus, .btn:active:focus
			{
				box-shadow:none;
			}

			h1
			{
				font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
				font-size:8vw;
				line-height: normal !important;
				color: white;
				text-shadow: 2px 2px black;}

			p
			{
				color: white;
				text-shadow: 2px 2px black;
				font-size: 3vw;
				line-height: normal !important;
			}

J’ai mis la dose niveau line-height

Merci encore et bonne journée

Ça fait beaucoup de !important, non ? T’es sûr d’avoir besoin d’autant ? Tu as tenté de jouer sur le poids de tes sélecteurs ?

Oui, je sais

Qu’entends-tu par "poids des sélecteurs" ? C’est un terme nouveau pour moi

Bon app'

Je parle de la spécificité : le calcul que les navigateurs utilisent pour déterminer quel sélecteur est plus important (sans devoir utiliser !important) pour appliquer les styles : https://developer.mozilla.org/fr/docs/Web/CSS/Specificity

Bonjour viki53,

J’ai bien regardé ton lien Mozilla, mais je ne comprends pas trop En quoi mes CSS ne respectent pas "la cascade", l’ordre ?

Merci et bonne soirée