Technical Documentation

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Technical Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <main id="main-doc">
     <header><strong>Technical Documentation</strong></header>
      <nav id="navbar">
        <header>Jump to Topic</header>
      <a class="nav-link" href="#topic_1">Topic 1<a/>
      <a class="nav-link" href="#topic_2">Topic 2</a>
        <a class="nav-link" href="#topic_3">Topic 3</a>
          <a class="nav-link" href="#topic_4">Topic 4</a>
            <a class="nav-link" href="#topic_5">Topic 5</a>
            </nav>
  <body>
    <section class="main-section" id="topic_1">
      <header><code>Topic 1</code></header>
      <p>This is a technical doc for propellers</p>
      <li>specs of propellers</li>
      <p>data section</p>
      <li>Numbers followed by letters</li>
      </section>
      <section class="main-section" id="topic_2">
      <header><code>Topic 2</code></header>
      <p>This is a technical document for Jet Engines only</p>
      <li>Here we begin to list the components of a jet engine</li>
      <p></p>
      <li>list of only the fuel portion of the engine</li>
      </section>
      <section class="main-section" id="topic_3">
      <header><code>Topic 3</code></header>
      <p>Jet engine rotating parts only</p>
      <li>list of all the shafts that spin</li>
      <p>list of all the peices that lubricate the engine</p>
      <li>oil pump</li>
      </section>
      <section class="main-section" id="topic_4">
      <header><code>Topic 4</code></header>
      <p>list of all the auxiluary components</p>
      <li>hydralics does not run the engine but sure helps you fly</li>
      <p>hydralic rotating parts</p>
      <li>hydralic (pump)</li>
      </section>
      <section class="main-section" id="topic_5">
      <header><code>Topic 5</code></header>
      <p>hydralic parts that are fixed</p>
      <li>list hydralic parts not rotating </li>
      <p>parts fixed in place</p>
      <li> hoses </li>
      </section>
    </body>
  </main>
html {  
  font-size: 20px; 
  font-family: "Open Sans", sans-serif;
  background-color: #0497;
}
body {
  display: flex;
   width: 700px;
  margin: 0;
   padding: 0 20px 20px 20px;
  
}
code {
  font-size: 25px;
  font-weight: bold;
}
#navbar {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  flex: 0 0 20%
  height: 20%
  position: fixed;
  margin-left:0;
  margin-top: 30px;
  margin-left: 30px;
}

main{
   display:flex;
  flex-direction: column;
  padding: 10px;
  
}
.main-section {
  display: flex;
  flex-direction: column;
  padding:0 5px 5px 135px;
  margin-left: 100ox;
}
.nav-link {
  text-style: bold;
  font-size: 1rem;
}


@media (max-width: 1199px) and (min-width: 769px) {
  #main-section {width: 675px}
  .keys {width: 633px}
}
@media (max-width: 768px) {
  #main-section {
    width: 358px;
  }

my challenge is when I run the test I get.
Your #navbar should always be on the left edge of the window.
I seem to have missed something or need to review so module, can someone give me a hint? Note: all other tests pass.
Bill

1 Like
2

Hi! main tag must be placed inside body.

1 Like
3

Try to play around with this set of properties and values:

#navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  line-height: 40px;
  font-weight: bold;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color:white;
}

Your HTML code has lots of unresolved issues:

1 Like
4

Well I put the main tag in the body, but that does not resolve the trouble I am having.
“Your #navbar should always be on the left edge of the window.”

1 Like
5

ok Thanks the w3c markup is helping me, Much to fix here. Thanks again!

2 Likes
6

Now I am getting more stuck.
I got it to display the way I want and the navbar stays on the left but I still get the error.
cleared a lot of typo’s and mistakes with w3c.

html {  
  font-size: 20px; 
  font-family: "Open Sans", sans-serif;
  background-color: #0497;
}

body {
   display: flex;
   flex-direction: column;
   width: 700px;
   margin: 0;
   padding: 0 20px 20px 20px;
  }
  
code {
  font-size: 25px;
  font-weight: bold;
}

#navbar {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  flex: 0 0 20%;
  height: 20%;
  position: fixed;
  margin-left:0;
  margin-top: 30px;
}
  

main {
  display:flex;
  flex-direction: column;
  padding: 10px;
 }

.main-section {
  display: flex;
  flex-direction: column;
  padding:0 5px 5px 135px;
  margin-left: 100px;
}
.nav-link {
  font-weight: bold;
  font-size: 1rem;
  flex-direction: column;
}


@media (max-width: 1199px) and (min-width: 769px) {
  #main-section {width: 675px}
  .keys {width: 633px}
}
@media (max-width: 768px) {
  #main-section {
    width: 358px;
  }}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Technical Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
  </head>
 <body>
    <header><strong>Technical Documentation</strong></header>
      <nav id="navbar">
        <header>Jump to Topic</header>
      <a class="nav-link" href="#topic_1">Topic 1</a>
      <a class="nav-link" href="#topic_2">Topic 2</a>
        <a class="nav-link" href="#topic_3">Topic 3</a>
          <a class="nav-link" href="#topic_4">Topic 4</a>
            <a class="nav-link" href="#topic_5">Topic 5</a>
            </nav>
       <main id="main-doc">
         <section class="main-section" id="topic_1">
      <header><code>Topic 1</code></header>
      <p>This is a technical doc for propellers</p>
      <ul>
        <li>Specs fo Propellers</li>
        <li>Data section</li>
        <li>We show all the numbers</li>
        <li>angle of the prop</li>
        <li>angle and radius dependent on distance from hub</li>
        </ul>
      </section>
      <section class="main-section" id="topic_2">
      <header><code>Topic 2</code></header>
      <p>This is a technical document for Jet Engines only</p>
      <p>Here we begin to list the components of a jet engine</p>
      <p></p>
      <p>list of only the fuel portion of the engine</p>
      </section>
      <section class="main-section" id="topic_3">
      <header><code>Topic 3</code></header>
      <p>Jet engine rotating parts only</p>
      <p>list of all the shafts that spin</p>
      <p>list of all the peices that lubricate the engine</p>
      <p>oil pump</p>
      </section>
      <section class="main-section" id="topic_4">
      <header><code>Topic 4</code></header>
      <p>list of all the auxiluary components</p>
      <p>hydralics does not run the engine but sure helps you fly</p>
      <p>hydralic rotating parts</p>
      <p>hydralic (pump)</p>
      </section>
      <section class="main-section" id="topic_5">
      <header><code>Topic 5</code></header>
      <p>hydralic parts that are fixed</p>
      <p>list hydralic parts not rotating </p>
      <p>parts fixed in place</p>
      <p> hoses </p>
      </section>
    </main>
  </body>

the error I get is.
" Your #navbar should always be on the left edge of the window."

my technical doc output
my technical doc output1178×679 48.9 KB

Thanks for any suggestions or hints in the right direction.

1 Like
7

With margin-top set to any value except 0, your navbar is not on the top.

1 Like
8

Thanks for looking at it. I removed that line now the Technical Documentation and the Jump to Topic, are on top of each other.
And I still get the error code. It is just less readable. lol

1 Like
9

myTechinicalDoc_output2
myTechinicalDoc_output21148×687 51.2 KB

Well this looks better. And I am no closer to solving the error message.

1 Like
10

Always post the entire html and css code. Guessing is not the right strategy to get to the final solution.

2 Likes
11

ok got it I will post the whole thing. Yes I am beginning to suspect I am on the wrong path to get the solution.

1 Like
12 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Technical Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
  </head>
 <body>
    <header id="header"><strong>Technical Documentation</strong></header>
      <nav id="navbar">
        <header>Jump to Topic</header>
      <a class="nav-link" href="#topic_1">Topic 1</a>
      <a class="nav-link" href="#topic_2">Topic 2</a>
        <a class="nav-link" href="#topic_3">Topic 3</a>
          <a class="nav-link" href="#topic_4">Topic 4</a>
            <a class="nav-link" href="#topic_5">Topic 5</a>
            </nav>
       <main id="main-doc">
         <section class="main-section" id="topic_1">
      <header><code>Topic 1</code></header>
      <p>This is a technical doc for propellers</p>
      <ul>
        <li>Specs fo Propellers</li>
        <li>Data section</li>
        <li>We show all the numbers</li>
        <li>angle of the prop</li>
        <li>angle and radius dependent on distance from hub</li>
        </ul>
      </section>
      <section class="main-section" id="topic_2">
      <header><code>Topic 2</code></header>
      <p>This is a technical document for Jet Engines only</p>
      <p>Here we begin to list the components of a jet engine</p>
      <p></p>
      <p>list of only the fuel portion of the engine</p>
      </section>
      <section class="main-section" id="topic_3">
      <header><code>Topic 3</code></header>
      <p>Jet engine rotating parts only</p>
      <p>list of all the shafts that spin</p>
      <p>list of all the peices that lubricate the engine</p>
      <p>oil pump</p>
      </section>
      <section class="main-section" id="topic_4">
      <header><code>Topic 4</code></header>
      <p>list of all the auxiluary components</p>
      <p>hydralics does not run the engine but sure helps you fly</p>
      <p>hydralic rotating parts</p>
      <p>hydralic (pump)</p>
      </section>
      <section class="main-section" id="topic_5">
      <header><code>Topic 5</code></header>
      <p>hydralic parts that are fixed</p>
      <p>list hydralic parts not rotating </p>
      <p>parts fixed in place</p>
      <p> hoses </p>
      </section>
    </main>
  </body>

css

html {  
  font-size: 20px; 
  font-family: "Open Sans", sans-serif;
  background-color: #0497;
}
#header:first-of-type {
  text-align: center;
}

body {
   display: flex;
   flex-direction: column;
   width: 700px;
   margin: 0;
   padding: 0 20px 20px 20px;
  }
  
code {
  font-size: 25px;
  font-weight: bold;
}

#navbar {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  flex: 0 0 20%;
  height: 20%;
  position: fixed;
  margin-left:0;
  }
  

main {
  display:flex;
  flex-direction: column;
  padding: 10px;
 }

.main-section {
  display: flex;
  flex-direction: column;
  padding:0 5px 5px 135px;
  margin-left: 100px;
}
.nav-link {
  font-weight: bold;
  font-size: 1rem;
  flex-direction: column;
}


@media (max-width: 1199px) and (min-width: 769px) {
  #main-section {width: 675px}
  .keys {width: 633px}
}
@media (max-width: 768px) {
  #main-section {
    width: 358px;
  }}
1 Like
13

The code has passed on my side:

image
image1426×851 73 KB

Although, I don’t see the closing </html> tag at the end of the code.

1 Like
14

Thank you i forgot that. I will try it. perhaps it is time to clear my cache and start again.

2 Likes
15

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