Placer une div à bottom: 0

Bonjour !!!!

Je tente en vain de mettre un texte en bas. J’ai essayé de multiples codes (HTML et CSS), cela ne fait qu’empirer les choses

Mes CSS :

.enba h1{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  opacity: 0.3;
  font-size:5em;
  vertical-align: bottom;

et le HTML :

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

Je ne comprends pas pourquoi !???

Une idée ?

Merci pour votre aide.

P.

Est-ce que tu as plus d’informations sur le comportement que tu obtiens ?

J’ai essayé ton code et j’ai bien un titre gris qui s’affiche en position absolue en bas à gauche de ma fenêtre.

Bonjour entwanne,

Merci pour ta réponse

Je suis obligé de mettre un bottom:-70px pour caler le texte en bas, sinon il est à environ 25% du bottom: 0

J’ai raté quelque chose ?

Merci et bonne soirée

P.

N’est-ce pas dû au style appliqué par défaut par les navigateurs aux h1, qui leur donnent une margin-top et bottom ?

Si tu ajoutes margin-bottom: 0;, ça semble résoudre le problème.

Bonjour Migwel,

Merci pour ta réponse.

Et non Avec un margin-bottom: 0; le texte se retrouve centré verticalement

Je pense avoir presque tout essayé

Merci et bonne journée

P.

Tu nous as communiqué tout le contenu de ton CSS ou y a-t-il d’autres portions qui pourraient influer sur le positionnement de cet élément ?

à part ça, je ne vois pas

.sl-slider {
	position: absolute;
	left: 0;
	top: 20px;
	margin-top: 100vh;
	height: 100vh !important;
	background-color: #000000;
}
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100%;
	height: 100vh !important;
	left: 0;
} 

.sl-slide {
	z-index: 1;
}

Merci entwanne

Déjà fais attention à l’abus de !important : si tu en as besoin c’est que tu as un sélecteur qui prend la priorité. Il vaut mieux revoir tes sélecteurs que de risquer d’être pris de court plus tard quand tu voudras ajuster cette valeur ailleurs.

As-tu tenté d’inspecter ton élément pour voir les styles qui s’y appliquaient réellement ? (Clic droit > Inspecter l’élément)

En utilisant TryIt de w3schools.com, si j’ajoute un margin-bottom: 0, ça fonctionne bien sous Firefox.

Merci à vous (conseils, tests). Le problème est donc ailleurs

Pourtant j’ai bien cherché… beaucoup

Je reviens vers vous SOON

Bon week-end et merci,

P.

Salut, J’ai éssayé tes lignes de code, j’ai eu un résultat en bas à gauche. Je crois que’il doit avoir un problème soit avec ton navigateur ou avec ton éditeur de code. Essaie de vérfier les deux et certainement le problème sera résolu.

Merci Stanly,

Migwel a résolu le problème (margin par défaut). Désolé de ne pas l’avoir mentionné, je m’en suis aperçu en recommençant tout à 0

Bonne journée