Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hi, so I currently in the middle of trying to remove the bullet points off of my side nav-bar links, as you can see in my last CSS code this is what I attempted to do but I don’t think I it’s working so can I please get some help on this.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1.0">

  <head> 
<title>Technical Documetation Page</title>
<link rel="stylesheet" href="styles.css">
    </head>
    <body>

<div class="sidenav">
    <nav id="navbar">
<header><h2>JS Documentation</h2></header>
</nav>
<ul>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><hr class="solid"><a class="nav-link" href="#what_you_should_already_know">What You Should Already Know</hr></li></a>
<li><hr class="solid>"><a class="nav-link" href="#javascript_and_java">JavaScript And Java</hr></li></a>
<li><hr class="solid"><a class="nav-link" href="#hello_world">Hello World</hr></li></a>
<li><hr class="solid"><a class="nav-link" href="#variables">Variables</hr></li></a>
<li><hr class="solid"><a class="nav-link" href="#declaring_variables">Declaring Variables</hr></li></a>
        </ul>
        </nav>
        </div>

      <main id="main-doc">
        <section class="main-section" id="introduction"><header>
Introduction
</header>
<ul>
<li><p>Javascript is a cross-platform, object-oriented scripting language. It is a small and lightweight language.</p></li>
<li></li>
</ul>
        </section>
<section class="main-section" id="what_you_should_already_know"><header>
What you should already know
</header>
<ul>
        <li></li>
        <li></li>
        <li></li>
</ul>
        </section>
        <section class="main-section" id="javascript_and_java">
<header>
JavaScript and Java
</header>
<p></p>
<p></p>
<p></p>
        </section>
<section class="main-section" id="hello_world"><header>
Hello World
</header>
<p></p>
</section>
<section class="main-section" id="variables">
<header>
Variables
</header>
<p></p>
<p></p>
<p></p>
</section>
    <section class="main-section" id="declaring_variables">
<header>
Declaring Variables
</header>
<p></p>
<p></p>
<p></p>
</section>
      </main>
      </body>
  </html>

/* file: styles.css */
body{font-family:sans-serif;}
p{font-family:normal;
color:dimgray}
.sidenav{height:100%;
width:200px;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:white;
overflow-x:hidden;
padding-top:20px;}
.sidenav a{padding: 8px 6px 16px;
line-height:3;
color:dimgray;
text-decoration:none;
}
.main-section{margin-left:200px;
font-size:20px;
padding:0px 10px;
width:800px;
padding-top:66px;
}
h2{text-align:center;}
hr.solid{border-top:1px solid;
}
ul.sidenav{list-style-type:none;}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

.sidenav is a parent element that contains ul child element. Change the order in your selector. You want to target ul element within .sidenav element:

.sidenav ul {
  list-style-type:none;
}
3

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