Technical documentation page ( why doesn't it work )

HTML-CSS
1

I tried making the body of the page align side by side with the nav bar for the first layout error but I just can’t seeem to make it work…


<link type="text/css" rel="stylesheet" href="about.css" />

<nav class="nav" id="navbar">
    <header> GRIZZY GRAE ARTS </header>
    <ul>
    <li><a class="nav-link" href="#introduction"> Introduction </a></li>
    <li><a class="nav-link" href="#what_is_art"> What is Art </a></li>
    <li><a class="nav-link" href="#my_arts">My Arts </a></li>
    <li><a class="nav-link" href="#portfolio"> Portfolio </a></li>
    </ul>
</nav>

<main id="main-doc">
    <section class="main-section" id="introduction">
      <header> Introduction </header>
      <article>
      <p> Hello Everyone, my name is Al-raheem Great but you all probably know me as Grizzy Grae. I am an artist, a song writer, alot of things actually but I am not going to talk alot about those things right now. This is all about the artist in me that I want you all to know about.
        <ul>
          <li> I am a self taught artist, an Illustrator, and a Designer.</li>
          <li> I create worlds. </li>
          </ul>
          </article>
        </section>
      
      <section class="main-section" id="what_is_art">
        <header> What is Art? </header>
        <article>
          <p> Art is a concept, its is a believe, it is the expression or application of human creative skill and imagination, typically in a visual form such as painting or sculpture, producing works to be appreciated primarily for their beauty or emotional power.
            <p> Art, in its broadest sense, is a form of communication. It means whatever the artist intends it to mean, and this meaning is shaped by the materials, techniques, and forms it makes use of, as well as the ideas and feelings it creates in its viewers . Art is an act of expressing feelings, thoughts, and observations. </p>
          <ul>
            <p> In simpler terms:
              <li> It is a skill acquired by experience, study, or observation.</li>
              <li> It is an an occupation requiring knowledge or skill</li>
              <li> It is the conscious use of skill and creative imagination especially in the production of aesthetic objects.</li></p></ul>
            <p> and so on.</p>
            </article>
          </section>
        
        <section class="main-section" id="my_arts">
          <header> My Arts </header>
          <article>
            <p> Art is one of the few things that I am passionate about, I get so much peace and serenity just being able to draw and paint cause it feels like every time I do, I pour my heart and soul into it.</p></article>
            <p> Here are some of my many masterpieces:- </p>
            <section class="images">
            <div class="art">
              <figure>
          <img id="moe" src="https://cdna.artstation.com/p/assets/images/images/037/258/904/large/great-al-raheem-nolite-grae1.jpg?1619911774" alt="grizzy"/>
              <figcaption> "There is no light, just less darkness" </figcaption>
              </figure>
            </div>
            
            <div class="art">
              <figure>
                <img id="ed"
                     src="https://cdnb.artstation.com/p/assets/images/images/037/258/615/large/great-al-raheem-dont-grae2.jpg?1619910660" alt="grizzy"/>
                <figcaption> "A modern renaissance" </figcaption>
              </figure>
            </div>
            
            <div class="art">
              <figure>
                <img id="nshba"
                     src="https://cdnb.artstation.com/p/assets/images/images/037/259/353/large/great-al-raheem-cyberpunk-santino.jpg?1619913210" alt="grizzy"/>
                <figcaption> "Cyberpunk Santino" </figcaption>
              </figure>
            </div>
            </div>
            
            <div class="art">
              <figure>
                <img id="ztj"
                     src="https://cdna.artstation.com/p/assets/images/images/037/259/624/large/great-al-raheem-beros-2.jpg?1619914419" alt="grizzy"/>
                <figcaption> "Beros" </figcaption>
              </figure>
            </div>
            </section>
      </section>

      <section class="main-section" id="portfolio">
          <header> Portfolio </header>
          <p> For more information on me and my services, click <a class="wu" href="https://l.instagram.com/?u=https%3A%2F%2Fwww.artstation.com%2Fgrizzae&e=ATOuFijXCiwK0n3PTS35enmCUjPkwD6f5yXQHVgl7KfrBFONuOVqu6B9Y7SzuG7iE2EgFUecucRQZKUCtaTIKw&s=1">here</a></p>
      <article>
          <p> Once we accept our limits, we go beyond them </p>
          <p> - Albert Einstein </p>
      </article>
        </section>
      </main>

that is the html

the css

body{
    min-width: 320px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;
  }
#navbar{
    position: fixed;
    position: relative;
    min-width: 320px;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
}
header{
  color: black;
  margin: 10px;
  text-align: center;
  line-height: 1.8em;
  font-weight: thin;
}
#main-doc header{
  color: black;
  text-align: left;
  margin: 0px;
}
#navbar ul{
    height: 88%;
    padding: 0px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #navbar li{
    color: #4d4e53;
    border-top: 1px solid;
    list-style: none;
    position: relative;
    width: 100%;
}
#navbar a{
    display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}
#main-doc{
    display: block;
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px;
  }
  section p{
    color: #4d4e53;
    margin: 15px;
    font-size: 0.96em;
  }
  section li{
    color: #4d4e53;
    margin: 15px 0px 0px 20px;
  }
  @media (max-width: 815px){
    /* for mobile phones */
    #navbar ul{
        border: 1px  solid;
        height: 207px;
      }
#navbar{
    background-color: white;
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 215px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }
}
#main-doc{
  position: absolute;
  margin-left: 0px;
  margin-top: 270px;
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }
}

  .images {
      display: flex;
      flex-direction: columns;
       
  }
  .art{
    max-width: 300px;
    max-height: 100px;
  }

Sorry for the inconvienience, I am using vscode and I am not so sure on how to send the whole thing for easier access

2

there are different ways to produce the desired effect. If you look closely in the example project, the navigation bar has a fixed width of 300px(when the screen is wide enough) and the main section has a left marging of 300 px. The navbar also has fixed position, which sets the naxbar to always stand on the left, even if you scroll down the page, while the main section starts 300 px to the left, so it doesnt overlap with the navbar and is entirely visible. Its important you become familiar with positions(fixed, absolute, relative and so on) and how they behave based on supplementary properties like top, left, right, bottom, which alter the positioning of the respective element.
And btw, you dont alter the body to align side by side with the navbar, as navbar is part of the body, you want to interact with the main section, which contains your sections. Ofc all those are conventional tag names, but its important to keep them straight.

3

When you submit your project it has to be somewhere live. You can submit that link so we can see your code.

4

I’m sorry, I am not sure of what you mean, I use liveserver to view the result, and I have no domain.

5

You will need to host your code somewhere, such as Codepen (which is where the templates are hosted).

6

As previously stated, when you submit your projects they have to be somewhere live. You cannot submit the link to your local box.
You’re putting your completed projects on codepen, GitHub, repl.it, etc.

Put your code there now so that we can see it.

7

oh… I will do that thanks

8

It just looks so confusing right now, sigh

9

  1. You are overwriting the position in the #navbar selector (Line: 8). Remove position: relative and only have position: fixed.

  2. You have another #main-doc selector (Line: 86) that is outside the media query it belongs to which makes its styles overwrite the selector at line 51. Move the second #main-doc selector (Line: 86) into the media query.

  3. Remove position: absolute from both #main-doc selectors.

10

this is how it looks now…thanks though, I appreciate the help from you and everyone else…Thank you

11

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