Fond label profil/message qui ne se supprime pas

[Melodiam]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://wtf-wonderland.forumactif.com/t5-wonderlanders-4-4

Description du problème

Bonsoir !

J'ai un petit souci avec un code que j'utilise pour retirer le titre du premier label dans le profil du message...
Il retire le titre, pas de souci, mais le bloc noir derrière reste (comme vous pouvez le voir sur la capture d'écran)...

Voici le code CSS avec donc dedans le petit code que j'utilise :

Code:

.autour {
  width:240px;
  height:350px;
  background: white;
  border: solid 0px black;
}
.postprofile-avatar {
    height: 350px; margin-left:2px;
    width: 240px; margin-top: 30px;
    background-image:url('http://via.placeholder.com/250x350');
}
  .postprofile-avatar img {
    border: 3px solid #FFF;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.3);
    height: 350px;
    width: 250px;
}


.postprofile div:nth-of-type(1) span {
display: none;
}

.postprofile .label {font-size:0px;}
.postprofile .label span,.postprofile .f1{font-size:8px!important;}

.imagerang {
position: relative;
background:white;
top:-350px;
height:350px;
opacity:0;
transition:linear 0.5s;
}
.imagerang:hover {
  transition:linear 0.5s;
  opacity:1;
}

.contactsduprof {
padding: 10px;
margin-top: 10px;
text-align: center;
width: 250px;
margin-left: 3px;
display: inline-block;
border: 1px solid #ededed;
}
 
.ptitesinfos {
  font-weight: 500;
  background: black;
  font-size: 8px;
  text-align: center;
  text-transform: uppercase;
  padding: 5px;
}
 
.repptitesinfos img {
width: 210px; height: auto;
}


.repptitesinfos {
  background: white;
  font-size: 8px;
  color: black;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
}
 
.postprofile-info {
width: 250px;
  padding: 10px;
  margin-left: 3px;
background: url(https://image.noelshack.com/fichiers/2018/19/6/1526140594-fond-profil.png);
color: white;
}
 
.postprofile-info {
    font-size: 1.2rem;
    line-height: 1.3333;
}
 
.postprofile-name {
text-transform: uppercase; letter-spacing: 2px;
  position: relative;
  background: white;
  margin-top: -435px;
  padding: 20px;
  width: 250px;
  float: right;
  margin-right: 3px;
  border: 3px solid #FFF;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.3);
}
 
 
 
.postprofile-rank {
text-transform: uppercase; letter-spacing: 2px;
  background: black; color: white;
  padding: 20px;
  margin-top: 15px;
  margin-left: 3px;
  width: 250px;
}
 
.post-head {
border-bottom: 2px solid #202020;
}
 
.post-head .profile-icons {
    float: right;
    list-style: none;
    margin-right: -17px;
    margin-top: 30px;
}

 
.postprofile {
    color: #444;
    float: right;
  margin-top: 84px;
    font-size: 11px;
    position: relative;
    width: 292px;
}

Le dit code est celui-ci :

Code:

.postprofile div:nth-of-type(1) span {
display: none;
}


J'aimerais que le bloc noir (donc lié à la classe "ptitesinfos") ne s'affiche pas non plus.

J'ai essayé ceci donc :

Code:

ptitesinfos div:nth-of-type(1) span {
display: none;
}


mais cela ne marche paaaaas....

Sauriez-vous comment je peux faire ?
Merci !

[w00tw00t]

Bonjour Melodiam,

Ce bloc noir apparait à la fois parce que la couleur noire est spécifiée et parce que cette classe comporte un padding.

Code:

.ptitesinfos {
  ...
  background: black;
  ...
  padding: 5px;
}

Vous pouvez donc ajuster ces deux propriétés.
Si maintenant vous souhaitez supprimer cette bande noire seulement pour le premier bloc, vous pouvez utiliser ce code :

Code:

.postprofile div:nth-of-type(1) {
    padding: 0px;
}

Je reste à votre disposition pour plus de détails,

Cordialement,
w00t00t

[Melodiam]

Bonsoir Woot !

Cela marche parfaitement, je n'avais pas pensé au padding...
Merci beaucoup !