Hi Pros,
trying my hands out on this documentation page and its taking me forever to get all correctly. I need help please. Kept complaining about these three issues:
. Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText.
When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element (e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding .
On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.
Hi, I did some poking around. For 1, its the “If…else statement” it doesn’t like. Just get rid of the … in the Id and headers and it should work. I don’t know if there’s a way to include the …
For 2, you can fix this by putting all the a elements in the Navbar on one line.
For 3, it doesn’t look like you’ve set up the navbar to be on the left side of the screen yet.
I think u can do a fixed navbar and then put the the rest to overflow-y : scroll ; that will fix the navbar and only let u scroll on the second half of the screen , where the text is
I’m experienced in this stuff (since 1992) but that doesn’t mean I know everything. I’m still learning. I’m going through this sites challenges as a refresher, to see what they suggest and how they suggest doing it because there’s different ways of doing things, as a refresher for me, out of interest to see what’s there, and to learn things and tricks I don’t know.
I haven’t gotten to this part of the challenges but I’ve inspected your code from the codepen and found:
There are 8 instances in your html that reference class="main-section" but you don’t have a .main-section element in your CSS code.
I’m guessing the challenge requires the code to have that class named specifically main-section in both places. Name whichever class you made intending to be what the main-section class element’s properties are supposed to do.
Also, as insight sharing a way to save lines and space in our code documents I see you have these elements in your css separately:
main {
display: block;
}
section {
display: block;
}
Since you’re giving those 2 tag elements the same properties you can add those 2 elements together:
main, section {
display: block;
}
I don’t know if the ‘run test’ process will burp at that and call it an error but in the real world it can be done that way.
The corresponding…what? I haven’t gotten to this challenge so I don’t know what it requires that sections text to say. Here’s how I would write that code myself for a project:
<html>
<head>
<style>
.nav_div {
position: absolute; /* makes the position "absolute" which means it follows any positioning that's set within this css element between the curly brackets */
top: 0px; // positions this element at the top of the page
text-align: left; // aligns the text left in this element
overflow: hidden; // this disables the scrollbar
}
.content { /* I should probably give this position properties. It's an example is why I have not done that. */
overflow-y: scroll; // enables Y-axis (up and down) scrolling if needed.
}
<body>
<div class="nav_div">
<p><a href="#hello_world">Hello World!</a></p>
<p><a href="examle.com">Another link</a></p>
<p><a href="example-too.com">A third link</a></p>
</div>
other stuff
and stuff
and more stuff
some stuff
and then some stuff
other stuff
<div class="content" id="helloworld">
<p>Hello World text</p>
</div>
</body>
</html>
In the example code above when the view clicks on the Hello World! link it will scroll the page to the ID address that I called by using <div id="hellowworld">
I gave the content <div> it’s own class and created the .content class both so I was giving each section of the page it’s own area, and so I had control over that area that I could control and design by giving the .content class element in the css more properties.
Again. I don’t know if the challenge would accept this way of doing it. It might want it done a specific way. There’s many ways to do the same thing.
I apologize but I’m going to avoid giving an answer for this one because I’m not sure how the challenge wants us to do it. There’s many ways to do this. What I normally do when writing a webpage is I avoid using code that isn’t going to scale properly on all devices. If I decide on a design that won’t scale properly on smaller screens with giant resolutions like a phone or tablet I either use .htaccess to detect the users device and direct them to a page coded for that viewport type or I’ll use a <meta> tag that scales the page depending on the users screen resolution.
I’m refraining from sharing that meta code and how to do it with .htaccess because I don’t want to give the answer IF one of those 2 solutions is the answer. I’m trying to help you figure it out without giving the answer.
I hope the effort I gave here was at least somewhat useful.
Thanks for the time you spent to reply…
without prejudice, I tried to apply suggestion on the .main-section in css, but it has nothing to do with the complaint I received while submitting…
Thanks for showing me my “DRY” fault…it escaped my mind to clean my code up before posting…
I’m still having issue with this though…It’s working fine as expected but don’t really know it kept complaining when I submit.
I didn’t expect my suggestion for your second part to work for the test and pass. That is how I would do it, and it works, without using any code references or anything. I wrote that from memory. The challenge course on this site wants it a specific way or it won’t pass it.
Try the challenge again and read the instructions word for word, character by character. Copy/paste what it says it needs for it to pass when you test it. If it still doesn’t pass use the Get Help feature to post the problem here so the community can look at your code and compare it to the instructions of the test. That would be much easier to figure out what’s wrong and help you get past it.
The help button in the challenges shares a link to the challenge and shares your code so we can look at it. You’ve posted the codepen so we have that to reference too.
Hi, this is the only challenge I have left in this challenge. My code works though, yet I don’t know why codepen refuses to pass it…
please check my code to know exactly what I did wrong. thanks
When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element (e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding .
Hi, the navbar links do not work for me when I try to use them. If you don’t break them up (i.e open and close the a element on the same line) it works for me.
Again, what I would do that would work but I’m not sure the test will accept, is I would place the <main> section in it’s own <div> and give that div a class ID that forces it’s position below the header using either top: value; or margin-top: value;.
You might be able to include a top: value; position or the margin property as I suggested to correct that in the .main-section class, in your css.
You don’t have a .main-section class but you’re using it in the html. Need to add a .main-section class in your css.
I have inspected your codepen since my last reply. I’ve found a few of the same whoppsies: You’re calling things in the HTML you don’t have a class for in the CSS therefore having the classes assigned in the html isn’t doing anything.
Here is how I’m inspecting your code and found these things:
I copied the html and css sections from the codepen into the same document in notepad++.
I wanted to see how many instances there were of main-section so I pressed CTRL+F (hotkey for the Find features) and pressed the count button. It came up with 8 instances of main-section.
I clicked on the Find Next button to see if there was an instance of it in the css. There isn’t.
I searched for instances of div. It only found one instance of those characters and it was a close statement </div>. It wasn’t opened anywhere.
I also noticed that you have id’s assigned to things that don’t have an id element for them in the css code, the same whoops.
Comb over your code really good both manually and with a search feature to insure everything matches and you have everything aligned. That may be the issue the test is finding (too?).
Hi,
thanks for opening my eyes to see what’s really wrong with the code…this is how coding humbles one intellectually… the frustration was unfathomable… I have been able to learn one or two things with this challenge. I am most grateful for your help
Hi,
I am grateful for your insightful insights and contributions. I understand every points you showed me on this challenge and I will improve on them all. Though my codes now work without making use of the .main-section in css. But I agree if used will add sauce to UI/UX of the project.
The instance you saw was a leftover of code cleansing I did…I deliberately used those elements I used because I only wanted to do my own code and see if it works…
Thanks for your time again. I’m most grateful
These test challenges require certain things a certain way in order for them to pass. When we’re coding on our own on our own project we can, of course, write them as we want. Playing around with the code as you did is a good thing. In my opinion as long as it works it doesn’t matter how it’s written, what style of code or names for things was used.
