Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  1. How can I put the “Reference” on the side navigation bar down like others?

  2. How can I remove the white space on the top of the page so that the border-right can starts direct from the top without having any space in between?

  3. How to put border line for each list on the navigation bar?

Thank you for the help :slight_smile:

Screenshot 2022-10-08 at 00.59.27

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS Documentation</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <nav id="navbar">
            <header class="title">JS Documentation</header>
            <ul>
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="what_you_should_already_know">What you should already know</a></li>
                <li><a href="#javascript_and_java">JavaScript and Java</a></li>
                <li><a href="#hello_world">Hello World</a></li>
                <li><a href="#reference">Reference</a></li>
            </ul>
        </nav>

/* file: styles.css */
html {
   
    display:block;
}
body {
    line-height:  1.5;
    font-family:'open sans', 'arial'
}

#navbar {
    height: 100%;
    width:300px;
    background-color:beige;
    z-index: 1;
    top: 0; 
    left: 0;
    overflow-x: hidden; 
    display:absolute;
    border-right:solid 4px black;
    padding-bottom:1300px;
}

#navbar a{
    font-size:20px;
    text-decoration:none;
    color:black;
    display:block;
    padding:6px 8px;
    border-bottom:0;
    border-right:0;
    overflow:hidden;
    float: left;
}
#navbar ul {
    list-style-type: none;
}

main {
    margin-left:300px;
    padding:40px 40px;
    position:absolute;
    top:0;
}
header{
    font-size:25px;
    font-style:bold;
}
#code {
    background-color:beige;
    padding:20px;
    position:absolute;

}

.header {
    margin:auto -20px;
    font-style:bold;

}
.title {
    text-align:center;
    font-size:30px;
    padding:10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

try removing this line

1 Like
3

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