Build a tribute page

HTML-CSS
1

Hi.
I’m with the tribute page.
I don’t understand why code tells me my #image should have a display of block and should have a max-width of 100%.
Isn’t already the case ?

" Your #image should be centered within its parent.
Parent = main has display: flex and align-items: center;. Isn’t this okay ? I don’t know what to do and I have same problem with a smaller image
Thank you in advance

index.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <title>Akira Toriyama tribute page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <main id="main">
            <div id="top">
                <h1 id="title">Akira Toriyama</h1>
                <p>Le père de san Goku</p>
            </div>
            <div id="img-div">
                <img id="image" src="https://wallpapers.com/images/hd/dragon-ball-z-characters-1920-x-1080-wallpaper-xb57gfjkdihe8ewi.jpg">
                <figcaption id="img-caption">San Goku, personnage principal du manga Dragon Ball</figcaption>
            </div>
            <div id="tribute-info">
                <h2>Connu principalement pour ses mangas Dragon Ball et Dragon Ball Z, Akira Toriyama s'est fait connaître pour ses personnages mignons et loufoques</h2>

                <p>Après avoir quitté le circuit scolaire, Akira Toriyama tente plusieurs concours auprès d'éditeurs de mangas. Il continuera à persévérer à la suite d'un appel de Kazuhiko Torishima, le directeur de la maison d'édition Hakusensha, qui deviendra plus tard son rédacteur en chef.</p>

                <p><a href="https://fr.wikipedia.org/wiki/Akira_Toriyama" target="_blank" id="tribute-link"></a> </p>
            </div>
        </main>
    </body>
</html>

style.css

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
}

#top {
    margin: 50px;
}

#image {
    max-width: 100%;
    display: block;
    border: 3px solid #000;
    margin: 0 auto;
    height: auto;
   
}


#tribute-info {
    margin: 40px;
    width: 60%;
    border: 2px red solid;
}

#img-caption {
    padding: 1.5em;
}

#title {
    font-size: 3rem;
}

h2, p {
    margin: 2em;
}
2

Are you looking at your page in the preview pane? If so, is any of your CSS working? Do you see the red border you added around #tribute-info? Do you see the font you want to use? If not, this is probably a sign that your web page is not able to read your CSS. It’s as if you aren’t telling it the correct name of the CSS file to use.

Hopefully that is enough of a hint :slightly_smiling_face:

3

rofl, silly me xD !
Thank you, I’ve passed this

BTW for anyone who would be interested :
margin-left:auto & margin:right: auto do not work
Had to have parent element with :
flex-direction: column;
align-items: center;

4

it’s styles.css, you need the correct name to link the css file

5

Yes, I’ve corrected. Thank you!

6

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