Impossible de caler un texte en bas

Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 16 mars 2023 à 11:33
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 19 avril 2023 à 14:20

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 :(

Je vous donne mon code initial donc :

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

}

Pour ce qui est des CSS, 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>

Merci pour votre aide et bonne journée,

E.
Macintosh / Firefox 109.0

3 réponses

Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
4 avril 2023 à 10:32

Bonjour txiki & jordane45,

Merci pour vos réponses.

@txiki :

.enba h1 car il vise le h1 de la classe enba. Ce n'est pas correct ??? :/

Je ne confonds pas HTML et CSS, c'est la question qui a été maladroitement posée, désolé ;)

Merci pour le font-size... compris (merci jordane45 pour ton lien;)

Opacity 0.3 : Oui oui, c'est normal :)

Pour en revenir à ton code, il ne fonctionne pas, il s'applique à l'image de fond  et le font-size n'agit pas (on a beau le changer... rien :(

Aurais-tu une idée ?

Merci pour ton aide, bonne journée,

E.

0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 516
9 avril 2023 à 14:58

Excuse moi ! j'ai raconté n'importe quoi.
 

.enba h1 {
  position: absolute; /* essai en mettant en commentaire cette ligne */
/*  position: absolute; */ /* comme ici par exemple */
  bottom: 0; /* position en bas du titre */
  left: 0; /* position gauche du titre */
  right: 0; /* position droite du titre */
  top: auto; /* position haute du titre (pourquoi auto ?) */
  opacity: 0.3;
  font-size:15vw;
  vertical-align: bottom; /* alignement bas du titre (dans un <td>, <div> */
}

Je pense que tes éléments bottom, left, right et top contredisent ton vertical-align. Il y a longtemps que je n'ai plus pratiqué. Désolé !
Cdlt !

0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
19 avril 2023 à 14:20

Bonjour txiki,

Merci beaucoup pour ta réponse. Malheureusement ce n'est toujours pas ça :(

Mais encore merci et bonne journée,

E.

0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 516
31 mars 2023 à 10:05

Salut Eritou,
Ton fichier css est le premier qui contient une classe
.enba h1 (???) D’où tu sors ton espace h1 ? Une classe ne doit pas comporter d'espace et le h1 est la balise html pour les titres de premier plan (le plus gros).

Le second code est du html. Tu mélange tout.

Ensuite:

font-size:15vw; je ne connais pas la valeur vw. C'est soit des px, du em etc...
opacity: 0.3; ??? c'est presque transparent ça !
.enba { /* nom de la classe */
  position: absolute; /* A virer */
  bottom: 0; /* A virer */
  left: 0; /* A virer */
  right: 0; /* A virer */
  top: auto; /* A virer */
  opacity: 0.3; /* pratiquement transparent */
  font-size:1.2em; /* taille relative */
  vertical-align: bottom; /* alignement en bas du texte */
}

Essaie avec ces paramètres...

Bonne chance !


-2