Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I am trying to answer the " *Your #navbar should always be on the left edge of the window." section. I have looked through this site, looked through other sites, and have had a hard time with the formatting for this project. I have only added the “stylesheet” info as I believe that is where it is breaking.

Please note the code below is split between the index.html and style.css and NOT on the same page.

If you can also point me to the section that dealt with this formatting that would be nice, I obviously have to go back and do a little refresher.

Your code so far

<nav =id"navbar">
      <header>Learn to Style HTML with CSS</header>
      <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
        <li>
          <a class="nav-link" href="#Prerequisites">Prerequisites</a>
        </li>
        <li>
          <a class="nav-link" href="#Modules">Modules</a>
        </li>
        <li><a class="nav-link" href="#Solving_common_CSS_problems">Solving common CSS problems</a></li>
        <li><a class="nav-link" href="#CSS_is_weird">CSS is weird</a></li>
        <li>
          <a class="nav-link" href="#See_also">See also</a>
        </li>
        <li><a class="nav-link" href="#Reference">Reference</a></li>
      </ul>
    </nav>

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: right;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar {
  position: fixed;
    min-width: 290px;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);}
    
    nav{
      display:block;
    }

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

i modified your post so that the files are shown seperately.

3

just because I noticed this first… the id attribute here is wrong way around?
<nav id="navbar">

Edit : once I fixed this id, the testcase that checks if the navbar is on the left passed for me.

4

Thanks… I am zero for 100 today :slight_smile:

6

Interesting, it still shows on the top of my preview but it does pass.

7

I’m not sure I understood your post but if you need further help, share all the code and the question…

9

Thanks for the quick response. I guess my question is regarding the navbar and how it is presented on the screen (my preview shows it still on the top of the page vs. the side). The code I would submit is actually the same. Can you advise me where in the lessons the navbar info is, or any other info on how to fix similar problems? I see it is also will be an issue for me on “build a product page”.

10

One way to lay things out is to use a grid layout.
There is a project in the curriculum that talks about grid layout so you can start there.

You can also try to use absolute positioning but that will require you knowing how to move your position and margins around to make everything behave nicely.

edit: you can also try a flex display as well (there’s a project about flex in the curriculum as well) and make the navbar display on the left of the rest of the page if the rest of the page is all enclosed in one element.

11

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