w3.css Why does the top cover text?

Peztis · January 3, 2020

First of all, I am sooo new at this and if I am to learn I need to understand why things behave the way they do.

I am using W3.css only in this test (copying a little here and a little there) and my problem is that when looking at it in the browser, the grey box with CAPITALS (the first div) is covering up the first div in sections, the title London does not show.

1, Why? It must have something to do with w3-top because if I delete that, the CAPITALS will not cover London. But of course it is no longer stuck to the top.

2, What is the solution? I added an empty div (<div class="w3-container w3-padding-32"> </div>) right under the CAPITALS and it works but it feels like "cheating". I assume it can be fixed with a css as well. What would be the "proper way" to fix it? And how?

Thanks!

			<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

    <body>
  
        <!-- TOP -->
        <div class="w3-top">
            <div class="w3-container w3-grey">
                <h2>CAPITALS</h2>
            </div>
        </div>
  
        <!-- SECTIONS -->
        <section>
            <div class="w3-container w3-light-blue w3-left-align">
                <h2>London</h2>
                <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
            </div>
                
            <div class="w3-container w3-blue w3-center">
                <h2>Paris</h2>
                <p>The Paris area is one of the largest population centers in Europe, with more than 2 million inhabitants.</p>
            </div>
                
            <div class="w3-container w3-indigo w3-right-align">
                <h2>Tokyo</h2>
                <p>Tokyo is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
            </div>
        </section>
  
        <!-- FOOTER -->
        <footer class="w3-container w3-deep-purple w3-center">
         <p>Footer © 2019</p>
        </footer>
  
    </body>
</html>
		

Edited January 3, 2020 by Peztis

dsonesuk · January 3, 2020

position: fixed takes the element out of the flow of other elements, other elements will occupy the space it would have occupied, so you need to add padding the same height as the w3--top element to force it back into view.

Sign In

w3.css Why does the top cover text?

Recommended Posts

Peztis

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity