Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB2] Mettre un titre sur une image


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 30 Juin 2020 - 13:01

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour,

Mon problème est tout con, je le sais mais je ne sais pas pourquoi cette fois, je n'arrive pas à faire en sorte que mon titre passe au-dessus d'une image.
La difficulté c'est que je code une fiche dans une autre fiche et du coup, il y a peut-être des spécificités que je ne parviens pas à maîtriser, je ne sais pas...

Soit le texte reste sous l'image, soit lorsque je fais des margin négatifs c'est l'ensemble de la fiche de base qui bouge dans la zone dédiée aux messages... Bref je n'y comprends rien du coup. Il doit y avoir un truc de base qui m'échappe je pense...

Comment je peux régler mon souci du coup ?

Voici le code html :

Code:
<link href="https://fonts.googleapis.com/css?family=Wire+One" rel="stylesheet"/><div class="compte"><h1>Compte de PSEUDO</h1><div class="compte-contenu1"><h3>Mes compétences</h3><div class="compte-text"><div class="competence">COMPETENCE 1</div><div class="competence">COMPETENCE 2</div><div class="competence">COMPETENCE 3</div><div class="competence">COMPETENCE 4</div></div></div><div class="compte-contenu"><h3>Mes lieux</h3><div class="compte-text"><div class="fichelieu"><div class="lieutitle"><img src="https://zupimages.net/up/20/23/9g1x.png" width= "400px;" /><span>Nom du lieu</span></div></div></div><div class="compte-contenu"><h3>Mes équipements</h3><div class="compte-text"></div></div><div class="compte-contenu"><h3>Mes objets/animaux</h3><div class="compte-text">blablablablablablablablabla</div></div></div></div>

et le CSS associé :

Code:
/**************************************************************
            COMPTE EN BANQUE
***************************************************************/
.compte
{
 width:600px;
 height: auto;
 background-color:#374357;
 background-image:url('https://www.transparenttextures.com/patterns/low-contrast-linen.png');
 margin:0 auto;
 overflow:hidden;
 font-family:'Calibri';
 }
.compte a
{
  color: #e8daaf;
}
.compte h1
{
  text-align: center;
  color:#aecde3;
  text-shadow:0px 0px 1px #aecde3;
  font-size:50px;
  font-weight:normal;
  font-family:Wire One;
  letter-spacing:10px;
}
.compte-contenu1
{
  height: auto;
  background-color:#4d5b71;
  background-image:url('https://www.transparenttextures.com/patterns/transparent-square-tiles.png');
  background-repeat: repeat;
  margin-top: 40px;
  margin-right: 40px;
  margin-left: 40px;
  margin-bottom: 30px;
  border:1px solid #aecde3;
  box-shadow:0px 0px 1px #aecde3;
  line-height:initial;
  opacity:0.6;
  transition:all 600ms;
}
.compte-contenu
{
  margin-top: 30px;
  height: auto;
  background-color:#4d5b71;
  background-image:url('https://www.transparenttextures.com/patterns/transparent-square-tiles.png');
  background-repeat: repeat;
  margin:30px 40px;
  border:1px solid #aecde3;
  box-shadow:0px 0px 1px #aecde3;
  line-height:initial;
  opacity:0.6;
  transition:all 600ms;
}
.compte-contenu1, compte-contenu:hover
{
  opacity:0.9;
}
.compte h3
{
  margin:0;
  padding:5px 10px;
  background-color:#2b2837;
  color:#aecde3;
  text-align: center;
  font-size:15px;
  font-weight:normal;
  font-family:Economica;
  letter-spacing:1px;
}
.compte-text
{
  background-image:url('https://www.transparenttextures.com/patterns/low-contrast-linen.png');
  height: auto;
  margin:20px;
  padding-right:5px;
  text-align:justify;
  font-size:13px;
  color:#d2d8e2;
  line-height:20px;
}
.competence
{
  display: block;
  text-align: center;
  background: #eee;
  padding: 2% 0;
  margin: 0 2% 2% 2%;
  font-family: 'Abel', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  transition: .5s all;
  color: black;
}
.competence:hover
{
  background-color: #536986;
  color: #ffffff;
}
.fichelieu
{
  position: relative;
  width: 475px;
  height: 400px;
  overflow: hidden;
  border: 1px solid #ffffff;
}
.lieutitle img
{
  padding: 10px 40px;
  z-index: 1;
}
.lieutitle span {
  text-align: center;
  color:#ffffff;
  text-shadow:0px 0px 1px #aecde3;
  font-family: 'Playfair Display', sans serif;
  font-size: 20px;
  font-weight: normal;
  letter-spacing:1px;
  z-index: 2;
  position: absolute;
  top: 0;
}


Dernière édition par Pizi le Mer 1 Juil 2020 - 12:59, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 30 Juin 2020 - 15:12

Coucou Pizi,

tu utilises des divs et ensuite elles ne sont pas fermées sur le contenu réel comme le titre.

Si tu déposes:
Code:
<div class="trucbidule"><span>Nom du lieu</span></div>

Juste avant :
Code:
<div class="fichelieu">

Ensuite la css a volonté:
Code:

.trucbidule
{

}




Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 30 Juin 2020 - 15:38

Si je positionne en absolute, il se met tout en haut de la fiche. J'ai peur qu'en dupliquant cette partie de code pour que le membre ait plusieurs lieux, je me retrouve à devoir tout le temps repositionner ce titre, non?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 30 Juin 2020 - 15:46

Pas besoin de mettre une position absolute.
Avec ce contenu:
Code:
<div class="trucbidule">Nom du lieu,Nom du lieu,Nom du lieu,Nom du lieu,Nom du lieu,Nom du lieu,Nom du lieu,Nom du lieu,Nom du lieu,Nom du lieu</div>

Il faut attribuer une hauteur minimum, un height an auto et un max-height et au delà on a un ascenseur:

Code:
.trucbidule
{
min-height: 30px;
height: auto;
max-height: 90px;
overflow-y: auto; 
}

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 30 Juin 2020 - 16:17

Comment positionnes-tu le texte sur la banderole du coup sans une position absolute ?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 30 Juin 2020 - 16:44

Alors il faut donner une largeur à cette div Pizi en pourcentage:

Code:

compte-contenu{width: 86%;}



Je vois aussi que tu as cette div ayant une class plus ou moins identique.
Si tu veux lui donner la même dimension, utilises plutôt:

Code:

div[class^="compte-contenu"]{width: 86%;}


Puis la class ajoutée:
Code:
    .trucbidule
    {
position: absolute;
width: 250px;
color: black;
margin-left: 8%;
text-align: center;
height: 30px;
margin-top: 30px;
z-index: 999;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

    }

Il faudra peut être adapter la valeur du margin-left en fonction de la largeur attribuée.
Ensuite, j'ai donné une largeur de 250px.
Et ajouter la propriété ellipsis:


https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Donc si le membre dépasses de la largeur imposée, tu auras de petits points ....

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 1 Juil 2020 - 11:23

Bonjour,

Ah oui ! C'est parfait ! Merci beaucoup !
Je ne pensais pas que quelque chose, habituellement si simple allait me donner autant de difficulté :/
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Juil 2020 - 11:45

Hello Pizi,
de rien chère amie.

Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.

Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.



Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Juil 2020 - 16:33


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum