Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Sticky navbar not appearing at top of site? - code noob

    http://s21.postimg.org/uj9exz8fr/navbar.png

    http://s21.postimg.org/l3y4yifsn/Mockup.png


    The sticky nav bar im aiming for is not appearing at top of page, instead it is following the rest of the margin ive put on the :

    <div id="intro">


    HTML



    Code:
    <body>
    
    <nav id="nav">
    
    <div id="logo">
    
    <img src="filterfilm_logo">
    
    
    <ul>
    
    <li><a href="#">Hjem</a></li>
    <li><a href="#">Hvorfor</a></li>
    <li><a href="#">Prosess</a></li>
    <li><a href="#">Kontakt</a></li>
    
    </ul>
    
    
    </div>
    </nav>
    
    <div id="page-wrap">
    
    <div id="main-content">
    
    <div id="intro">
    
    		</div>

    CSS

    Code:
    #page-wrap { width: 1000px; margin: 0px auto 15px; 10px background: white } 
    
    #nav  { position: fixed; z-index: 10px; margin-top:0px; width: 100%; height: 72px; background: #e4e7e5 }
    
    
    nav ul  {list-style:none;}
    
    nav ul li a  {
    height: 5em;
    line-height: 5em;
    width: 9em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
    list-style-type:none;
    }
    li {float: left;
    
    }
    
    #intro {   width: 100%; height: 400px; margin-top:100px; background: #e4e7e5 }
    
    blockqoute { font: 30px Helvetica, Arial, Sans-serif; }

    What could be wrong here ?

    Source

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Sourceone View Post
    The sticky nav bar im aiming for is not appearing at top of page, instead it is following the rest of the margin ive put on the :

    <div id="intro">
    Try #nav { top: 0; }.

    Also: your z-index value should be an integer, not a length, and the HTML you've shown is invalid.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Sourceone (09-05-2013)

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes!

    Code:
    #nav { top: 0; }
    Worked like a charm, thanks Arbitrator !

    Can i ask where my Html is invalid ?

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://cdpn.io/rfbhq

    What is the most semantic way to move the butttons over to the right side , like in the mockup ?

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Sourceone View Post
    Can i ask where my Html is invalid ?
    You have two unterminated div elements (without end tags) in the code shown.

    Quote Originally Posted by Sourceone View Post
    What is the most semantic way to move the butttons over to the right side , like in the mockup ?
    Use float: right instead of float: left.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •