HtmlCss First attempt and try project

Projects Personal Projects
1

Please find my project at the following url : https://github.com/tedjngit/bprojhtml.git , thank you to help me to improve this exercise. There are a lot of ‘mistakes’, for instance, I do not understand why the background image does not appear. Many thanks for your comments and help. Tedj

2

Hey tedjcoding
I cannot find the code, did you make it public?

image_2021-05-12_132831
image_2021-05-12_1328311868×634 18.7 KB

3

Hi usernamegiapreso,
Yes I did. But … As this is my first time practicing both Html + CSS and Github, I may have made a mistake in pushing Github. Please be patient, I will redo the whole procedure.

4

Hi usernamegiapreso,
here you go. I changed the repository name, it is as follow :frowning:GitHub - tedjngit/prjfruits)
Regards,
tedjcoding

5

Sorry, the complete address is as follow : (GitHub - tedjngit/prjfruits)

6

Please confirm if you have find the code.
Thanking you in advavnce,
Tedj

7

Hi @tedjcoding I can see the files now in the repo, however the index.html is empty.

However if you want to post the code directly in here it would facilitate me to help you. In this case please write three backticks ``` before and after the code block in order to style formatting it and making it more visible.

Cheers :slight_smile:

8

Hi, here you go :

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>
        Turnover Co. tablify
    </title>
    <link rel="stylesheet" href="./resources/css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <banner id="coadr">

            <h1>Fruits & Vegetables</h1>
            <p>105, Almond street</p>
            <p>31861, Bogota</p>
            <p>G.D. Luxembourg</p>

        </banner>
    </header>
    <p id="titr">Annual sales report
    </p>

    <table>
        <thead>
            <tr>
                <th>Product\TurnOver</th>
                <th>trimester1</th>
                <th>trimester2</th>
                <th>trimester3</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <th><span>&lt;th&gt;</span>Grape<span>&lt;/th&gt;
                    </span>
                </th>
                <td>250 000 €</td>
                <td>65 000 €</td>
                <td>234 000 €</td>

            </tr>
            <tr>
                <th>Oranges</th>
                <td>476 254 €</td>
                <td>215 000 €</td>
                <td>838 500 €</td>

            </tr>
            <tr>
                <th>Kiwi</th>
                <td>25 000 €</td>
                <td>802 672 €</td>
                <td>343 890 €</td>

            </tr>
            <tr>
                <th>Potatoes</th>

                <td>150 346 $</td>
                <td>315 000 $</td>
                <td>421 874 $</td>

            </tr>
            <tr>
                <th>Pepper</th>

                <td>281 829 $</td>
                <td>430 000 $</td>
                <td>138 450 $</td>

            </tr>
            <tr></tr>
            <tr></tr>
        </tbody>



    </table>
    <p></p>
    <p></p>
    <table>
        <tfoot>
            <tr>
                <th>Total €</th>
                <td>2.5 M</td>
                <td>1.8 M</td>
                <td>3.2 M</td>
            </tr>
            <tr>
                <th>Total $</th>
                <td>1.6 M </td>
                <td>4.2 M</td>
                <td>6.3 M </td>
            </tr>
        </tfoot>
    </table>
</body>

</html> ``` 
Please confirm you got it.
9

Please correct the line 1igne 11 as follow :
<link rel="stylesheet" href="style.css">
Cheers,

10

Ok, I should have specified to post just the relative piece of code. :stuck_out_tongue: However, this is your code, correct?
HTML

    <header>
        <banner id="coadr">

            <h1>Fruits & Vegetables</h1>
            <p>105, Almond street</p>
            <p>31861, Bogota</p>
            <p>G.D. Luxembourg</p>

        </banner>
    </header>

CSS

#coadr {
    height: 350px;
    width: 100%;
    font-family: monospace;
    font-size: 15px;
    background-image: url("fruits1.jpg");
}

And you want to know why does the background image fruits1.jpg doesn’t not fill the background of the html tag with id attribute coadr, yes?

The answer is that the html tag that you use <banner></banner> is not recognized by the browser as a valid html tag. If you change that to a <div> element, for example, you’re going to be able to see the background image.

image
image1292×834 119 KB

Does this help solve your issue? :slight_smile:

1 Like
11

Yes, thank you very much, now it is better, I can see the image, but the image is repeated 2.5 times, what can be the reason? should the size be enlarged?

12

When using background property the default is to repeat it to cover the whole background container size.
So if you just want one image you can use the rule:

background-repeat: no-repeat;

As you can see I also used that in the screenshot I posted.
If you want to also adapt the position of the background image inside the container you can use the rule:

background-position

Also the rule to manipulate its size could come in handy:

background-size

To learn more about this rules check out this MDN page about CSS background.
f this solves your issue, please mark it so. Thanks :slight_smile:

1 Like
13

If anyone have Codeacademy Pro access please :pray: provide me on this email [email protected]

14

thank you very much, I quickly consulted the MDN page, it deserves to consult it more in depth.
Keep in touch. Regards, Tedj

15

Is it what you are expecting?

1 Like