Résolu Problème de CSS

Lagger

Responsable des lags
Contributeur
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 308
    Réponse de Lagger Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #1
Bonjour, bonsoir

J'aimerai faire ce bloc en une div


Mais je ne m'en sors pas trop, voici mes codes:

HTML:
    <div class="profile">
      <img src="<?php echo $_SESSION['avatar']; ?>" alt="avatar" />
      <p class="group<?php echo $_SESSION['rank']; ?>"><?php echo $_SESSION['user']; ?></p>
      <p><?php echo $_SESSION['mail']; ?></p>
    </div>
Code:
.profile{
  position: absolute;
  width: 330px;
  height: 120px;
  background-color: #FFF;
  border-left: 6px solid rgba(52, 73, 94,1.0);
  line-height: 120px;

}
.profile img{
  position: relative;
  float: left;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  line-height: 120px;
  vertical-align: center;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
}
.profile p{
  font-size: 24px;
  display: inline-block;
  line-height: 120px;
}
Merci d'avance :love:
 

HayzenRG

Ancien VIP
Contributeur
Inscription
10 Août 2012
Messages
8 666
Réactions
4 084
Points
16 902
    Réponse de HayzenRG Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #2
Bonjour, bonsoir

J'aimerai faire ce bloc en une div


Mais je ne m'en sors pas trop, voici mes codes:

HTML:
    <div class="profile">
      <img src="<?php echo $_SESSION['avatar']; ?>" alt="avatar" />
      <p class="group<?php echo $_SESSION['rank']; ?>"><?php echo $_SESSION['user']; ?></p>
      <p><?php echo $_SESSION['mail']; ?></p>
    </div>
Code:
.profile{
  position: absolute;
  width: 330px;
  height: 120px;
  background-color: #FFF;
  border-left: 6px solid rgba(52, 73, 94,1.0);
  line-height: 120px;

}
.profile img{
  position: relative;
  float: left;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  line-height: 120px;
  vertical-align: center;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
}
.profile p{
  font-size: 24px;
  display: inline-block;
  line-height: 120px;
}
Merci d'avance :love:
Montre nous ce que tu as pour le moment, ça peut nous aider à trouver ce qui ne va pas ;)
 

Lagger

Responsable des lags
Contributeur
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 308
    Réponse de Lagger Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #3

HayzenRG

Ancien VIP
Contributeur
Inscription
10 Août 2012
Messages
8 666
Réactions
4 084
Points
16 902
    Réponse de HayzenRG Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #4

Lagger

Responsable des lags
Contributeur
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 308
    Réponse de Lagger Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #5

HayzenRG

Ancien VIP
Contributeur
Inscription
10 Août 2012
Messages
8 666
Réactions
4 084
Points
16 902
    Réponse de HayzenRG Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #6

Lagger

Responsable des lags
Contributeur
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 308
    Réponse de Lagger Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #7

Fy Molly.

Vieil infographiste.
Contributeur
Inscription
11 Novembre 2014
Messages
2 489
Réactions
1 578
Points
8 249
    Réponse de Fy Molly. Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #8

WhiiTe'

Ancien staff RG
Inscription
22 Octobre 2011
Messages
14 196
Réactions
7 955
Points
22 675
    Réponse de WhiiTe' Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #9
Tu pourrais tout mettre dans un <p> avec l'email dans un span pour différencier la taille d'écriture, puis un petit <br /> et c'est réglé :mmh:
Pour le positionnement je vois que c'est déjà fait ici :mmh:



Au passage dans ton PHP, si $_SESSION['user'] correspond au nom d'utilisateur fais gaffe aux XSS en ajoutant un htmlspecialchars :p

HTML:
<p><?= $_SESSION['user]; ?> <br /> <span class="email"><?= $_SESSION['email']; ?></span></p>
 

Lagger

Responsable des lags
Contributeur
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 308
    Réponse de Lagger Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #10
Tu pourrais tout mettre dans un <p> avec l'email dans un span pour différencier la taille d'écriture, puis un petit <br /> et c'est réglé :mmh:
Pour le positionnement je vois que c'est déjà fait ici :mmh:



Au passage dans ton PHP, si $_SESSION['user'] correspond au nom d'utilisateur fais gaffe aux XSS en ajoutant un htmlspecialchars :p

HTML:
<p><?= $_SESSION['user]; ?> <br /> <span class="email"><?= $_SESSION['email']; ?></span></p>
Merci pour ta réponse mais ça n'as pas fonctionné..

J'ai réussi à régler mon problème en cherchant un peu sur des sites, je vous donne mais code:

HTML:
    <div class="profile">
      <div class="profile-avatar"><img src="<?php echo $_SESSION['avatar']; ?>" alt="avatar" /></div>
      <div class="profile-info">
        <div class="name group<?php echo $_SESSION['rank']; ?>"><?php echo $_SESSION['user']; ?></div>
        <div class="mail"><?php echo $_SESSION['mail']; ?></div>
      </div>
    </div>
Code:
.profile{
  position: relative;
  width: 330px;
  height: 120px;
  background-color: #FFF;
  border-left: 6px solid rgba(52, 73, 94,1.0);
}
.profile-avatar img{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  vertical-align: center;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
}
.profile-info {
    display: block;
    line-height: 120px;
    padding-left: 130px;
}
.profile-info .name {
    position: relative;
    top: 40px;
    font-size: 24px;
    font-weight: 500;
    line-height:24px;
}
.profile .mail {
    position: relative;
    font-size: 14px;
    line-height: 14px;
    color: #5f5f5f;
    top: 45px;
}
Voici le résultat:
 

Whyouuu

Ancien staff RG
Inscription
27 Septembre 2012
Messages
16 315
Réactions
6 903
Points
21 905
    Réponse de Whyouuu Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #11
Salut Lagger,
Ta discussion étant résolue, je l'ai déplacée dans la bonne section. :rgbasket:

En te souhaitant une bonne navigation sur le forum,
Whyouuu
 

Lagger

Responsable des lags
Contributeur
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 308
    Réponse de Lagger Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #12
Salut Lagger,
Ta discussion étant résolue, je l'ai déplacée dans la bonne section. :rgbasket:

En te souhaitant une bonne navigation sur le forum,
Whyouuu
Merci fu :D
 

Discussions similaires


Haut Bas