Positioning Help -CSS

Hello wonderful peeps! My project for the Responsive Website Development lagged. I coded it. Left it (without comments). Came back months later determined to finish it and while I succeeded in passing all of the User Story tests–it does NOT display the way I intended/hoped.

Please, take a look and help me see what I’m missing. The Logo covers the nav menu. I’d hoped for the nav menu to overlay or at least make the background black so it looks like it overlays the logo (but beneath the logo) but I’m having positioning issues with it. Likewise with my form. You cannot even see it. It is hidden some place on the page due to positioning issues.

https://codepen.io/eo4wellness/pen/jOyrbez

If I understand your header image correctly then I would say that it’s more a background image and not a logo element. Try setting it as a background-image on the header instead.

Not really sure where it is you want the nav to be but here is an example of what I mean (you need to remove the img element from the header):

Example
header {
  width: 100%;
  height: 300px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("https://raw.githubusercontent.com/EO4wellness/T-I-L/main/HTML/free-code-camp-org/projects-folder/Product-Landing-Page/images/logo-w-background-banner.jpg")
}

nav {
  width: 70%;
  align-self: flex-end;
  margin-left: auto;
}

It won’t work at small screen sizes but you get the point.


You have to push down the #signup section using margin-top or padding-top. Right now it is underneath the header.

Check for typos in the CSS aligh should be align and margin-button should be margin-bottom.

1 Like

Ah, thank you so much! I’m not really certain I do get the point. I think something is missing in my understanding–a knowledge gap of sorts–about positioning of elements. I have a design layout in mind–like I would do using a hybrid of InDesign (for layout) and WordPress (for design format of the header) however when I try to replicate that using CSS and HTML, I failed. I did a quick mock up of the layout style I was trying to achieve.

The problem, as I see it, is if this were InDesign and this display was occurring, I’d fix it by sending the logo image to the back and popping the nav menu and form items to the front using the “arrange” function. However, I’m not certain how to do that similar tasks in HTML/CSS. I can see it is occurring that the image is covering over my nav and form items, however, I don’t know how to fix their positioning to fix the display issue.

Image of Mock Up I was going for…

I’m not certain I comprehend the distinction with the header image and background. When I tried to implement that, it cased the page layout to break the tests for the assignment. Originally, I made unique images for the background header image and a mock-up logo Image, however, I couldn’t get them to position correctly so I combined them into one image to try to achieve the same effect–positioning is the issue–they didn’t turn out the way I’d hoped; like a word press blog header and menu. I’m not certain what I would have to do differently to replicate that familiar WP header look with navigation functions. I’m thinking making that nav section and form section with a black background might achieve it? And then positioning those elements near the edge of the right-hand margin of the top 1/3rd of the page. Since these elements need to be fixed and scroll with us down the page, I’m just really confused how to achieve it.

You can “cheat” and just have an empty img element. So just remove the link in the src but leave the element in to make the test pass.

But you can totally combine the logo with the background image. If you upload just the logo (without the city background) I might try creating an example. You should make the logo a png, or SVG, with an alpha channel (i.e. with transparency).

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.