Membres connectés récemment
[PHPBB2] Mettre un titre sur une image
2 participants
Page 1 sur 1 • Partagez
- 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 :
et le CSS associé :
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;
}
Pas besoin de mettre une position absolute.
Avec ce contenu:
Il faut attribuer une hauteur minimum, un height an auto et un max-height et au delà on a un ascenseur:
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;
}
Alors il faut donner une largeur à cette div Pizi en pourcentage:
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:
Puis la class ajoutée:
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 ....
- 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 ....
Hello Pizi,
de rien chère amie.
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.
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.
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum