CSS/HTML work with layers?

So, i’m doing the portfolio project, i have an image that goes on the right side of the page, so i added margin-left to it, now i have a <p> that goes on left side of the page but in the same line as the <img>. When i run the code the image overrides the paragraph… how can i make both visible?

Code:

    <div class="pageTwo">
    <!-- Here's the image, when i remove the comment it overrides
 <img id="profile" src="https://pbs.twimg.com/profile_images/826130342943809536/8l4ofPPh.jpg">
    -->
    
    <p id="Aboutme">Brazilian, Front-End Developer ,Computer Science's Student<br>with practical experience in project management, Software<br>Engineering, and creative direction; devoted to functional<br>programming and information architecture.</p>
  </div>

CSS:

   .pageTwo{
  background:url("http://wallpaper-gallery.net/images/black-and-red-wallpapers/black-and-red-wallpapers-9.jpg");
  height:600px;
  opacity:.9;
}

#profile{
  margin-top:130px;
  margin-left:800px;
  height:55%;
  border-radius:40%;
}

#Aboutme{
  font-size:25px;
  color:white;
  padding-top:300px;
  padding-left:120px;
}

Full Code Page: https://codepen.io/HeyCenturies/pen/ybMpzd?editors=1100

Margin sets the amount of space to block off so that nothing else will appear there…you have a margin of 800px to the left, which literally means, you have set a margin (blank space) of 800px wide on the left side of your image.

Haiyo!

The margin-left: 800px that you added to #profile is the major reason that things are getting pushed away. A quick but I-don’t-recommend-and-not-really-a-fix “fix” is to remove margin: 800px and add float: left to #profile; this way you can still play with margins and padding to get things lined up.

The problem you will then encounter is that the page, as it is now, won’t be responsive because everything is hard-coded with margins and paddings. Given that you have Bootstrap enabled, you should consider using Bootstrap to layout your entire portfolio—as it’s covered in the FCC curriculum, that’s probably the fastest way for you right now to have much better control over the flow of elements and have your portfolio become responsive.

If you are going to take the suggestion of using Bootstrap—I also recommend going with Bootstrap 4, too (that’s the default version of CodePen if you quick-add it using the drop-down menu in settings). While you may not necessarily want to learn to use flexbox right now, it’ll be very handy later. To get get a solid foundation to start, read the How It Works section here.

I hope that helps. :slight_smile:

1 Like

Hmm, thank you!

I managed to put them in a single row with col-xs-6 and, apparently ,
it solved my problem. But if i wanted to put a background-box to the <p>would it work? Just as i did in the .pageOne

I’m doing something wrong and the box is like taking a lot of space, which is probably the margin+padding space ( invisible space) , how can make the black-box fit only the <p> ?

https://codepen.io/HeyCenturies/pen/ybMpzd?editors=1100

The background is going “everywhere” because it’s currently applied to the column—you can simply apply to the paragraph element instead: <p class="block2">, and the background will only be applied to the paragraph. Please note that you will have to add padding and to the CSS for .block2 and change the margins for #Aboutme to make it look nice.

If you continue to have problems with the layout, it’s sometimes helpful to just start a Pen, make a few <div>'s, give them different background colours, and try making different layouts to—if you can’t do it easily (with the help of documentation), it probably means that you are missing something fundamental and it may be helpful to review someone the challenges.

Good luck. :slight_smile:

1 Like

Hi @HeyCenturies, for working with layers, the z-index property can be quite useful for certain features, to create layers.

With z-index, you assign the element a number. The element with the largest number will be in front of the other elements and so on, one relative to the other.

Here’s a link to a description of z-index: https://css-tricks.com/almanac/properties/z/z-index/

WARNING: if used too much, creating too many layers, it will slow down the rendering process.

Hope it helps!

Estefania.

1 Like

First, you need to understand the CSS box model.
HTML elements are either block elements or inline, meaning they are either contained and displayed in a box framework or they display flowing inline with the text the element appears with.

By default all block elements expand to 100% width of the block element they are contained in, but with fills up that 100% isn’t only the contents of the box. There are additional components or layers surrounding the content box that are included. They are still there even if they are set to 0. Think of them as wrappers around the box. Innermost layer is the padding. Next, is the border. The outermost layer is the margin.

That means, even if you set a box element with margins and padding, you mean see empty space on the webpage, but that empty space is still spanning 100% width of the enclosed area it’s in. That’s why the before the <p> is sitting outside of the <p> block.

This is a good detailed explanation of the CSS Box Model.

So back to your question. There are different ways to position an element, and yes, you can have overlapping layers with CSS.
The easiest way to fix is to put the <img> inside the <p> before the text so that it displays at the top of the <p> block element container.
Put a float:right; in the #profile style so that it floats to the right side of the <p> box. The text the follows will display at the top of the <p> and wrap around the img.

Floated elements do not define the dimensions of the box they are contained in. That means the floated image will not expand the <p> height if the text displayed will yield a box height that is shorter than the img height. So set a min-height in your #AboutMe style.

One trick to help with this is to temporarily use borders so you can see where are the block elements. If you use Firefox, the Web Developer plugin is a MUST-HAVE extension. Turn on the Outline for Block Level Elements to see the block element dimensions. Alternatively, you can temporarily put border styles on your css too, such as put this in your css: p { border: solid 5px aqua}

1 Like