Need some help with HTML/CSS

If I understand you correctly you would often do that using rgba() on the parent container. You can’t just set the opacity on the container as that will make the child elements transparent as well.

Example:
https://codepen.io/lasjorg/pen/rNWGLKY

2 Likes

True. But I want to separate the heading from the paragraph. Would I put the div container before the paragraph but after the heading for that to work?

Not sure I understand the question.

The paragraph is inside the container. If you do not want the heading inside the same box as the paragraph, then yes you would have it outside/before it.

That solved my issue. Thanks! Hugely appreciated.

1 Like

If I wanted to put multiple containers for separate paragraphs would that still function the same? Or would I have to add the coding for each paragraph separately?

Did you try it? You should really just test it.


You can just duplicate the HTML and change the text. As long as you keep the container class it should work just fine.

You may want to make sure the class name is appropriate though, it was just an example I posted. I wouldn’t normally add all those properties to a container class. The CSS that has to do with the layout (max-width, width, padding, margin, etc.) can stay on the container, but the look (background-color, etc.) should really be on a separate class. I updated the Codepen example, just in case.

Code
.container {
  max-width: 980px;
  width: 80vw;
  margin: 0 auto;
}


.transparent-text-box {
  background: rgba(17, 49, 86, 0.7);
  color: #f7f7f7;
  font-size: 1.8rem;
  line-height: 1.4;
  padding: 1.4rem;
  border-radius: 2px;
}
<div class="container transparent-text-box">
  ...content
</div>

What do you mean?

I updated the selector for the p and a in the example, just to scope them to the box. Like I said it was just a quick example and wasn’t intended to scale to a real site.

Correction… apparently that only works with headings, not containers. Not sure how I will be able to do separate ones then… would it matter since it is a separate div? just as long as my css is flowing in the correct direction?

I’m trying to create multiple opaque container boxes for text. I’m not sure how to ensure they are separate in the coding so that they can all move separately of each other in terms of design for the page layout. Would it be possible to add elements to the containers?

At this point, I would suggest you create a Codepen with your code so we can see what you have and what you are trying to achieve.

I’m having a hard time understanding what the issue is.

I’m trying to turn this design:
Screenshot (159)
into reality. Just having some minor difficulties with how to make each container as shown, independent of each other so that they can be positioned like shown.

Well, that is a completely different question and doesn’t relate to the initial one.

You would give the text boxes their own parent container that does the layout. It can be implemented in many different ways and will also depend on the responsive design (e.g. when will they stack, is it always going from a two-column to one-column layout, where will the icons go when stacked, etc., etc.).

Like I said, if you post a Codepen link with your code we can see what you have tried.

Sorry it took so long to make this Pen.
Any help/suggestions would be appreciated. Still learning how to code efficiently and what better way than trial and error.

Hi there,

Here are a few things I see with your CSS/HTML:

  1. Don’t repeat selectors. You have .services-section listed twice in your CSS.
  2. In your html, you have both a services-section class and id. They should have different names.
  3. The reason for classes is so you can reuse the class for different elements. Instead of .container-screen and .container-research with identical CSS rules, create one class for each of those sections.
  4. W3schools has an html validator where you can copy/paste your html and it will find errors. Since you don’t need the <head> info with Codepen, you can ignore those errors.

As @lasjorg said above, put the four text boxes in their own container and then style that container so they are in two columns, making sure to keep it responsive.

Hope this helps.

I’ve tried your advice for #3 but I keep getting crazy layouts that aren’t close as I want them to be. Sometimes it just throws out the entire text into right field. Not sure what I’m doing wrong at this point. I did have it going how I wanted it. Even just changing up the #1 and #2, there were no issues till I changed up the classes to reflect your advice. I apparently didn’t do it correctly.

It can be hard to explain. I made a little demo.

A post was split to a new topic: Are there PDF’s for the FCC lessons?

Well, it is very difficult for me lol. I tried it, loosely mirroring what you did. It worked somewhat on codepen but not so much with Visual Studio Code. I’m getting like a full box and nothing is separating. Might need to try and tinker around with the measurements. I’m trying to get a 2x2 stack with some marginal space in between to fit a small graphic over the edge.

When I increase the max-width of .box, I get a 2X2 stack in CodePen. Note though, for narrower screens like tablets and phones, they will not stack anymore, and you might want a media query to change the width of the boxes.

I noticed that. But I’m having difficulties now trying to move the box. Also don’t like how mine is turning out into one large box behind another box for whatever reason inside VSC. I was able to figure out by trial and error where the problem was at. Thanks for all the help.