Problem with "Build a Landing Page" project

Problem with "Build a Landing Page" project
0
#1

Hi,
I’m just starting on this project.

However I can’ seem to align properly horizontally the nav bar.

Am I starting the project the right way? Any suggestions without giving me the precise solution ?

I used page-wrapper div property, is this right?

Regards,

My codepen: https://codepen.io/theoask/pen/pGPZPM

My code so far:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<div id="page-wrapper">
<header id="header">
   <div class="logo">
     
     <img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Keyboard_NIHAR.png" />
</div>
          
          <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#Models">Models</a></li>
      <li><a class="nav-link" href="#Demo"> Demo </a></li>
      <li><a class="nav-link" href="#Pricing"> Pricing </a></li>
            </ul>
</nav>
</header>
    
      <section id="hero">
  <h2>Handcrafted, home-made masterpieces</h2>
        
        
        <embed src="https://www.youtube.com/watch?v=CKSBdR_UiJE" autostart="false" height="30" width="144" />
        </div>
    
1 Like

#2

Ok guys I’ve know advanced quite a lot in the HTML and CSS

However for the CSS of the nav bar, I don’t know how to insert some space (padding ?) at the bottom of the fixed position nav bar so that I can scroll the webpage without interfering with the nav bar.

Any idea ?

0 Likes

#3

Your navbar is fixed and has a size. The section you’re going to wants to go to the top but, you have a navbar there. You may want to think about adding some padding to the top of the section you’re going to.

0 Likes

#4

The workaround I used on this project was to give the nav-bar a solid background then make sure to pad the top elements so they pop out underneath it.

0 Likes

#5

I’ve added some padding-top to my #Models section, so now it’s better, but still when I scroll down the webpage my navbar still interferes with the content.
Any idea how could make sure that I can scroll down properly? Right now I’m stuck…

0 Likes

#6

Additionnally, why do my font awesome icons do not display??I used standarf free font awesome icons…Is the syntax bad?

0 Likes

#7

Hi @Theoask, your html looks fine. It’s the css that needs some work.

First: each flexbox in a webpage is a normal box but with flexible items in it. So, if you want the items in the nav to be flexible, you have to give the direct parent the display:flex;

You can put one flexbox inside another. So you could use flexbox to arrange the items in your header, but also to arrange the items in your nav. Just make sure you turn the right box into a flexbox.

Another thing: most boxes take the size of their content. No less, but also no more. If the items in a box are small, without padding, then the whole box will be small and the items will be close together.

That’s something you don’t want in the navigation of a page. So make sure the list items are large enough to see and to click on with a mouse or finger (tablet). Use padding to do that. The padding area is clickable! A margin isn’t!

It really helps to put this code on top of the css while you’re working on it. Makes you see what you’re doing.

* {
  border: 0.1px solid red;
}

Good luck!

0 Likes

#8

If you fix an element, it’s taken out of the normal flow of the document. The other elements act as if that fixed part isn’t there.

A combination of a solid background on the fixed part (the header in this case) and some extra margin-top on the main content would help.

0 Likes

#9

Hi,

I’ve made osme changes. Still the navbar interferes with the content when I scroll down…I don’t understand.

Also what does the page wrapper do?

I would also like to align the li items on the far right of the screen , in fixed position

0 Likes

#10

It’s just the effect of an element taken out of the normal flow. The other elements don’t know it’s there. It’s like none of them is able to notice the header.
You’ll have to tell the other elements, in this case the box around the main part of your page, to put some extra space between themselves and the top of the page.

Without the fix, they would just keep a little bit of space between them and the header.

0 Likes

#11

Also, your header doesn’t know you want it all the way to the end. It takes the size of content now. It needs a width.

0 Likes

#12

Ok. I’ve set the width of the header, but in pixels its hard tio find the right value. Should I use another type of measurement, such as percentages or rem ou other?

How can i use “media” syntax so that automatically reshapes the boxes and elements resize to the good size (responsive design) on tablets and smartphones?
Should I use “media” syntax on each individual container or boxes or just on the header?

Maybe a “wrap” property I read too ?

But right now I’m still trying to figure out how to add some margin to the other elements than header so that the nav bar scrolls the right way, without interference

0 Likes

#13

Here you’ll find a good explanation of flexbox and how to put the elements, like in your header, in the right place.

0 Likes

#14

Yes thanks. I need to rewordk the basics in flexbox. I had read this page, but not enough closely I think…

0 Likes

#15

Ok. Lets go on. For now Iam trying to center the elements in section= #Models

In the CSS of #Models; I transformed it into a Flexbox (display:flex) and flex direction as column so as to use an align-items property.

However the email and submit items do not center on the page for an unknown reason…

0 Likes

#16

I’ve struggled with flexbox for a long time while learning it in places like this.
And then I used it in a real website. I’ve never in my whole life made so many mistakes in such a short period of time, never learned so much and never enjoyed making mistakes before building that website. :grinning:

I googled everything problem I encountered. Learning to code is like learning to become a carpenter. You have to practice.

Flexbox isn’t easy, neither is position, grid or the cascade itself. But if you keep using them, you’ll get there.

Good luck with your website!

0 Likes

#17

I learn fast :slight_smile:

1 Like

#18

So do I, but doing it works best. :sunglasses:

In case you’re interested, here is the website I rebuild. It was old and I modernised the html, or most of it. And I’ve written a new css. It wasn’t responsive before, the whole thing was more than eight years old. Some of the pages were styled by turning them into a table.:grinning:
So it was lots of work, but lots of fun also.

https://www.mensa.nl

0 Likes

#19

What do you think of my work so far?

I still have problems aligning the

0 Likes

#20

It looks better, but still needs a lot of work in the css.

I can’t help you with font awesome as I’m not familiar with that.

I think what you really right now is to sit back and think what you want in each box on that page. Don’t think about techniques like flex, but just about the layout.

Do you want the items next to each other or on top of each other? How much space do you want between items? Do you want the items to almost touch each other with a small margin, or do you want them to be on either side of a wide box? Is it important that the different items are on one line? Or not. (think of the header: logo and nav are on one line, but is that important?)

Figure out which boxes there are and which one is an item in another one. And decide how you want all those items to behave inside the box that is their parent element.

Flex is only useful if you have a box with more items and you need to arrange them.
Float comes in handy if you only need stuff to be on one or either side of a box.
And grid will help you to create a whole layout with rows and columns, but if you’re not familiair with it, don’t use it for now.

The best tool in web development is often a pencil.
Just draw a sketch on paper with the boxes. And draw a sketch of the most important boxes, like the header. And then ask yourself which technique is going to help you to get everything in place.

1 Like