-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Peztis
-
-
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>
From buttons with text to burger
in HTML/XHTML
Posted
I am really not good at this ... Below is my fumbling steps to a make a website mostly using W3.CSS. But I have run into some things that I do not know how to solve.
1, There is a border under the navbar and over the footer. The border is a few px shorter than the area (which is how I want it). But I don't understand why the border at footer right doesn't shrink like the navbar right does.
2, I have a logo on the same line as the navbar. I do not want the navbar to jump under the logo when getting too close, I want it to turn into a hamburger earlier. How do I change when the turn should happen?
3, Would it be possible to have a step in between? Today the navbar is an icon with text and then it turns to a hamburger. How do I make it icon with text -> icon-> hamburger when shrinking? I tried but it doesn't work, that is the area that I marked out with <"-- and so on. Another problem with this "try" is that the icons are on a separate row so the navbar is thicker. This is not not most important to fix, it would just be nice ...
4, Can I make the text in the navbar change color when hover? I do not want the whole button to change color, just the text. I tried this in the css but it does not work:
Here is the HTML (there is also a CSS but it doesn't add much to these problems, just colors etc):
Thanks for any help you can provide!