Tribute Page <main id="main"> question

HTML-CSS
1

Hello! I seem to be having some issues with my Tribute Page project (i hope this HTML-CSS topic is the right one for this question), it’s probably something simple but i can’t seem to figure it out. While submitting the project i got a " You should have a main element with an id of main ." feedback, i hope someone can point out my probably silly mistake. This is my html code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title id="title">Tribute Page</title>
    <link rel="stylesheet" href="styles.css" type="text/css>
  </head>
    <body>
        <main id="main">
            <div id="content">
                <h1 class="name">Tim Berners-Lee</h1>
                <p class="name-description">Founder of the World Wide Web</p>
                <div id="img-div">
                    <img src="https://mediaarchive.cern.ch/MediaArchive/Photo/Public/2009/0903028/0903028_01/0903028_01-A5-at-72-dpi.jpg" id="image"></img>
                </div> 
                <div id="img-caption">
                    <p>Tim Berners-Lee (left) next to the NeXT computer.</p>
                </div>
                <h3 class="intro-timeline">Here's a small summary of Tim's life:</h3>
                <ul id="tribute-info">
                    <li>-<span class="bold">1955</span>, Tim is born.</li>
                    <li>-<span class="bold">1973</span>, Tim graduates from Uni</li>
                    <li>-<span class="bold">1976</span>, Tim starts designing computer-languages</li>
                    <li>-<span class="bold">1990</span>, Tim (with help) produces the first version of the World Wide Web</li>
                    <li>-<span class="bold">1990</span>, Tim gets married</li>
                    <li>-<span class="bold">2004</span>, Tim becomes a CS professor</li>
                    <li>-<span class="bold">2014</span>, Tim remarries</li>
                </ul>
                <p class="quote">"Any good software engineer will tell you that a compiler and an interpreter are interchangeable."</p>
                <p class="quoter">- Tim Berners-Lee</p>
                <h3 class="link">If you want to learn more about Tim Berners-Lee you can visit his <a id="tribute-link" target="_blank" href="https://www.w3.org/People/Berners-Lee">Site</a></h3> 
            </div>
        </main>
    </body>  
</html>

(i hope this is how you format code on here, also pls don’t mind the very non-formal descriptions within the list)

2

Welcome @bystander.

Looks right, I checked and it seems to pass on my side. Why not try to write it again? (or better yet reset the page and if you have any extensions installed on your browser, disable them as they could interfere with the exercises).

3

I checked your code in Visual Studio Code and you have a typo
in your header

Hint: css link :wink:

4

Don’t worry, happens to the most weathered senior developers

5

@DanielHuebschmann @NyeverGator I hope this reply works since idk if this way of replying sends out a notification. (is this even the proper way of replying?) I know some of my css is probably a bit bad but i don’t think that interferes with the element issue, i used this css file (still working on the img-caption):

(Css-filename = styles.css) ← i think this was the typo referred to earlier
(i also tried retyping the main id=“main” in 2 different browsers)

#image {
    max-width: 100%;
    max-height: 300px;
    height: auto;
  }
  
  #img-div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255,255,255);
    padding: 15px;
    padding-bottom: 35px;
  }
  
  #img-caption {
    position: absolute;
    bottom: 34.5%;
    left: 31%;
    text-align: center;
    font-size: 12px;
    font-style: italic;
  }
  
  #content {
    background-color: rgb(245,245,245);
  }
  
  .name, .name-description {
    text-align: center;
  }
  
  .name {
    position: relative;
    top: 10px;
    margin: 12px 0;
  }
  
  .name-description {
    font-style: oblique;
    font-size: 14px;
  }
  
  .intro-timeline {
    text-align: center;
    margin: 25px 0 0 0;
  }
  
  #tribute-info {
    text-align: center;
    list-style: none;
    margin-right: 25px;
  }
  
  .bold {
    font-weight: bold;
  }
  
  .quote {
    text-align: center;
    font-style: italic;
    max-width: 80%;
    margin-left: 11%;
    margin-top: 25px;
  }
  
  .quoter {
    text-align: center;
    font-style: italic;
    margin-left: 2%;
  }
  
  .link {
    text-align: center;
    margin-top: 30px;
    font-size: 18px;
  }
  
  #tribute-link:link {
    color: black;
  }
  
  #tribute-link:hover {
    color: rgb(125, 125, 125);
    cursor: pointer;
  }
  
  #tribute-link:visited {
    color: black;
  }
6

If you are still getting errors or haven’t edited your HTML file as of yet, look at the line I quoted above… you have something missing in one of your attributes when linking your stylesheet like DanielHuebschmann said.

Hope that helped…

7

Ah, the fact that i couldn’t figure it out is making me feel kinda dumb, glad i am now seeing it. Thanks for the help!

8

Thanks for helping! I only just figured out the error wasn’t what i initially thought it was. I’m glad that it was just me being dumb for a sec instead of me having to redo the entire project.

9

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