Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hello, I have a question about my code. I want my main section placed lower than the navigation header. For that, I’ve tried to set the margin top property of the main section (CSS line 33) . Unfortunately, the property I set not just applied to the main section but also to the “nav” element. Can someone tell me why is that? And how can I fix that?

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="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">
      <nav id="navbar">
        <ul>
          <header id="first"> JS Documentation</header>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
          <li><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></li> 
          <li><a class="nav-link" href="#Hello_world">Hello world</a></li> 
          <li><a class="nav-link" href="#Variables">Variables</a></li> 
          <li><a class="nav-link" href="#Declaring_variables">Declaring variables</a></li> 
          <li><a class="nav-link" href="#Variable_scope">Variable scope</a></li> 
          <li><a class="nav-link" href="#Global_Variables">Global Variables</a></li> 
          <li><a class="nav-link" href="#Constants">Constants</a></li> 
          <li><a class="nav-link" href="#Data_types">Data types</a></li>
          <li><a class="nav-link" href="#if_else_statement">if...else statement</a></li> 
          <li><a class="nav-link" href="#while_statement">while statement</a></li> 
          <li><a class="nav-link" href="#Function_declarations">Function declarations</a></li> 
          <li><a class="nav-link" href="#Reference">Reference</a></li> 
        </ul>
      </nav>
      <section class="main-section" id="Introduction">
        <header id="headIntro">Introduction</header>
        <p>
          JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
        </p>
        <p>
JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:
        </p>
        <ul>
          <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
          <li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
        </ul>
      </section>
    </main>
  </body>
</html>

section{
  margin-left: 290px;
}

header{
  font-size: 2rem;
  font-weight: bold;
}

nav > ul{
  height: 100%;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  float: left;
  margin-top: 3px;
  padding-left: 0;
  position: fixed;
}

.nav-link{
  background-color: #E5E4E2;
  display: block;
  margin: 1px;
  padding: 0.5em 0.8em 0.5em 0.8em;
}

.nav-link:hover{
  background-color: #C0C0C0;
}

#Introduction{
  margin-top: 30px;
}

@media (min-width: 600px){
  .nav-link{
    font-size: 1.2rem;
    padding: 0.4em 0.8em 0.4em 0.8em;
  }
}

@media (min-width: 1500px){
  .nav-link{
    padding: 0.7em 0.8em 0.7em 0.8em;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

You are using position: fixed on the nav list. Do you know of a way you could make it stick to the → top ← of the view port?

3

I’m not sure, Do I have to use sticky position?

Btw, why is that in the first place? I can set the margin top of the navigation header alone, but as I want to set the margin top of the main section, the navigation header will be affected as well

4

I have figured out how to get the appearance that I want. Now I’m just curious about sticking elements to the top of the view port. I will try to find a way to do that. Thank you so much for your input :+1:t3:

5

why does your navbar have id? ¯_(ツ)_/¯

#showcase

utilize it in css

6

Because the instructions require me to do that. I did try to call it by giving it the background-color to check which part it is, but nothing happened

7

I mean, if you have navbar id, which clearly task tells you to do, why don’t you style it somehow?

Task wouldnt tell you - hey, add this thing in html, and then just leave it like that, unstyled. Every single piece of code does something. Here, it would be good to apply that fixed position to that navbard id, since you want navbar to stay on top.

8

Yeah, of course, and I’ve said it before, that I’ve tried to style it but nothing happens. I’m still trying to figure out how to style it on CSS. By the way thank you for the reminder

9

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