Ma class ne s'applique pas à mon h1.

Bonjour à tous !

Je tente d’appliquer une class à un titre, mais ce dernier ne veut rien savoir Rien ne change

Voici mon HTML :

<div class="sl-slide" data-orientation="vertical">
	<div class="sl-slide-inner">
		<div class="bg-img bg-img-1">
			<h1 class="vonklafout">titre</h1>
		</div>
	</div>
</div>

et les CSS :

.vonklafout h1 {color: blue; font-size: 20px;}

Bon après-midi

P.

Salut,

Si je ne dis pas de bêtise c’est parce que tu as imbriqué la condition : .vonklafout puis h1

Ce qui veut dire que ton style ne s’applique qu’à un élément h1 inclus dans un élément qui a la classe vonklafout.

Il faut soit que tu appliques ton style directement à la classe vonklafout, soit aux éléments h1, ou sinon que tu appliques ta classe au div qui contient ton h1.

Salut Moté,

N’est-ce pas ce que j’ai fait ?

ou sinon que tu appliques ta classe au div qui contient ton h1.

Bah c’est ça le souci La div qui contient le titre a déjà son propre h1

Merci

Salut viki53

J’ai bien essayé avant de poster, mais je ne sais pas ce que j’ai fait car maintenant le h1.vonklafout fonctionne Par contre, j’ai un soucis de conflit de h1 (c’est pour ça que j’ai désiré mettre une class):

h1.vonklafout
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size: 35vw;
opacity: 0.3;
bottom: 0px;
vertical-align: bottom;
color: white;
}

hérite des valeurs de :

.sl-slider h1
{
	font-size: 35vw;
	line-height: 30vw;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	opacity: 0.3;
	text-align: center;
	color: white;
	margin-top:80px;
}

C’est pour ça que je ne voyait pas trop de changements

Que puis-je faire ???

Un grand merci

Toute valeur qui n’est pas redéfinie est héritée, donc il faut que tu les redéfinisses à la valeur que tu souhaites.

SUPER !!! Merci pour l’info

Par contre , pourquoi le h1.vonklafout refuse de se mettre en bas ?

.sl-slider h1
{
	font-size: 35vw;
	line-height: 30vw;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	opacity: 0.3;
	text-align: center;
	color: white;
	margin-top:80px;
}

h1.vonklafout
{
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 15vw;
	opacity: 0.3;
	vertical-align: bottom;
	color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top: unset;
	line-height: unset;
	bottom: 0px;
}

Merci et bonne soirée,

P.

Bonjour, Il y a du mieux avec la position absolute Mes CSS :

.vonklafout h1
{
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 15vw;
	opacity: 0.3;
	vertical-align: bottom;
	color: yellow;
	margin-top: unset;
	line-height : normal;
	bottom: 0;
	position: absolute;
	left: 50%;
	/* à 50%/50% du parent référent */
	transform: translate(-50%);
	/* décalage de 50% de sa propre taille */
}

.vonklafout
{
	height: 100%;
	width: 100%;
	bottom: 0;
	position: relative;
}

et mon HTML :

<div class="vonklafout">
	<h1>Texte</h1>
</div>

Par contre, le h1 est bien en bas, mais pas à bottom:0 J’ai cherché pendant des heures (oui ) Tout vérifié… rien trouvé

Une idée sur ce mystère ?

Bonne fin de journée,

P.

Salut !

La position configurée quand tu utilises position: absolute est relative (oui) au premier élément parent qui a une position: relative (ou le bloc englobant toute la page — body ou html, je ne sais jamais lequel… —, à défaut).

Qu’est-ce que tu entends par « à bottom: 0 » ? Tout en bas de la fenêtre du navigateur ? Si oui, il faut que body & html aient tous deux une hauteur d’au moins toute la hauteur de la fenêtre, à savoir 100vh¹. Cela peut se régler avec un min-height, par exemple.

Bonjour Amaury,

Merci pour ta réponse.

Oui, bottom:0 pour que le h1 se trouve en bas de la fenêtre de navigation

Pour le min-height du body/html, cela ne change rien

Si il faut passer par flexbox… houlala, je ne m’y fait pas

Je vais regarder tes liens et tenter de comprendre qq chose

Bonne soirée,

P.

C’est bien simple, si tu fais du CSS, tu es obligé de te mettre à flexbox ou à css grid.

Bonjour,

Oui, je sais

J’ai plutôt cherché ici : https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox

Mais… non… toujours rien

Mes CSS :

.vonklafout h1
{
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 15vw;
	opacity: 0.3;
	vertical-align: bottom;
	color: yellow;
	margin-top: unset;
	line-height : normal;
	bottom: 0;
	position: absolute;
	left: 50%;
	align-self: flex-end;
	transform: translate(-50%);
	/* décalage de 50% de sa propre taille */
	display: inline-block;
}

.vonklafout
{
	height: 100%;
	width: 100%;
	bottom: 0;
	position: relative;
	display: flex;
}

Bonne journée

P.

Le but de flexbox est justement de pas avoir à utiliser de position: absolute. Tu utilises encore les deux, tu auras forcément des conflits et donc des effets indésirables.

Commence avec un code simple, quite à repartir de zéro, puis ajoute petit à petit les éléments principaux : la position, puis les dimensions et marges, puis la mise en forme du texte, puis les couleurs…

OK viki53,

je vais faire ça ce week-end

Merci

J’ai tenté quelque chose de simple :

<head>
<style>
.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  display: flex;
}
p {
align-self: flex-end;
display: inline-block;
}
</style>
</head>

<body>
<div class="parent">
  <p>Child</p>
</div></body>

Je n’y arrive pas

Pourtant j’obtiens bien l’effet désiré avec ce code : le paragraphe est en bas de son parent https://codepen.io/viki53/pen/YzJpmyw

Oui, mais pas à bottom: 0

Mon problème est juste ça

Sans doute parce qu’il y a des marges par défaut à enlever.

Tout bêtement

Super, Merci à vous !!!!!

Bon week-end

P.