Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About Peztis

  • Rank
  • Birthday February 17

Previous Fields

  • Languages
    Swedish, English, Spanish

Profile Information

  • Gender
  • Location
  1. 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>
  • Create New...