Technical Documentation Page

Web Development Bootcamp
1

I’m running into some issues with my tech doc page, so wanted to both ask for advice on how to fix, and start a topic for people to post their sites if they want to ask q’s or ask for feedback.

I strayed a little from the tech doc goal of the page, and have taken on a selected lyrics page from a favorite artist. I recognized I’ve taken some shortcuts here (code {display: none;}), haven’t yet added responsiveness, and it’s a bit of a weird format.

If anyone wants to help, I’m struggling to get scrolling to behave just right with pure CSS, and 2 fixed headers. So far, I’ve gotten things to scroll by repeating the image background in each header so they’re not see-through. I’ve found 2 issues that I can’t seem to resolve:

  1. The height needs to be fixed in px to get scrolling to work, but cuts off the content. It doesn’t matter if the height is 800 or 2000px; 95% of the content is showing. I thought it could be something to do with padding or margins accumulating, but haven’t had any luck with that yet.

  2. Linking goes to the top of the page. Want the nav-link to navigate to the text 380 or 410px down from the top of the page.

  3. Bonus: Hide the main content by default. Only show lyrics once the nav-link is clicked. For the album, show all associated songs once the nav-link is clicked.

Any help, especially on the 1st headache, would be amazing!

1 Like
2

As far as the first item goes, The problem is the way Codepen is displaying the page. I ran your code in VSCode and the lyrics are showing fine. They are a little close to the header.
2) The linking using VSCode works fine, sends the page to the right lyrics. It’s Codepen’s display again. It doesn’t work in Firefox the way it does in Chrome.
3) If you set #main-doc to display: none the lyrics will not show. You would have to use Javascript to show and hide items, and you would have to add a lot of extra code. It’s not an easy thing to do.

Hope this helps.

1 Like
3

Thanks for the heads up that codepen’s being weird! I will upload things to my github repo and see how it behaves in various browsers. Maybe will play with javascript for #3 after the course to start getting used to it.

I found a hack last night for the 2nd one to add the following to handle my 380px combined of header.
html { scroll-padding-top: 380px; }
Still close to the header, but I wasn’t having a good time hacking the padding so will have to try again.

4

I was so frustrated with Codepen for these projects that I stopped using it! I coded everything in VS Code and did live previews and devtools. I only used it to submit my projects.

5

That’s how I feel. I did the same thing.