Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

While working on the Technical Document cert. project I’ve created a nav bar on the left side similar to the demo page. My problem is that when i resize the preview page window and have the option to scroll horizontally, the text of the main section on the right will scroll and overflow into the nav bar on the left. I’ve tried many suggestions from google to no avail. I think there’s a more fundamental problem I’m not seeing. Apologies for sloppy code, I’m a beginner.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charsetf="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  
  
  <main id="main-doc">
    <div class="nav">
      <nav id="navbar">
        <header class="navhead">HTML Documentation</header>
          <div class="nav-list-div">
            <p class="nav-list"><a style="text-decoration: none" class="nav-link" href="#Introduction_to_HTML">Introduction</a></p>
            <p class="nav-list"><a style="text-decoration: none" class="nav-link" href="#Metadata_in_HTML">Metadata in HTML</a></p>
          </div>
      </nav>        
    </div>
    
  <section class="main-section" id="Introduction_to_HTML">
    <header class="main-doc">Introduction to HTML</header>
    <p class="intro-desc">HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.</p>
    <p class="intro-desc">HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.</p>
    
    <ul class="intro-list">
      <header class="intro-list-header">A few examples of elements being used:
      </header>
      <li>&lt;h1&gt;This is the syntax for a header.&lt;/h1&gt;</li>
      <li>&lt;p&gt;This is the syntax for a paragraph.&lt;/p&gt;</li>
      
    </ul>
  </section>
  <section class="main-section" id="Metadata_in_HTML">
    <header class="main-doc">Metadata in HTML</header>
  </section>
    
  </main>
</body>
</html>
/* file: styles.css */
.nav {
  border-right: 4px solid lightgray;
  overflow: hidden;
  box-sizing: border-box;
  
  width: 350;
  height: 100%;
  position: fixed;
  left: 0;
  
}

.main-section {
  position: relative;
  box-sizing: border-box;
  
 
  left: 375;
  width: 60vw;
  overflow: scroll;
  margin-right: 100px;
  
  
  
}

header.main-doc {
  font-size: 30px;
  padding: 40px;
}

header.navhead {
  font-size: 25;
  text-align: left;
  margin-top: 15px;
  text-indent: 30px;
  
}

.nav-list {
  font-size: 17px;
  border-top: 1px solid black;
  height: 3;
  padding-top: 10px;
  padding-bottom: 10px;
  text-indent: 30px;
  
}




.nav-link {
  color: inherit;
}

.intro-desc, .intro-list {
  font-size: 17;
  padding-left: 70;
  padding-bottom: 20;
  margin-top: 0;
}


  
.intro-list li {
  margin-left: 50px;
  padding-top: 20px
}

html {
  font-family: sans-serif;
  box-sizing: border-box;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

you don’t have ./ in your

css file.

width value is missing px, vw, or %

font-size value is missing px, vw, or %

value is not defined

Also check values here.

Thank you for these corrections. I am still having the original overflow issue, but this is indeed helpful to improve proper coding habits.

Something i also notice is that on the demo project, if you resize the window the nav bar disappears, leaving only the main section text. If anyone knows how to make that happen that would be quite helpful as well, likely solving the entire issue.

For your overflow issue, you could set a margin to your main element. Its not ideal, but is how I solved this problem for my own project a while ago :confused:

You can hide elements using ‘display: none’.
Tho I’d not recommend this solution for your Technical documentation page project with freeCodeCamp, you might enjoy playing around with it in your own projects.

with @media screen only (max-width: x) {
.nav {
display: none;
}
}
I can make the nav bar disappear depending on window size, but this is not a perfect solution nor does it look great. Also, i was wrong. The nav bar moves to the top of the screen in the demo project in a small window, it doesn’t disappear. This one seems to have me stumped. I would think making a div have a solid border nothing else can flow into would be simple, but that doesn’t seem to be the case.

This is because your elements have a max width and height. So they overflow.

You can set overflow. but then you’d not be able to use your navbar elements.
CSS Overflow (w3schools.com)

If you’d like a smaller nav bar for mobile that is still useful, you could try creating two nav elements, one for mobile and one for browsers. Swapping what is hidden and what is visible depending on screen size.
However, again I would NOT use this solution for your freeCodeCamp project.

Later much of this can be done with JavaScript.

I think I am going to simply code this as though it will always be in fullscreen on a computer. I originally wanted to code this more thoroughly so it would be something i could add to a list of projects for proof of experience, however your comment about javascript is convincing me i don’t need to be this thorough with this particular project. Thank you!

When your at a point where your making projects to go into a portfolio, I’d suggest adding projects your passionate about.

If your passionate about a freeCodeCamp project you did as a certification, Its better to refactor and further build out the code later if you intend them to go into a portfolio.

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