YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

Résolu Problème de CSS

Lagger

Responsable des lags
Premium
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 238
    Réponse de Lagger Forums généraux 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
Vous devez être inscrit pour voir les images


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:
 

Hayzen.

VIP
VIP
Inscription
10 Août 2012
Messages
8 712
Réactions
4 059
Points
13 842
    Réponse de Hayzen. Forums généraux 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
Vous devez être inscrit pour voir les images


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
Premium
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 238
    Réponse de Lagger Forums généraux Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #3
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

Vous devez être inscrit pour voir les images
 

Hayzen.

VIP
VIP
Inscription
10 Août 2012
Messages
8 712
Réactions
4 059
Points
13 842
    Réponse de Hayzen. Forums généraux Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #4
Avec ce que j'ai donné, j'ai ceci

Vous devez être inscrit pour voir les images
Essaie de mettre un float: right; et de jouer avec les marges pour ton paragraphe ?
 

Lagger

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

Hayzen.

VIP
VIP
Inscription
10 Août 2012
Messages
8 712
Réactions
4 059
Points
13 842
    Réponse de Hayzen. Forums généraux Informatique ⌨️ Programmation Questions, aides et recherches générales Résolu : Problème de CSS
  • #6

Lagger

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

Fy Molly.

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

WhiiTe'

Ancien staff
Ancien staff
Inscription
22 Octobre 2011
Messages
14 065
Réactions
7 707
Points
18 005
    Réponse de WhiiTe' Forums généraux 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:

Vous devez être inscrit pour voir les images


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
Premium
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 238
    Réponse de Lagger Forums généraux 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:

Vous devez être inscrit pour voir les images


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:
Vous devez être inscrit pour voir les images
 

Whyouuu

Ancien staff
Ancien staff
Inscription
27 Septembre 2012
Messages
16 326
Réactions
6 904
Points
17 995
    Réponse de Whyouuu Forums généraux 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
Premium
Inscription
28 Novembre 2011
Messages
1 763
Réactions
576
Points
10 238
    Réponse de Lagger Forums généraux 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
 
Vous devez vous inscrire ou vous connecter pour répondre ici.

Discussions similaires


Mobile app for XenForo 2 by Appify
Haut