Tribute Page Project Only 9/ 10

Hi,
I am trying to get 10/10 when it comes to testing my code but I only get to 9/ 10 for the tribute page project. I wondered can anyone see what I have missed?
HTML code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tribute Page</title>

    <link rel="stylesheet" href="tribute.css">

</head>

<body>

 

<div id="main">

    <div id="title">Charles Babbage</div>

    <div id="img-div">

        <div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/8/82/CharlesBabbage.jpg" alt ="Charles Babbage" width="200px" height="200px">

        

            <div id="img-caption">Originator of the Digital Programmable Computer.</div>

        

        </div>

        

    </div>

    <div id="tribute-info">

        <ul class="a">    

            <li> Born 26 December 1791 at 44 Crosby Row, Walworth Road, London, England.</li> 

            <li>Babbage attended Trinity College, Cambridge, in October 1810.He was a self-taught keen mathematician.</li> 

        </ul>

        

    </div>

    <div id="tribute-link"><p>To find out more about Charles Babbage, click on the link:<a href="https://en.wikipedia.org/wiki/Charles_Babbage" target="_blank">Discover more</a></p></div>

</div>   

</body>

</html>

CSS code :

body {

 background-color: #f1f1f1;

}

#main {

width: 800px;

height: 1000px;

margin-left: 500px;

background-color: white;

}

#title {

    width: 420px;

    height: 100px;

    

    background-color:#f1f1f1;

    margin-left: 100px;

    margin-top: 5px;

    padding-top: 10px;

    padding-left: 180px;

    border-top: 10px solid white;

    font-size: 32px;

    font-family: Arial, Helvetica, sans-serif;

}

#img-div {

    display: flex;

    

    margin-left: 100px;

    margin-top: 20px;

    margin-right: 100px;

    background-color:#f1f1f1;

}

#image {

    max-width: 100%;

    height: auto;

    display: block;

    margin-left: 100px;

    padding-left: 5px;

               

}

#img-caption  {

 

  text-align: center;

  

  font-family: Arial, Helvetica, sans-serif;

  font-size: 18px;

 

  text-decoration: black;

  margin-bottom: 15px;

}

img {

border: 5px solid #f1f1f1;

width: 100%;

height: auto;

padding-right: -50px;

float: left;

}

#tribute-info {

    margin-left:100px;

    margin-right: 100px;

    

    background-color: #f1f1f1;

    

}

ul.a li  {

    font-family:Arial, Helvetica, sans-serif;

    font-size: 16px;

    text-align: justify;

    list-style-position:outside;

    list-style: square;

    margin-bottom: 5px;

    padding-right: 50px;

    

}

#tribute-link {

    margin-left: 100px;

    width: 590px;

    height: 50px;

    background-color: #f1f1f1;

    margin-top: 10px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    padding-left: 20px;

    border-top: 5px solid #f1f1f1;

}

Thanks

Ray

It would be better if you posted a link to your Codepen instead of just to code. That way we can look at it without having to re-create the page.


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Is it the image test that is failing?

I would imagine (did not test it) the CSS you have for the image will prevent it from centering correctly. Try removing the padding and margin and use auto margin for the centering.

Hi,
Thanks for the reply and I made the changes that you suggested. Hopefully this link may shed more light on the matter:

Tribute Page (codepen.io)

This is the codepen.io link as you advised.

Thanks,
Ray

<a> element with id="tribute-link" must contain an href attribute

The element with id="tribute-link" should be the <a> element, not the parent div element.

Fixing that will make the project pass all the tests. However, you do have some issues with the CSS. You are using a lot of fixed pixel values for width, use max-width or relative units like percentages instead. You are also using fixed pixel values to push elements to a position that looks like the center of the parent container element, use auto margin to center elements instead when possible (or use flexbox centering).

Anyway, I realize this is all still very new and the knowledge will come with time so don’t worry if it all just seems a little overwhelming right now. Just keep practicing and learning.

Here is a video tutorial worth checking out. Happy coding!

Thanks for the reply Iasjorg.
Yes, it was that bit of code and the project passed 10 /10.
I will look at what you have mentioned previously for the next project.
Thanks,

Ray

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