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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning for a navigation bar that scrolls with the page

    I have my html and css code setup for the left navigation box to scroll with the browser. I'm confused because the navigation link divs sometimes aren't lining up with the sidebar div, so I was wanting to have some input on my coding if it works for other people as a scrolling navigation bar.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Ukraine Introduction</title>
    <link rel="stylesheet" type="text/css" href="css/intro.css"/>
    </head>
    
    <body>
    
    <div id="banner"></div> <!--Banner with pic-->
    
    <div id="container"><!--contains the sidebar-->
    
    <div id="sidebar"><!--scrolling sidebar-->
     <div class="sidebarhome"><a href="http://www.codingforums.com/index.html">Home</a></div>
      <div class="sidebarintro"><a href="intro.html">Introduction</a></div>
      <div class="sidebarhist"><a href="history.html">History</a></div>
      <div class="sidebarpresent"><a href="present.html">Present</a></div>
      <div class="sidebarupdate"><a href="update.html">Updates</a></div>
    </div>
    
    </body>
    
    </html>
    Attached css (intro.css)
    Code:
    body {position:relative;
                width:1024px;
                height:738px;
                margin-left:auto;
                margin-right:auto;} 
                
    #banner { position:absolute;
              width:1024px;
              height:50px;
              top:0px;
              right:0px;}               
        
    #container {position:relative;
                margin-left:auto;
                margin-right:auto;
                width:1024px;
                height:738px;}/*contains the content*/
    
    /*navigation to parts of page*/
    a:link {color:#000000;} 
    a:link{ text-decoration:none;}
    a:visited {color:#FF0000;}
    a:hover {color:#0000FF;} 
    #sidebar {position:relative;
              width:200px;
              height:300px;
              top:50px;
              left:0px;}       
    .sidebarhome { position:fixed;
                    height:50px;
                    width:194px;
                    top:50px;
                    left:4px;
                    padding:5px 0px 0px 5px;}
    .sidebarintro { position:fixed;
                     height:50px;
                     width:192px;
                     top:100px;
                     left:10px;}
    .sidebarhist { position:fixed;
                     height:50px;
                     width:192px;
                     top:150px;
                     left:10px;}
    .sidebarpresent { position:fixed;
                     height:50px;
                     width:192px;
                     top:200px;
                     left:10px;}
    .sidebarupdate { position:fixed;
                     height:50px;
                     width:192px;
                     top:250px;
                     left:10px;}
    /*each subject linked to a new html page*/

    Thanks for looking at my post.
    Last edited by VIPStephan; 04-20-2014 at 06:49 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Read this page Learn CSS Positioning in Ten Steps: position static relative absolute floatand stop using position:relative; position:absolute; position:fixed; where it is not needed. You have them all over your css and you just need one position:fixed; on the <div id="sidebar">
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for pointing that out and it's making more sense now. I'm also making a web page background with the content over it. I might be messing up my positioning with css and just wanted to see if you or other people can point out any mistakes.

    CSS code

    Code:
    @charset "UTF-8";
    body { margin-top:0px;
          margin-bottom:0px;
          margin-left:auto;
          margin-right:auto;
          height:950px;}
    
    #headerbackground{position:absolute;
                      width:100%;
                      height:150px;
                      top:0px;}
    
    #background{position:absolute;
    width:100%;
    height:950px;
    top:151px;}/*background behind container*/
    
    #container{position:relative;
        width:1024px;
        height:914px;
        margin-top:75px;
        margin-left:auto;
        margin-right:auto;}/*contains header, nav, content*/
        
    #header{ position:absolute;
        width:1024px;
        height:200px;
        top:0px;}/*header for container*/
    
    /*navigation bar*/    
    #navigationbar { position:absolute;
    background-color:#12283d;
    width:1024px;
    height:50px;
    top:200px;}
    
    .navigationbarhome { position:absolute;
    width:170px;
    height:50px;
    top:0px;}
    /*ending navigation bar*/    
    
    #content{ position:absolute;
    width:1024px;
    height:664px;
    top:250px;}/*contains text div*/
    
    .contentparagraph { position:relative;
    width:400px;
    height:600px;
    top:0px;
    margin-left:auto;
    margin-right:auto;
    line-height: 20px;
    text-align: center;}/*contains text*/
    
    .contentspan { display: inline-block;
      vertical-align: middle;
      line-height: normal;   }/*used to center it*/
    HTML code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Example</title>
    <link rel="stylesheet" href="index.css" type="text/css"/>
    </head>
    
    <body>
    
    <div id="headerbackground"></div>
    
    <div id="background"></div><!--background div-->
    
    <div id="container">
    
    <div id="header"></div><!--header banner-->
    
    <div id="navigationbar">
    
    <div class="navigationbarhome"><a href="">Home</a></div>
    
    </div><!--ending nav div-->
    
    <div id="content">
    
    <div class="contentparagraph"><span><h1>Welcome!</h1>.......text......</span>
    
    </div><!--ending contentparagraph div-->
    
    </div><!--ending content div-->
    
    </div><!--ending container div-->
    
    </body>
    
    </html>
    Thanks.
    Last edited by VIPStephan; 04-20-2014 at 06:48 PM. Reason: added BB code tags


  •  

    Tags for this Thread

    Posting Permissions

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