Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Hello first time posting, i am not really sure about what i am doing but anyways i have been struggling on this project for the past 2 hours and i don’t know how to make the separating borders of the li element fill completely. I also don’t think my nav bar is responsive at all and i am feeling kinda like a failure… what can i do?

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Create a codepen with all your code or put your code online in a public place somewhere so we can see what you are referring to. (We can neither see the code nor can we see what you are looking at)

3

Welcome to the forum @timeokilbertusdelta

So the forum can assist please post your full code.

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

1 Like
4

Hello, i am very sorry i was very tired when posted this (it was late in France lol)
but anyways here is the code

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"    content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8"><link rel="stylesheet" href="styles.css">
<title id="title">Technical documentation Page</title>
</head>
<body>
  <nav id="navbar">
    <header>Complex Documentation</header>
      <ul>
        <li>
          <a class="nav-link" href="#Intro_Header_1">Intro Header 1</a>
        </li>
        <li>
          <a class="nav-link" href="#Header_2">Header 2</a>
        </li>
        <li>
          <a class="nav-link" href="#Header_3"> Header 3</a>
        </li>
        <li>
          <a class="nav-link" href="#Header_4"> Header 4</a>
        </li>
        <li>
          <a class="nav-link" href="#Header_5"> Header 5</a>
        </li>
      </ul>
  </nav>
    <main id="main-doc">
      <section class="main-section" id="Intro_Header_1">
      <header>Intro Header 1</header>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <code>code code code code code</code>
      </article>
    </section>
      <section class="main-section" id="Header_2">
      <header>Header 2</header>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <code>code code code code code</code>
      </article>
    </section>
      <section class="main-section" id="Header_3">
      <header>Header 3</header>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <code>code code code code code</code>
      </article>
    </section>
      <section class="main-section" id="Header_4">
      <header>Header 4</header>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <code>code code code code code</code>
      </article>
    </section>
      <section class="main-section" id="Header_5">
      <header>Header 5</header>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <code>code code code code code</code>
      </article>
  </section>
</main>
</body>
</html>


/*  styles.css  */

* {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-family: "Arial", sans-serif;
  background-color: #1b1b1b;
  color: #fff;
  display: block;
}

nav {
  height: 100%;
  position: fixed;
  left: 0;
  text-align: center;
  min-width: 350px;
  border-right: 10px solid gray;
}

main {
  position: absolute;
  margin-left: 365px;
}

code {
  background-color: #2b2b2b;
  display: block;
  text-align: left;
}

nav header {
  font-size: 1.8em;
  margin: 20px;
  background-color: #2b2b2b;
  margin: 10px 18px;
}

nav a {
  color: white;
  background-color: #2b2b2b;
}

nav a:hover {
  background-color: white;
  color: black;
  border-radius: 5px;
}

li {
  font-size: 20px;
  list-style: none;
  margin: 50px;
  border-top: 5px solid #4b4b4b;
  border-bottom: 5px solid #4b4b4b;
  padding:  25px;
  text-align: left;
}
5

Hi @timeokilbertusdelta

You should have at least five li elements that are descendants of .main-section elements.

There are not any li elements in the .main-section elements.
Try adding some lists to some those elements. In total you need at least five for this project.

Your Technical Documentation project should use at least one media query.

You need to add one or more @media queries to the css.

Happy coding

1 Like
6

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