Issue
So essentially, I've been stuck on this for a while, not exactly sure if this question is super obvious or not since I don't come from a frontend development background.
But essentially, I'm trying to design this thing that mimics the youtube live chat design (building an OBS plugin that integrates the youtube live chat API). A JsFiddle of the page can be seen here -> jsfiddle demo
Dont't mind the borders, I'm just using it to help me visualize the bounds of my divs. But my problem here is how do I get that text with the username and the comment to align directly next to the pfp image.
I've tried using float, flexboxs, inline properties, etc. And they don't seem to work, again Im not exactly sure if I'm using them properly since I am not a frontend web developer, my knowledge of css is simply through stack overflow and some google searches.
My ideal result is to aim as close to something like this:
.messageBox {
position: absolute;
width: 300px;
height: 500px;
border: 1px solid #d1d1d1;
overflow-y: auto;
}
.messageBox .header {
position: absolute;
width: 100%;
height: 50px;
border-bottom: 1px solid #d1d1d1;
}
.messageBox .header p {
position: absolute;
margin-left: 15px;
font-family: 'Roboto', sans-serif;
}
.messageBox .content {
width: 95%;
position: absolute;
top: 50px;
height: auto;
border: 1px solid green;
}
.messageBox .content .message {
margin: 10px;
border: 1px solid red;
font-family: 'Roboto', sans-serif;
font-size: small;
}
.messageBox .content .message .pfp {
width: 25px;
border-radius: 500px;
margin-right: 10px;
}
.messageBox .content .message .text{
margin-left: 15px;
}
.messageBox .content .message .text span{
color: #747474;
margin-right: 5px;
}<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="messageBox">
<div class="header">
<p>Live Chat Replay</p>
</div>
<div class="content">
<div class="message">
<img class="pfp" src="https://yt3.ggpht.com/ytc/AAUvwnjDRW6z60q7Db1fOB8-fHRjz4HcW_d-_sa9Ow=s88-c-k-c0x00ffffff-no-rj"/>
<p class="text"><span>Michael Collins</span>Hello world, this is a test message</p>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>Solution
So, you can achieve the same using floats, flex and grid.
I just edited your JSFiddle and have implemented a solution using flex. Check it here.
You may add some padding to give a better look to the box.
.message {
display: flex;
align-items: center;
}
.profile-pic {
width: 30px;
height: 30px;
border-radius: 50%;
}
Answered By - SNikhill Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.