Creating vertical list (Build a Technical Documentation Page)

HTML-CSS
1

Tell us what’s happening:

I’m trying to create a vertical nav bar with position: fixed without having to use floats. The problem is that (a) the nav bar keeps pushing my header down; (b) whenever I try to remove bullet points from the list elements (within the ul elements, within the nav element), the elements are on top of one another (instead of on separate rows as a vertical side bar). Can you help me with this?

Your code so far

<!DOCTYPE html>
<html="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Technical Documentation Page</title>
  </head>
  <body id="body1">
    <main id="main-doc">
      <nav>
        <ul>
          <li><a class="nav-link" href="#">Standmount</a></li>
          <li><a class="nav-link" href="#">Floorstanding</a></li>
          <li><a class="nav-link" href="#">Subwoofers</a></li>
          <li><a class="nav-link" href="#">Portable</a></li>
          <li><a class="nav-link" href="#">Headphones</a></li>
        </ul>
      </nav>
      <section class="main-section" id="heading">
        <header>
          <h1>Standmount & Floorstanding Speakers</h1>
        </header>
        <p></p>
      </section>
      <section class="main-section" id="standmount">
        <header>
          <h2>Standmount Speakers</h2>
        </header>
        <p></p>
      </section>
      <section class="main-section" id="floorstanding">
        <header>
          <h2>Floorstanding Speakers</h2>
        </header>
        <p></p>
      </section>
      <section class="main-section" id="content4">
        <header>
        </header>
        <p></p>
      </section>
      <section class="main-section" id="content5">
        <header>
          <p></p>
        </header>
      </section
    </main>
  </body>
</html>

#body1 {
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  font-family: garamond, serif;
  font-size: 16px;
  text-align: center;
}

section {
  width: 700px;
  margin-left: 100px
}

h2 {
  font-size: 20px;
}

nav {
  height: auto;
  width: 100px;  
  margin-left: 0px;
}

.nav-link {
  text-decoration: none;
  position: fixed;
  display: inline-block;
}

ul {
  
}

li {
  padding: 20px;
 list-style-type: none;
}

Your browser information:

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

Link to the challenge:

2

Note: I’ve since changed “left” to “margin-left” in the nav element’s CSS.

3

Basically, my two main problems are:

(1) The nav bar pushes my header down (I want the main header to be at the top). I can use ‘float’ for this, but is there a better way?

(2) I cannot remove the bullet points from the lists, without the lists then collapsing on top of one another (I.e. like words being written over one another on paper).

4

  1. I don’t understand what you mean by this.

  2. Go head and give your ul list-style:none. Then remove position:fixed from .nav-link.

5

I have now solved (to a point) the second problem. I have just added 20px of padding to each list element.

Regarding the first problem, I’ve just used ‘float’ at the moment.

Shimpillip,
I want my nav-bar to be fixed, meaning that when somebody scrolls down the page (when I’ve added more content), the nav bar will always remain on the left.

6

image
image1920×1080 264 KB

I now have a new problem, as you can see from my screenshot above. When I want to add a background-color to each link, the background-color is added vertically.

7

image
image1920×1080 270 KB

I’ve added the background-color to the ‘.nav-link’ class instead of to the ‘li’ elements.

8

I would do something like this.

Make navbar width: 20% and make a wrapper for div for your sections and give it width: 80%. Something like this will help your code organized better.

1 Like