Need some help with HTML/CSS

HTML-CSS
#1

I am attempting to create a textbox that is transparent behind the text of <p>. I have looked around and noticed a few examples but they aren’t seeming to work. Here is my code. Maybe I need to change from sections to something else for it to work properly? Any help would be appreciated.

<div class="container"></div>

<section id="welcome-section" class="welcome-section">
    <h1>Welcome!</h1>
            <p>Welcome fellow writers, producers, employers, and friends. 
                Here, I showcase my written abilities as well as provide some small-scale services. 
                Feel free to contact me for inquiries.</p>
</section>

As for my CSS:

.welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: url("elpaso.jpg");
    background-size: 1920px 1080px;
    background-repeat: no-repeat; 
  }
  
  .welcome-section > p {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 1px #000000;
    text-align: center;
    font-weight: 900;
    bottom: 150px;
    left: 150px;
    right: 150px;
  }
1 Like
#2

<section> is technically just a <div>, so that can’t be an issue, but I fail to understand what you mean by “transparent textbox”, can you maybe show a picture with an example of what you’re trying to do?

1 Like
#3

Well, I’m trying to get a textbox that isn’t fully transparent but the opacity level is enough to see the background image. Sorry I wasn’t clearer.

1 Like
#4

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
#5

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?

#6

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.

#7

That solved my issue. Thanks! Hugely appreciated.

1 Like
#8

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?

#9

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>
#11

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.

#12

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?

#13

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?

#14

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.

#15

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.

#16

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.

#17

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.

#18

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.

#19

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.

#20

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

#21

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