Whenever I run the tests, it tells me that I did everything right except for this: " Your #image should be centered within its parent." But in my preview it is centered. Can someone help me figure out where I’ve gone wrong?
Hi! @sirdgra !
For us to help, we need to see your code.
body {
font-family: helvetica;
text-align: center;
color: seashell;
background-color: mediumseagreen;
}
p {
color: seashell;
font-weight: bold;
}
img {
max-width: 100%;
height: auto;
width: 340px;
margin: auto;
padding: 25px 25px 25px 25px;
background-color: seashell;
border-radius: 20px;
display: block;
}
figcaption {
display: block;
color: seashell;
font-weight: bold;
}
#img-caption {
margin: 15px 0 5px 0;
text-align: center;
}
h1 {
font-size: 4rem;
margin-bottom: 0;
display: block;
font-weight: bold;
margin-block-start: .67em;
background-color: seashell;
border-color: black;
border-radius: 20px;
color: darkgoldenrod;
}
h2 {
font-weight: bold;
}
ul {
max-width: 550px;
margin: 0 auto 50px auto;
text-align: left;
line-height: 1.6;
background-color: seashell;
color: mediumseagreen;
border-radius: 20px;
}
Include your HTML code as well.
It’s saying I can’t post a link to host
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 (').
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<main id='main'>
<h1 id='title'>Pokémon Emerald</h1>
<p>The perfect end to the 3rd Generation of Pokémon</p>
<figure id='img-div'>
<img alt='Gameboy Cartridge Pokemon Emerald' id='image' src='https://mybrainongames.files.wordpress.com/2014/03/pokemon-emerald.jpg'>
<figcaption id='img-caption'>
" GameBoy Game Pokémon Emerald "
</figcaption>
</figure>
<section id='tribute-info'>
<h2 id='headline'>Here are some fun facts about Pokémon Emerald:</h2>
<ul>
<li><strong>Pokémon Emerald</strong> was the last game in the series to have a specialized GameBoy cartridge, as the cartridge was the color Emerald.</li>
<li><strong>Pokémon Emerald</strong> was the first Pokémon Game to go wireless.</li>
<li><strong>Pokémon Emerald</strong> was the second highest-selling video game of 2005 in North America. It was also the third best-selling game for the GameBoy Advance.</li>
<li><strong>Pokémon Emerald</strong> was released in Japan on September 16, 2004, in North America on May 1, 2005</li>
<li><strong>Pokémon Emerald</strong> is a truly a work of art.</li>
</ul>
<h3>
If you have time, you should read more about this masterpiece on its <a id='tribute-link' href='https://bulbapedia.bulbagarden.net/wiki/Pok%C3%A9mon_Emerald_Version' target='_blank'>Bulbapedia page</a>.
</h3>
</section>
</main>
</body>
ok i think that worked
I nested your image in a div, gave the div a class and centred the class using CSS Flexbox.
so you nested my image into a div instead of a figure? I thought using the figure element was ok
Apart from the image, there are other contents of the webpage nested in the figure element. The styling will be applied to all the content, whereas we only need it to apply to the image. That’s why I nested the image in its div and applied a class to it. This way, I can style the image alone.
ok I think I understand although I’m not really what sure what class to give it. I’m assuming that you targeted the class as a selector afterwards to style the image alone?
The class name should be a name of your choice. You can either use the class selector or decide to style the div since I do not see any other div element in your code. You can also give the div an id attribute, and then style the id. Their are several ways that you can solve this.
I’m so sorry but I’m losing my mind I did exactly what you did but its still not working, can I see your new code?
1 Like
Can I see your instead? If I give you mine I’ll be providing a direct answer, FCC regulations don’t allow that.
1 Like
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<main id='main'>
<h1 id='title'>Pokémon Emerald</h1>
<p>The perfect end to the 3rd Generation of Pokémon</p>
<div id='img-div'>
<img alt='Gameboy Cartridge Pokemon Emerald' id='image' src='https://mybrainongames.files.wordpress.com/2014/03/pokemon-emerald.jpg'>
<div id='img-caption'>
" GameBoy Game Pokémon Emerald "
</div>
</div>
<section id='tribute-info'>
<h2 id='headline'>Here are some fun facts about Pokémon Emerald:</h2>
<ul>
<li><strong>Pokémon Emerald</strong> was the last game in the series to have a specialized GameBoy cartridge, as the cartridge was the color Emerald.</li>
<li><strong>Pokémon Emerald</strong> was the first Pokémon Game to go wireless.</li>
<li><strong>Pokémon Emerald</strong> was the second highest-selling video game of 2005 in North America. It was also the third best-selling game for the GameBoy Advance.</li>
<li><strong>Pokémon Emerald</strong> was released in Japan on September 16, 2004, in North America on May 1, 2005</li>
<li><strong>Pokémon Emerald</strong> is a truly a work of art.</li>
</ul>
<h3>
If you have time, you should read more about this masterpiece on its <a id='tribute-link' href='https://bulbapedia.bulbagarden.net/wiki/Pok%C3%A9mon_Emerald_Version' target='_blank'>Bulbapedia page</a>.
</h3>
</section>
</main>
</body>
I see two divs, One nesting the image and the image-caption div and another nesting the text " GameBoy Game Pokémon Emerald ". You didn’t have to form the extra divs, the only div you should have is a div that nests this.
but I thought my #img-caption needs to be a descendant of #img-div
I didn’t consider all that, I worked to help solve the challenge. If the code works, doesn’t it mean all that is taken care of?
but it didn’t work. I mean my preview looks absoleutly fine and my image is centered but the last test isn’t checked, its still an x