Help Appreciated: HTML Coding Photo/Chat Bubbles

I’ll do my best to explain what I’m trying to do. If Im not making sense, please inquire below. Okay, so I have this code I’m working on for a posting template. I have the code, tweaked the code, etc. I am trying to make the red/blue chat bubbles with photo/name separated from the code. Preview below:

HOW IT’S SUPPOSED TO LOOK IMAGE:

NEW CODE LINK
https://codepen.io/ProfessorSamoff/pen/QQrPPy

When I go into the code (posted below) it doesn’t show any images posted/places for the links of the photo. If anyone can help, I’d appreciate it. The only place there is a spot for one of the images is at the top and that isn’t correct…

Thanks!

1 Like

Hi @lilforceghost,
I can’t see the code.

As @germanbobadilla said, you can’t share a code from the Try It Editor, because that’s local on your browser. So you probably have to put it on a CodePen, or just directly show us your code.

@germanbobadilla & @Catalactics

Sorry about that! I’ll replace the link in my FIRST message since it’s sayin I can only do two links in one post.

Let me know if that doesn’t work :slight_smile:

Let me see if I understood.

You want your paragraphs to be styled with a different background, right?

Also, try to separate your html from the CSS. It’s easier to maintain and debug. And remove the HTML that you’re not using.

What’s inside the body is enough for codepen. No need to place the body and html tags.

1 Like

To clarify, The portions that look like a text chat:

The names above the red and blue bubbles, the bubbles themselves and the photos next to them: I cannot find a way to separate them from the full code. When it was coded, it all was coded into the full template with the gif and stuff at the top. Let me know if this doesn’t make sense!

Thanks again.

You can give them specific classes to what is similar, and other classes to what’s different.

For example:

<div class="buble-1">
  <p></p>
</div>
<div class="buble-2">
  <p></p>
</div>

Then on CSS, you can style them separately. But you can also style the children of a class, using psudo selectors, like :nth.

1 Like

I’m going to update the the information again, I think I fixed it but I do have one I would like to change the picture on. I cannot find any IMG section to change the floating pic.

I’m sorry if I’m such a noob haha I’ve been working hard on it all evening.

Thanks!

You’re not a noob. You’re coding.

I’ve been coding for two years, and two days ago I searched: “How to comment in css.”


In order for us help you more with your task, please, break your code in two. Have the HTML separated from the CSS.

1 Like

Well I appreciate the encouragement. :slight_smile:

I do have to ask…Is there a specific way of separating the two? I’ve honestly never have done that. I just wanted to clarify on that.

1 Like

Yes…

You see the HTML box where you have all the code? That’s where HTML lives.

And everything that you have between has to be put in the box that says CSS.

1 Like

Hey! Sorry about the late response. Weekend stuff and all of that. I’m going to update the link above, once again, and I’m not sure if I did this right but I think so. :slight_smile:

Thanks!