i have tying the tribute page project but my image size doesn’t allow me to get it right ,who can help me on how i can set my image size and centered it to corespond with the parent size please?
Can we see the code? Is this in an online IDE, like CodePen?
1 Like
If you click on the tests button after they have ran and made the same mistakes as I, It will recommend using display:block; in the CSS for the image and also make sure you have a max-width no greater than the source image size. Both things I had to rectify to pass.
<!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>Document</title>
<style>
#main {
margin: 30px 8px;
padding: 15px;
border-radius: 5px;
background: #eee; }
#title {font-size: 40px;
font-family: fantasy;
position: relative;
left: 35%;}
#forge {font-family: cursive;
position: relative;
left: 35%}
#forge2 {font-size: 25px;
position: relative;
left: 10%;
text: blue;}
#image {max-width: 150px;
display: block;}
</style>
</head>
<body>
<main id="main">
<h1 id="title">Cristiano Ronaldo.</h1>
<p id="forge">A popular known of football legend of our time</p>
<div id="img-div">
<img id="image" src=https://i1.wp.com/sport365.co.za/wp-content/uploads/2018/10/Ronaldo-3.jpg?fit=1080%2C877&ssl=1" alt="Cristiano Ronaldo makes history again">
<p id="img-caption">Cristiano ronaldo makes history again</p>
</div>
<ul id ="tribute-info"><u>The history and achivement of Cristiano Ronaldo in football sports;</u></ul>
<li><strong>1985</strong>-Cristiano Ronaldo was born in funchal madeira,portugal, on 5<sup>th</sup> february.</li><br>
<li><strong>2001</strong> - Ronaldo was promoted from sporting's youth team by firsth team manager laszlo boloni,who was impressed with his drilling.</li><br>
<li><strong>2002</strong> - Cristiano Ronaldoon on 7<su>th</sup> of october made his depute in the premier liga against moreirense, and scored two goals in their 3-0 win.</li><br>
<li><strong>2003-04</strong>season - he was signed to manchester united before the start of the season, with transfer fee of 12.24million pounds, that made him the first-ever portuguese player in manchester united.</li><br>
<li><strong>2004</strong> - he scored his first international goal at euro 2004,which helped portugal reache the final of the competition.</li><br>
<li><strong>2008</strong> - Ronaldo participant helped manchester untid to become the champions league winner, and nearly he would have made his club man "u" to win the league back to back by helping them to reach the final on the next year.</li><br>
<li><strong>2009</strong> - he left manchester united and join real madrid, a club which he had always wanted to play, with a deal of 80milloin euros.</li><br>
<li><strong>2011-12</strong> - with his skills and tarlent again he helped real madrid to become the la liga championship,by scoring 46 goals during the season period.</li><br>
<li><strong>2015</strong> - Cristiano Ronaldo was named the best portuguese player of all time by the portuguese football faderation.</li><br>
<li><strong>2018</strong> - an italian club, juventus signed a 4-years contract with him that worth of 122million euros.</li><br>
<p id="forge2"><strong>Cristiano Ronaldo</strong> is one of the best footballer and well known of our time,who have created uncountable history in sports.</p><br>
<p>Cristiano Ronaldo has created histories that cannot be easily forgeted in the history of sports, to explore more about his careers in sport visi his <a id="tribute-link" href="https://www.en.wikipedia.org/wiki/Cristiano-Ronaldo" target="_blank">Criatiano Ronaldo-wikipedia</a>.</p>
</main>
</body>
this is my elements and when i run the test, i found out that i still need one correction to pass it and this is what they ask me to do;
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 (’).
This is what i was told to do but do not know how to rentify the solution after trying severally, can i get a help please?
“2. The element should be centered within its parent element.
Image is not centered: expected 0 to be close to 1307.2000732421875 +/- 11”
Thanks ‘nsgxyz’ your advise solve one of my error and now i have the last one holding me to pass the test, this is what they told me to do;
“2. The element should be centered within its parent element.
Image is not centered: expected 0 to be close to 1307.2000732421875 +/- 11”
I don’t know that the current state of your code is. When I use the code above, I find an error in the image.
<img
id="image"
src=https://i1.wp.com/sport365.co.za/wp-content/uploads/2018/10/Ronaldo-3.jpg?fit=1080%2C877&ssl=1"
alt="Cristiano Ronaldo makes history again"
>
I see that the src is lacking an opening double quote. This is throwing off the parsing of the rest of the file. HTML is recovering, but we need to fix that.
When I do, you are still failing the “centering image” issue. I don’t see where you attempted to center the image. My suggestion would be to google “CSS center an image”. I don’t say that to be flippant - one of the most important skills a developer can have is being able to look up things. It is a fundamental skill for a developer. See if you can find a solution, try some things. If nothing works, check back.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.