Hi everyone, im trying to turn my nav-bar into a flexbox but the flex properties don’t really seem to be working on it, for instance, I tried space-even and nothing happens… Please could someone tell me what im doing wrong.
Hi @jacobplw99
I suspect you are not seeing the effect you want to see because nav-bar has one child element which is a div. It is not even good practice to use id attribute for styling. You have lots of them in your HTML. I wonder why you would want to nest a element in a div.
Try something like:
<nav>
<a></a>
<a></a>
</nav>
You should take some time to review the proper layout of how the HTML should be structured. Here is a basic layout that can be built from knowledge from the FCC challenges.
<!DOCTYPE html>
<head>
<!-- Meta data about your page. If you were not using codepen.io, this is where the link to your CSS would be -->
</head>
<body>
<header>
<!-- Navigation bar -->
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Section1</li></a>
<a href="#"><li>Section2</li></a>
</ul>
</nav>
<!-- Heading 1 (h1) for title of page. Only one H1 element per page-->
<h1>This is my G-pen product!</h1>
<!-- Big image of your product and possibly a paragraph element describing the page -->
</header>
<main>
<section>
<!-- Split the main content of your page into sections -->
</section>
<section>
<!-- Split the main content of your page into sections -->
</section>
</main>
<footer>
<!-- Bottom of page with copyrite information, credit, small navigation items -->
</footer>
</body>
</html>
I want you to build your page off of this template. I’d suggest looking through the example FCC pens given at the start of each certification challenge and see how they structured the html.
As the previous comment suggested, the use of Div’s are messing up the struture of your navigation bar. Navigation bars are tricky, but they come down to using flexbox to arrange the navigation items in a row and then styling them to look good.
The navigation bar layout I gave is the one provided by FCC in the challenges. ID’s are mostly used for the navigating part of a navigation bar. You give each section of your page a unique ID so it can be linked up to the bar.
Your navigation bar should have the CSS code position: fixed; . This will ensure it is attached to the top of the page.
@michaelnicol, this is not necessary. Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
This is not a good idea. The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.
Just because it’s the one in the FCC challenges doesn’t make it correct. The FCC projects show one way the project can be completed. They are not a definitive answer.
Granted, when one researches (as one should) the majority say that a navbar consists of an unordered list. My point again is that one should research this and not look at the sample projects.
ahh okay… well I put each a tag inside a div to make it easy for me to move them around and style them…
okay, thank you Roma…
Providing a student with a solid foundation on which to program is a key part of learning. If you give a student the very basic layout, it can help push them in the right direction. All the code I gave them was the very basics of the Applied Accessibility and sub-sections. I never told them to not research other layouts, but simply gave them a place to start based on what they had learned.
I do agree my post came off as “use this instead as the correct way” even though their code can work, but I would say that it does more good then bad. My idea was to recommend a standard (in this case, the majoirty use ul) that can help them in the long run with styling and better code structure. I would say research does apply in every part of programming, but the layout is so basic that following a standard could be best for beginners to research off of. Although, I should be clear it is up to their own choice, this is just my opinion, and agree the user should research the problem themselves.
I would say that using the extra code (most of the layout I provided) that is not needed provides more benefit in the long run of enforcing good habits on how to structure a page. It doesn’t fail the tests to use it and can only give the programmer more insight into what it is truly happening outside of a fancy IDE.
i completely agree. teaching someone good practice is always more beneficial than teaching them the bare minimum to pass the tests.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.