Jump to content
  • Similar Content

    • By jbenham10

      Having a bit of trouble getting a sticky navbar to work for a website I have to build for my college course...
      I have copied the JavaScript from the W3Schools method assuming it would apply directly to my pre-existing navbar but it seems not...I can't seem to see where I am going wrong, any ideas? I tried using both the 'nav' and 'navbar' elements in the scripting..

      Thanks in advance
      <nav> <ul class="navbar"> <li class="navitem"><a href="">Home</a></li> <li class="navitem"><a href="">About</a></li> <li class="navitem"><a href="">Our Team</a></li> <li class="navitem"><a href="">Products</a></li> <li class="navitem"><a href="">Gallery/Portfolio</a></li> <li class="navitem"><a href="">Contact</a></li> </ul> </nav> CSS
      /* Navbar css*/ nav { float: left; display: block; width: 100%; left: 0; right: 0; top: 150px; background: #616A6B; height: 100px; } .navbar { list-style-type: none; max-width: 100%; text-align: center; overflow: hidden; position: static; padding-top: 25px; } .navitem { display: inline; padding-left: 10px; } .navitem a { text-decoration: none; font-size: 18px; color: white; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } .navitem a:hover{ color: #CC0000; transition-duration: 0.8s; } .sticky { position: fixed; top: 0; width: 100%; } JavaScript
      <script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script>  
    • By overground55
      Hey WebDesignerForum community,
      I am designing a website mockup, and will attach an image of what it looks like currently. I'm attempting to use CSS Grid to design my homepage. From here I really have 2 questions:
      First, my home page seems fairly long, at least compared to websites shown in tutorials I've found on CSS Grid. It seems like 'grid-template-areas' may be one way of building my home page. Will this become overly complicated and a less effective way of building something that looks like what I'm currently showing in my attached image(s)? The way I'm picturing it is that my 'grid-template-areas' will end up looking like this: ‘header header header nav nav'
      'article article article article article’
      'article article article aside aside’
      'article article article article article'
      'aside aside aside aside aside’
      'article article article article article'
      ‘aside aside article article article'
      'article article article article article’
      'article article article article article'
      'article section section section article'
      ‘footer footer footer footer footer’;
      I'm uncertain if I'm using the right semantic language for everything, but I will also overlay each 'grid-template-area' item on my website mockup so you can see exactly what I have imagined in my mind. I hope I have provided enough information for someone with more experience to help me here.
      Secondly, some of my imagery, such as the header, footer, and a few other images, touch the edge of the webpage. In the past when using CSS Grid, I couldn't get the grid to go all the way to the edge of the screen, but it had a small margin that seemed inherent. How can I avoid this from happening when I begin the html/css process?
      web mockup
      Web mockup with grid item assignments
    • By Taladmin
      I am new to design
      Could someone help to create something like that.
    • By chrome86
      I'm looking to create a website that can show a preview of a personalised book. On this site a user should be able to enter their name and choose a character with different hair colours, skin colours and then hit 'preview'. This opens up a flipbook with just these variables replaced. Please see a great example here: Click HERE for website with customization page
      I know that templates exist for things like flipbooks (personally i use Wordpress as a novice, so a wordpress plugin would be useful), but how would this customized feature be created? For example, would i use a PDF, convert to a flipbook, and then layer (css?) the name, character on top with HTML5 code? Are there any existing templates that do this already or simpler alternatives?
    • By carloswebwdf
      Hello guys, godd afternoon !!
      I studied one apostille about CSS, but I can´t realize one simple task !!
      Hen I mouseover the 'button.botao', active the movement of 'div.traco' ! See below the 'Source Code'
      that I´m trying:

      <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Help me please !!
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts