the Issue is that the instructions state #image should have a max-width: 100%; and I have applied that onto my CSS, however it is still saying I do not pass. May someone please help me out here? Thanks!
<!-- file: index.html -->
<main id="main">
<div id="img-div"><div id="image"></div><div id="img-caption"></div></div>
<!-- <img id="image"> -->
<div id="img-caption">Derrick Similien</div>
<div id="tribute-info">Derrick is from Florida</div>
<!-- <div id="tribute-link"></div> -->
<title id="title">Title</title>
<a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main>
/* file: styles.css */
image {
height: auto;
align-items: center;
max-width: 100%;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Tribute Page - Build a Tribute Page
Hi @1Prokingg ,
In accessing an element using its id to style in CSS, you need an ID selector which uses # symbol.
For instance:div with an id="container". In CSS you will select it like this:
#container {
// styling here...
}
Learn more here: Basic CSS Selectors
Hi! so I changed it to
#image {
and it still is not letting me pass
I’ve seen other steps not passed:
Failed: 6. You should have an img element with an id of image.
You need to create an img element and put the id there, not a div.
Failed: 10. Your #img-caption should not be empty.
also, you missed to add a caption text for your image.
fix all of these first before proceeding to others.
**[quote=“ametoresu, post:4, topic:729350, full:true”]
Failed: 6. You should have an img element with an id of image.
You need to create an img element and put the id there, not a div.
Failed: 10. Your #img-caption should not be empty.
also, you missed to add a caption text for your image.
fix all of these first before proceeding to others.
**
The Caption is king
I fixed it, this is my code above. Now its saying " Your #img-caption should be a descendant of #img-div ."
I have made it a descendant and my code is still not passing… am I missing somwthing?
can you show me the updated code?
type or paste code <main id="main">
<div id="img-div"><img id="image"></div><div id="img-caption">The Caption is king</div></div>
<!-- <img id="image"> -->
<!-- <div id="img-caption">Derrick Similien</div> -->
<div id="tribute-info">Derrick is from Florida</div>
<!-- <div id="tribute-link"></div> -->
<title id="title">Title</title>
<a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main>here
Hi there!
You aren’t linked the css file to the html. You should have a link element within the html file that href value should havestyles.css
is this the whole code itself or just a snippet of the code?
it’s because, you can’t make a website functional without the head because it stores the meta tags and linking of files such as css and javascript. as well the html and the body.
Have you linked you styles.css to your html??
type or paste code
<main id="main">
<link rel="stylesheet" href="./style.css">
<div id="img-div"><img id="image"></div><div id="img-caption">The Caption is king</div></div>
<!-- <img id="image"> -->
<!-- <div id="img-caption">Derrick Similien</div> -->
<div id="tribute-info">Derrick is from Florida</div>
<!-- <div id="tribute-link"></div> -->
<title id="title">Title</title>
<a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main> here
#image {
Here is my whole code. I was sure to link it
no, you have not.
remember, this is a boilerplate for html websites:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the webpage</title>
</head>
<body>
<!-- here you should put your main -->
</body>
</html>
and in the head is where you put your <link rel="stylesheet" href="./style.css">.
Sorry I didn’t see that, remove the dot . and slash / from href value and add a s to styles.css and put it on top of the html code.
ametoresu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Tribute Page</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main id="main">
<div id="img-div"><img id="image"></div><div id="img-caption">The Caption is king</div></div>
<!-- <img id="image"> -->
<!-- <div id="img-caption">Derrick Similien</div> -->
<div id="tribute-info">Derrick is from Florida</div>
<!-- <div id="tribute-link"></div> -->
<title id="title">Title</title>
<a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main>
</body>
</html>``
#image {
Here is my updated code
type or paste code here
actually you can link a file using ./styles.css, it’s explicitly telling that the file is in the same directory. It’s the same though as just using styles.css, the only difference is you’re telling it explicitly.
<link rel="stylesheet" href="style.csss">```
Do you mean like this?
Don’t show just a piece of code, post all your html again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Tribute Page</title>
<link rel="stylesheet" href="style.csss">
</head>
<body>
<main id="main">
<div id="img-div"><img id="image"></div><div id="img-caption">The Caption is king</div></div>
<!-- <img id="image"> -->
<!-- <div id="img-caption">Derrick Similien</div> -->
<div id="tribute-info">Derrick is from Florida</div>
<!-- <div id="tribute-link"></div> -->
<title id="title">Title</title>
<a id="tribute-link" target="_blank" href="https://tenaciousd.com/">
</a>
</main>
</body>
</html>
You haven’t added styles.css for the href value.