Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Navbar elements not fitting in browser window

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #247288
    ChristianA
    Participant

    I am creating a navbar and I’m using a

    ul element to display my<li> elements in it. The problem I’m having is that the final<li> element does not fit in the window on any browser.

    Can you find any flaws in my code/design?

    I apologize if this doesn’t display properly as the preview feature doesn’t seem to be functioning properly for me.

    * {
        font-family: "Arial Black", Gadget, sans-serif;
    }
    
    h1 {
        text-align: center;
    }
    
    #navBar {
        position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height: 60px;
    background-color: black;
    
    }
    
    ul {
        float: right;
        text-align: right;
        list-style-type: none;
        font-family: "Arial Black", Gadget, sans-serif;
        color:azure;
        padding-top: 10px;
    
    }
    
    li {
    
    display: inline;
    padding: 10px;
    
    
    }
    
    #247290
    Paulie_D
    Member

    It would be better if you made a demo of your HTML & CSS in a Codepen.io demo rather than just providing a small snippet of CSS.

    #247298
    ChristianA
    Participant

    https://codepen.io/ChristianA/pen/eBOdXg

    This is what I am woking on.

    #247299
    Paulie_D
    Member

    I think you just need to use a CSS reset and zero out the margins & padding

    http://codepen.io/Paulie-D/pen/jVNVLy

    #247300
    ChristianA
    Participant

    What is a CSS reset?

    And how does setting the margin and padding to zero affect the elements?
    Do the blocks have a standard amount of padding and margin to begin with?

    #247301
    ChristianA
    Participant

    I have figured it out! Thank you. I used a reset and now the browser is responding properly.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.