Tech Proj Nav 3rd Element Not 5th

Hello coders of all hats,

I am currently stuck and went in forums and just couldn't find it. I started crying inside and pouted. Boo whooo, so I gave up, I need help. 

I have a third nav element I added to my navbar, and it has all presets in the styles.css but I seem to have the third one not wanting to pick up signal.

He has the id the same, He has been changed, I even took a loopy loop and went to H1 and added that as the same id. So I’m Lt.Lost rn I need a Major A.Hole they call it on here.

Currently getting code in post brb

<h1> I watched the gif but I struggle still. </h1>

Element called “Valueli”

<!DOCTYPE html>
 <html lang="en">
   <head>
     <link rel="stylesheet" href="./styles.css">
     <meta name="viewport" content="width=device-width, inital-scale=1.0">
     <title>HTML Tech Doc L0ki</title>
   </head>
    <body>
      <div>
      <nav id="navbar">
            <ul>
              <li><a id="margin" href="#main-1-h">Intro</a></li>
              <li><a id="conceptli" href="#Concept_of_Margin">Concept</a></li>
               <li><a id="valueli" href="Values">Values</a></li>
               </div>
          </nav>
          </ul>
      <main id="main-doc">
        <section class="main-section">


        </section>
        <section class="main-section" id="CSS_Style_Overview">
          <header>
            <h1 id="main-1-h">CSS Styles Margin Code</h1>
            <p class="main-1-p">This is a quick overview from Loki, about what good code commands to use for CSS Styles "Margin" in my own words.</p>
          </header>
          <div id="lineinpage"></div>
        </section>
        <section class="main-section" id="Concept_of_Margin">
          <h1>Concept of Margin</h1>
          <p class="conceptp1">The "Margin" property is a useful one for all CSS styling.</p>
          <p class="conceptp2">The margin can use change the margins for all sides of an element you are wanting to adjust in the ./styles.css file</p> 
          <p class="marginhtml">
    [margin-top]
    [margin-right]
    [margin-bottom]
    [margin-left]
          </p>
          <h4 class="example1">Example</h4>
          <code class="code1"> margin-top: 40px;</code>
          <code class="code1"> margin: 40 40 40 40;</code>
          
          <h5><u>Never mix</u> with commas in style sheet, unless all is same. To each, to own, but keep the style consistent.</h5> 
          <div id="lineinpage"></div>
        </section>
        <section class="main-section" id="Margin_Values">
          <h1>Margin Values</h1>
          <p class="extramargin">There are <b>extra</b> values that can be used for the margin function. The list is under.
            <ul>
              <li> auto - the browser calculates the margin</li>
              <li> length - specifies a margin in px, pt, cm, etc.</li>
              <li> % - specifies a margin in % of the width of the containing element</li>
              <li>inherit - specifies that the margin should be inherited from the parent element</li>
          </ul>
          <code class="code1">margin: 45%;</code>
          <code class="code1">margin: inherit;</code>
    <div id="lineinpage"></div>
        </section>
        <section class="main-section" id="valueli">
          <h1>Value Ways</h1>
          <p class="vinfo">When you lower the property numbers say using four placement numbers, what would they do if they were only using three placement numbers, and down to one. 
            <p class="here1"><b>Here are some examples.</b></p>
            <div id="box">
            <code class="code2">margin: 45px 44px 43px 42px;</code>
            <p class="vexamples">[T 45px] [R 44px] [B 43px] [L 42px]</p>
        </section>
        </div>
        <div id="lineinpage"></div>
        <section class="main-section" id="bottom">
        </section>
      </main>
    </body>
    <footer>
    </footer>
    </html>

styles.css

#navbar {
  float: left;
  font-family: monospace;
  font-size: 35px;
  width: 5%;
  position: fixed;
  border: double;
  margin-right: 5px;
  padding-right: 10%;
  height: 1595px;
  background-color: #c4c1c0;
  flex-direction: row;
  overflow: hidden;
}

}

a:hover {
  color: green;
}

a:visited {
  color: black;
}

nav:active {
  color: grey;
}

nav ul {
  list-style: none; 
}

body {
  border: double; 
  padding-bottom: 1500px;
  background-color: #e4e2e1;
}

#margin {
  border: double;
  padding-right: 10px;
  padding-left: 10px;
  border-color: red;
}

#conceptli {
  border: double;
  padding-right: 10px;
  padding-left: 10px;
  border-color: red;
  position: absolute;
  margin-top: 40px;
}

nav a {
  position: left;
}

#navbar li {
  position: relative;
}

.main-section {
  padding-left: 300px;
}

.marginhtml {
 color: blue;
 background-color: #d8d7d7;
 width: 380px;
 border: solid;
 border-color: black; 
}

.example1 {
  margin-top: 10px;
  border: solid;
  width: 63px;
  padding-left: 3px;
  color:  teal;
}

#lineinpage {
  height: 1px;
  width: 100%;
  background-color: black;
  
}

#marginexample {
  font-family: "Courier New";
}

.code1 {
  display: block;
  padding-top: 10px;
  background-color: white;
  width: 200px;
  border: solid;
  border-bottom: double;
  margin-bottom: 5px;
}

.code2 {
  display: block;
  padding-top: 10px;
  background-color: white;
  width: 250px;
  border: solid;
  border-bottom: double;
  margin-bottom: 5px;
}

.vinfo {
  padding-bottom: 15px;
}

#box {
  border: solid;
  width: 300px;
  padding-top: 5px;
  padding-left: 20px;
}

I need to tidy this place up

When you connect to my post, you connect to my heart and dreams.

1 Like

Hi there! Your .main-section elements should have same id value as anchor hrefs value. Your section header and anchor text also should be exactly the same as id and href attribute value.

Is the logic that it needs to be linked to the id and href so it has a direct connection in a saying or they all match and will activate. Thank you I am about to insert it in and try.

Forgot to say thank you, I was so in mind shock. It’s rare.

@hasanzaib1389

I changed the tag and did notice #notice that I needed a #. But still no thinking cap. I got to the styles thinking I created seperate ones, but that was the code. I am coming back to this code and not in the drive currently to also warn you.

Did you updated your code as requested? Post your updated code here in your next reply. Use three back ticks (```) on a separate line before and after your code block to preform it here in the forum post.

@hasanzaib1389

I didn’t I will be honest. But I was truly trying. I was just getting stuck for some reason. I think I am using old knowledge when reading then I am being presented new and start to doubt myself. I will re read and update.

Do the changes and if the issue not resolved, then post your updated code here in your reply.

@hasanzaib1389

Yeah, I am going to just rewrite the section, and see how it goes. You said same href and same id to all. I swear i was on to something, I think you were teaching me a simple way and not to make it confusing. So you can just code on through besides having to scroll up and down. I have moods like that, and I fixed that shit.

1 Like

@hasanzaib1389

I know why I’m stuck, because the tutorial asked to make a corresponding header similiar. So I should reality been labled with name and a underscore for space and what the title is.
I am ready to rest finally. So I need to take the chance but I’m not giving up, it just may win this time. Thank you sir, I am going to wake up and redo all those href and ids but may I ask do they have to all be same like everything. I don’t think you can get where you want if all same. Sorry simple isn’t simple for me.

the hrefs should not be all equal for each other

for one .main-section there should be one header, one id, one a and one href that match each other

between different sections there should not be similarity

Hello to the conversation Staff Member @ILM ,

Now you have thrown another boomerang in the air, and I’m just watching.

So @hasanzaib1389 so to match all and hrefs

You said they don’t match are equal all each other. This is confusing.

My thinking, I need to match the href and the ID to be the match so then it knows that that’s the path to take when clicked on. I was doing sooo good, I was taking my time, and then I take a break, and now you’re all breaking my mind because I just can’t get down facts.

I’m going to recode one more time and post what I have done. I am going to re read both your answers and choose who I like those most I think because they confuse me both still but it’s freaking truth.

Update, I get it the id and href just need to match. He said it that clear in my main section.

Hey guys… Update Failed… but I’m back for help.

<!DOCTYPE html>
 <html lang="en">
   <head>
     <link rel="stylesheet" href="./styles.css">
     <meta name="viewport" content="width=device-width, inital-scale=1.0">
     <title>HTML Tech Doc L0ki</title>
   </head>
    <body>
      <div>
      <nav id="navbar">
            <ul>
              <li><a id="margin" href="#CSS_Style_Overview">Intro</a></li>
              <li><a id="conceptli" href="#Concept_of_Margin">Concept</a></li>
               <li><a id="valueli" href="#Margin_Values">Values</a></li>
               </div>
          </nav>
          </ul>
      <main id="main-doc">
        <section class="main-section">


        </section>
        <section class="main-section" id="CSS_Style_Overview">
          <header>
            <h1 id="CSS-Style_Overview">CSS Styles Margin Code</h1>
            <p class="main-1-p">This is a quick overview from Loki, about what good code commands to use for CSS Styles "Margin" in my own words.</p>
          </header>
          <div id="lineinpage"></div>
        </section>
        <section class="main-section" id="Concept_of_Margin">
          <h1 id="Concept_Of_Nargin">Concept of Margin</h1>
          <p class="conceptp1">The "Margin" property is a useful one for all CSS styling.</p>
          <p class="conceptp2">The margin can use change the margins for all sides of an element you are wanting to adjust in the ./styles.css file</p> 
          <p class="marginhtml">
    [margin-top]
    [margin-right]
    [margin-bottom]
    [margin-left]
          </p>
          <h4 class="example1">Example</h4>
          <code class="code1"> margin-top: 40px;</code>
          <code class="code1"> margin: 40 40 40 40;</code>
          
          <h5><u>Never mix</u> with commas in style sheet, unless all is same. To each, to own, but keep the style consistent.</h5> 
          <div id="lineinpage"></div>
        </section>
        <section class="main-section" id="Margin_Values">
          <h1 id="Margin_Values">Margin Values</h1>
          <p class="extramargin">There are <b>extra</b> values that can be used for the margin function. The list is under.
            <ul>
              <li> auto - the browser calculates the margin</li>
              <li> length - specifies a margin in px, pt, cm, etc.</li>
              <li> % - specifies a margin in % of the width of the containing element</li>
              <li>inherit - specifies that the margin should be inherited from the parent element</li>
          </ul>
          <code class="code1">margin: 45%;</code>
          <code class="code1">margin: inherit;</code>
    <div id="lineinpage"></div>
        </section>
        <section class="main-section" id="Value_Ways">
          <h1>Value Ways</h1>
          <p class="vinfo">When you lower the property numbers say using four placement numbers, what would they do if they were only using three placement numbers, and down to one. 
            <p class="here1"><b>Here are some examples.</b></p>
            <div id="box">
            <code class="code2">margin: 45px 44px 43px 42px;</code>
            <p class="vexamples">[T 45px] [R 44px] [B 43px] [L 42px]</p>
        </section>
        </div>
        <div id="lineinpage"></div>
        <section class="main-section" id="bottom">
        </section>
      </main>
    </body>
    <footer>
    </footer>
    </html>

this one is missing content and id

the id go on the section element, not on the h1, you can’t have the same id on multiple elements, also everything that is in header needs to be used to make the id

My advice:

Always fulfill the basic requirements to pass the tests(so you understand the content), then focus on making it personal.

1 Like

Honestly I have been at it even with this help, and once hear @winhax , he brings me to a great relization. You start to have one, a bunch of code and you barley have anything yet so it’s a lot ot reading for a begginner and to remember. Which isn’t bad to do, but I can’t handle it since I am thinking of too many properties and functions to go through since noobie. I am going to remake it, and do the skeleton first.

Everyone thank you for help, and I am going to follow the guide and F12 the site just encase then check here if I still miss it. But I got it this time. I promise. I’ll post the follow up here.

And I had to wait 12 hours to post it, I swear to myself, that I got it. I had them all right. I may not give up, I Re thought. But I just have to possibly come back to this. I just feel the need to do it now for some reason.

My code doesn’t save to the data base, or it saves and they go " make him go again"

Hello, I’m back, and ready to re tackle. I have to study some things again, but noted them well in my legal pad, and keeping it calm and safe.

<!DOCTYPE html>
 <html>
   <head lang="en">
     <meta name="viewport" content="width=device-width, inital-scale=1.0"
     <title>Loki Tech Doc</title>
     <link rel="stylesheet" href="./styles.css">
     <ul class="navbar">
       <li><a href="#top">Top</li>
       <li><a href="#middle">Middle</li>
       <li><a href="#bottom">Bottom</li>
   </head>
   <body>
     <main>
       <section>
         <div class="topside">
           <h1 id="top">Hello</h1>
       </section>
       <section>
       </section>
       <section>
       </section>
       <section>
       </section>
       <section>
       </section> 
     </main>
   </body>
  <html>

This is the skeleton I knew to start again. And going to slowly for what I need again. Thank you for the tips. And I got the button to work. So thank you team. You all did amazing helping me and I’m ready to continue.

Hi there. You can’t add the page’s content code in the head element. Your #navbar should be placed after body opening tag. Also your unordered list element is missing it’s closing ul tag.