Résolu Problème de CSS

Lagger

Lagger

Responsable des lags
Premium
Inscription
28 Novembre 2011
Messages
1 903
Réactions
581
Points
12 558
RGCoins
25
Bonjour, bonsoir

J'aimerai faire ce bloc en une div
a24Uthi.png


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:
 
Trier par date Trier par votes
Lagger a dit:
Bonjour, bonsoir

J'aimerai faire ce bloc en une div
a24Uthi.png


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:
Cliquez pour agrandir...
Montre nous ce que tu as pour le moment, ça peut nous aider à trouver ce qui ne va pas ;)
 
Voter positivement 0 Voter négativement
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:

https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FuQeOjys.png&hash=2fa5ad8496cc503d3a0ab98158c414d4

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>
 
Voter positivement 0 Voter négativement
Maxime' a dit:
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:

https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FuQeOjys.png&hash=2fa5ad8496cc503d3a0ab98158c414d4

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>
Cliquez pour agrandir...
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:
xNAEeA9.png
 
Voter positivement 0 Voter négativement
Retour
Haut