CODEWITHSUNDEEP
htmlcssweb
Pig
Pig

Reputation: 2122

HTML/CSS: How to create a box for the footer?

I tried doing the following on my header and it works:

h1{
    background-color: lightgrey;
    width: 100%;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
    border-radius: 15px;
}

footer{
    background-color: lightgrey;
    width: 100%;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
    border-radius: 15px;
}

However when I change the h1 to footer it only displays the text, but no box. What should I do instead?

My html:

<body>

<h1> <center>HEADER</center> </h1>

<div class="body">
    blablabla
</div>

<footer>
    FOOTER
</footer>

</body>

edit: ok, now it has the box displayed. However, the box is very small compare to my header. How can I make them the same size?

Upvotes: 0

Views: 9923

Answers (1)

Johan Karlsson
Johan Karlsson

Reputation: 6476

The <h1> and <footer> tags have different standard styling.

Change your footer to this to make them look the same:

footer{
    background-color: lightgrey;
    width: 100%;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
    border-radius: 15px;

    font-size: 2em;
    text-align: center;
    font-weight: bold;
}

Upvotes: 2

Related Questions