Jump to content

Peztis

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Peztis

  1. 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: nav a:hover{ color: rgba(250, 160, 20); } Here is the HTML (there is also a CSS but it doesn't add much to these problems, just colors etc): <html> <head> <meta charset="utf-8"> <title>Testing-testing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="css/styles3.css"> </head> <!-- BACKGROUND --> <body class="w3-content w3-dark-grey" > <!-- HOLDER --> <div class="w3-black" style="max-width: 1024px"> <!-- NAVIGATION --> <div class="w3-top"> <!-- TOP IMAGE --> <div class="w3-display-container"> <img src="img/bg_header1536_3_2.jpg" style="max-width:980px"alt="Header image"> </div> <!-- BAR --> <nav class="w3-container"> <div class="w3-bar w3-border-bottom" style="max-width:944px"> <img src="img/logo_w_250.png" style="padding-bottom: 3px;" alt="Logo 250px wide"></img> <span> <div id="nav1" class="w3-right" style="max-width:944px"> <a href="home" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-home"></span> Home</a> <a href="products" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-bolt"></span> Products</a> <a href="downloads" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-download"></span> Downloads</a> <a href="signin" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-sign-in"></span> Sign in</a> <a href="contact" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-envelope"></span> Contact</a> </div> <!-- <div id="nav2" class="w3-right" style="max-width:500px"> <a href="home" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-home"></span> </a> <a href="products" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-bolt"></span> </a> <a href="downloads" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-download"></span> </a> <a href="signin" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-sign-in"></span> </a> <a href="contact" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-envelope"></span> </a> </div> --> <!-- BURGER --> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-medium w3-hide-large w3-hover-black" onclick="myFunction()">☰</a> </span> </div> <div id="burger" class="w3-bar-block w3-black w3-right w3-hide w3-hide-large"> <a href="home" class="w3-bar-item w3-dark-grey w3-button w3-hover-black">Home</a> <a href="products" class="w3-bar-item w3-dark-grey w3-button w3-hover-black">Products</a> <a href="downloads" class="w3-bar-item w3-dark-grey w3-button w3-hover-blacky">Downloads</a> <a href="signin" class="w3-bar-item w3-dark-grey w3-button w3-hover-black">Sign in</a> <a href="contact" class="w3-bar-item w3-dark-grey w3-button w3-hover-blacky">Contact</a> </div> <!-- <script> function myFunction() { var x = document.getElementById("nav2"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace("w3-show", ""); } } </script> --> <script> function myFunction() { var x = document.getElementById("burger"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace("w3-show", ""); } } </script> </nav> </div> <!-- EMPTY BAR BEHIND NAVIGATION --> <div id="behind" class="w3-bar"style="margin:100px"> </div> <!-- SECTION 1 --> <div class="section"> <div class="w3-container"> <h1>Hello World!</h1> </div> </div> <!-- FOOTER --> <footer class="w3-bar w3-margin w3-border-top w3-center" style="max-width:944px"> <h6>© 2020 Testing-testing Systems</h6> </footer> </div> </body> </html> Thanks for any help you can provide!
  2. 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...