CODEWITHSUNDEEP
htmlcss
Anne Rebb
Anne Rebb

Reputation: 305

How to align username outside the bubble in chat?

I need to put the user's name on top of the message box, just like it is on Messenger, but I'm not getting it, I've tried using position several times and I can't, someone could help me please? I have no knowledge of CSS so it becomes very difficult for me

And if I add the name above the message box, what should I do to not show the name more than once if the user sends more than one message? Should I use any display in css?

This is how I want:

check it

 .me{
        float: left;
        clear: both;
        color:black;
        background-color:yellow;
        margin:2px;
        border-radius:30px;
        padding: 10px;
        display: inline-block;
       
       
    }
 .user{
       font-size:0.6rem;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="me">
        <div class="user">Anne</div>
        <span>This is a hidden message</span>
    </div>
    <div class="me">
        <div class="user">Anne</div>
        <span>Please tell me how to make it</span>
    </div>
</body>
</html>

Upvotes: 0

Views: 110

Answers (2)

Ghayas Ud Din
Ghayas Ud Din

Reputation: 335

.me {
      float: left;
      clear: both;
      color: black;
      margin: 2px;
      padding: 10px;
    }
    p.msgs {
      margin-top: 5px;
      margin-bottom: 0;
      padding: 1rem 2rem;
      border-radius: 30px;
      border: 1px solid #000;
      background-color: yellow;
    }
    p.name {
      margin-bottom: 5px;
      margin-left: 10px;
    }

    .sender-img-box {
      border-radius: 50%;
      width: 30px;
      height: 30px;
      margin-top: auto;
      overflow: hidden;
      margin-bottom: 5px;
    }
    img.sender-img {
      width: 30px;
      height: 30px;
      display: flex;
      vertical-align: bottom;
    }

    div.sender-text {
      margin-left: 10px;
    }
    .msg-box {
      display: flex;
      flex-direction: row;
    }
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="me">
      <p class="name">Alex</p>
      <p class="msgs">This is a hidden message</p>
    </div>
    <div class="me">
      <p class="name">David</p>
      <p class="msgs">This is my first message</p>
      <p class="msgs">This is my second message</p>
    </div>

    <div class="me msg-box">
      <div class="sender-img-box">
        <img class="sender-img" src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
          alt=""
        />
      </div>
      <div class="sender-text">
        <p class="name">Alex</p>
        <p class="msgs">This is a hidden message</p>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Spectric
Spectric

Reputation: 31992

Just surround it in another layer of <div> like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="messagecontainer">
John Doe<br>
    <div class="me">
        <span>This is a hidden message</span>
    </div>
</div><br><br><br>

    <div class="messagecontainer">
    Jane Doe<br>
        <div class="me">
        <span>Please tell me how to make it</span>
    </div>
    </div><br><br><br>

</body>
</html>

Gives the following result:

.me{
        float: left;
        clear: both;
        color:black;
        background-color:yellow;
        margin:2px;
        border-radius:30px;
        padding: 10px;
        display: inline-block;
       
       
    }
.messagecontainer{
  text-align:start;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="messagecontainer">
John Doe<br>
    <div class="me">
        <span>This is a hidden message</span>
    </div>
</div><br><br><br>

    <div class="messagecontainer">
    Jane Doe<br>
        <div class="me">
        <span>Please tell me how to make it</span>
    </div>
    </div><br><br><br>
        <div class="messagecontainer">
    Aniox<br>
        <div class="me">
        <span>Ok</span>
    </div>
    </div><br><br><br>

</body>
</html>

Upvotes: 0

Related Questions