Résolu Problème de CSS

[Lagger]

Bonjour, bonsoir

J'aimerai faire ce bloc en une div

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

    <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>

.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

 

[1899]

Bonjour, bonsoir

J'aimerai faire ce bloc en une div

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

    <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>

.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

Montre nous ce que tu as pour le moment, ça peut nous aider à trouver ce qui ne va pas

 

[Lagger]

Montre nous ce que tu as pour le moment, ça peut nous aider à trouver ce qui ne va pas

Avec ce que j'ai donné, j'ai ceci

 

[1899]

Avec ce que j'ai donné, j'ai ceci

Essaie de mettre un float: right; et de jouer avec les marges pour ton paragraphe ?

 

[Lagger]

Essaie de mettre un float: right; et de jouer avec les marges pour ton paragraphe ?

Y a juste l' "admin" qui se met a droite

 

[1899]

Y a juste l' "admin" qui se met a droite

C'est pas ce que tu voulais ?

 

[Lagger]

C'est pas ce que tu voulais ?

Non comme sur l'image, y a le nom et le mail dans la même div

 

[Woozy.]

@Maxime'

 

[WhiiTe']

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é
Pour le positionnement je vois que c'est déjà fait ici

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><?= $_SESSION['user]; ?> <br /> <span class="email"><?= $_SESSION['email']; ?></span></p>

 

[Lagger]

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é
Pour le positionnement je vois que c'est déjà fait ici

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><?= $_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:

    <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>

.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]

Salut Lagger,
Ta discussion étant résolue, je l'ai déplacée dans la bonne section.

En te souhaitant une bonne navigation sur le forum,
Whyouuu

 

[Lagger]

Salut Lagger,
Ta discussion étant résolue, je l'ai déplacée dans la bonne section.

En te souhaitant une bonne navigation sur le forum,
Whyouuu

Merci fu