Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Navigation Bar with scrollbar, difficult to explain

  1. #11
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Can I see your test page?
    Jeremy | jfein.net

  2. #12
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by k12onos View Post
    wow it works great! thanks again! , anyway i tested it on IE, and it works just fine, what do you mean by fixed position doesnt work in IE? because in firefox and IE it looks the same
    In IE if you add content, the nav won't scroll. Anyways, here's the updated menu:
    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Fixed Menus, CSS Fixed IE" />
    <meta name="description" content="Fixed Menu - Tested in IE, FF, and Safari" />
    <title>Fixed Menu - Tested in IE, FF, and Safari</title>
    <style type="text/css">
    body {
    margin: 0;
    height: 100%;
    }
    #content {
    text-indent: 15px;
    color: #B00B0B;
    font-size: 14px;
    padding-left: 210px;
    padding-top: 100px;
    }
    #header {
    color: #B00B0B;
    font-size: 80px;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    }
    #navigation {
    font-family: arial;
    width: 190px;
    height: 99%;
    overflow: scroll;
    background-color: #F1F1F1;
    padding-left: 10px;
    position: fixed;
    }
    #navigation .link{
    font-size: 13px;
    color: #A00B0A;
    font-weight: bold;
    }
    #navigation a:link, a:visited {
    display: block;
    font-size: 70%;
    text-decoration: none;
    color: #000;
    }
    #navigation a:hover {
    text-decoration: underline;
    }
    #navigation hr {
    margin-top: 15px;
    color: #A00B0A;
    }
    #navigation p {
    text-indent: 15px;
    color: #A00B0A;
    font-size: 10px;
    }
    #navigation p span {
    text-indent: 0px;
    overflow: scroll;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    #navigation {
    padding-top: 10px;
    position:absolute;
    left: 0px;
    top:expression(body.scrollTop+"px");
    }
    #content {
    padding-left: 200px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="navigation">
    <h5 class="page">Home</h5>
    <span class="link">Links</span>
    
    <span class="links">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    </span>
    <hr />
    <p>This page was tested in <b>FireFox 3</b>, Internet Explorer 7, and Safari 3.1. It's a simple menu with fixed positioning, this means that when the page scrolls down, so does the menu. I managed to fix the fixed positioning in IE using the script below. <br />
    <span style="display: block; width: 170px; height: 56px; background-color: lightyellow;"><code>
    position:absolute;<br />
    left: 0px;<br />
    top:expression(body.scrollTop+"px");
    
    </code></span></p>
    </div>
    <div id="header">HomePage</div>
    <div id="content"><p>Lorem ipsum <b><i>dolor</i></b> sit amet, consectetuer adipiscing elit. Phasellus at metus. Nam ut pede et nisi elementum ultrices. Fusce ut neque. Nam fringilla semper purus. Morbi laoreet. Curabitur pulvinar. Integer commodo iaculis tellus. Nulla aliquet augue eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et nisi. Sed id erat et dolor pretium mattis.</p>
    <p>
    Duis condimentum interdum lectus. Nullam vestibulum, ligula quis molestie <b>pellentesque</b>, dui diam blandit nulla, vel vehicula est nisl quis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero risus, laoreet ac, dictum at, pellentesque nec, magna. Praesent eget mi. Pellentesque lectus sem, molestie et, commodo at, placerat ut, nisl. Cras pulvinar leo posuere felis. Praesent tincidunt enim eget erat. In a leo vitae purus imperdiet consequat. Mauris elit ligula, mattis sodales, consectetuer at, accumsan a, nunc. Fusce tristique diam a odio. </p>
    <p>
    Aenean fermentum. Suspendisse commodo felis eget sem. Nunc elit. In sit amet quam quis massa fringilla semper. Duis ullamcorper tincidunt tellus. Nam sed ante sed eros gravida imperdiet. Pellentesque pulvinar ultrices ante. Donec adipiscing adipiscing quam. Nulla ac tortor quis elit tincidunt malesuada. In egestas est vel nunc. Donec auctor facilisis neque. Curabitur nec diam at eros gravida tempus. Phasellus tincidunt risus. Phasellus in sem a tellus dictum vulputate. Phasellus nunc. Integer pharetra. Maecenas ornare enim eu odio. Suspendisse consequat blandit tellus. Curabitur est ante, luctus id, tempor non, rhoncus ac, ipsum. </p><p>Lorem ipsum <b><i>dolor</i></b> sit amet, consectetuer adipiscing elit. Phasellus at metus. Nam ut pede et nisi elementum ultrices. Fusce ut neque. Nam fringilla semper purus. Morbi laoreet. Curabitur pulvinar. Integer commodo iaculis tellus. Nulla aliquet augue eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et nisi. Sed id erat et dolor pretium mattis.</p>
    
    <p>
    Duis condimentum interdum lectus. Nullam vestibulum, ligula quis molestie <b>pellentesque</b>, dui diam blandit nulla, vel vehicula est nisl quis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero risus, laoreet ac, dictum at, pellentesque nec, magna. Praesent eget mi. Pellentesque lectus sem, molestie et, commodo at, placerat ut, nisl. Cras pulvinar leo posuere felis. Praesent tincidunt enim eget erat. In a leo vitae purus imperdiet consequat. Mauris elit ligula, mattis sodales, consectetuer at, accumsan a, nunc. Fusce tristique diam a odio. </p>
    <p>
    Aenean fermentum. Suspendisse commodo felis eget sem. Nunc elit. In sit amet quam quis massa fringilla semper. Duis ullamcorper tincidunt tellus. Nam sed ante sed eros gravida imperdiet. Pellentesque pulvinar ultrices ante. Donec adipiscing adipiscing quam. Nulla ac tortor quis elit tincidunt malesuada. In egestas est vel nunc. Donec auctor facilisis neque. Curabitur nec diam at eros gravida tempus. Phasellus tincidunt risus. Phasellus in sem a tellus dictum vulputate. Phasellus nunc. Integer pharetra. Maecenas ornare enim eu odio. Suspendisse consequat blandit tellus. Curabitur est ante, luctus id, tempor non, rhoncus ac, ipsum. </p><p>Lorem ipsum <b><i>dolor</i></b> sit amet, consectetuer adipiscing elit. Phasellus at metus. Nam ut pede et nisi elementum ultrices. Fusce ut neque. Nam fringilla semper purus. Morbi laoreet. Curabitur pulvinar. Integer commodo iaculis tellus. Nulla aliquet augue eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et nisi. Sed id erat et dolor pretium mattis.</p>
    <p>
    Duis condimentum interdum lectus. Nullam vestibulum, ligula quis molestie <b>pellentesque</b>, dui diam blandit nulla, vel vehicula est nisl quis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero risus, laoreet ac, dictum at, pellentesque nec, magna. Praesent eget mi. Pellentesque lectus sem, molestie et, commodo at, placerat ut, nisl. Cras pulvinar leo posuere felis. Praesent tincidunt enim eget erat. In a leo vitae purus imperdiet consequat. Mauris elit ligula, mattis sodales, consectetuer at, accumsan a, nunc. Fusce tristique diam a odio. </p>
    
    <p>
    Aenean fermentum. Suspendisse commodo felis eget sem. Nunc elit. In sit amet quam quis massa fringilla semper. Duis ullamcorper tincidunt tellus. Nam sed ante sed eros gravida imperdiet. Pellentesque pulvinar ultrices ante. Donec adipiscing adipiscing quam. Nulla ac tortor quis elit tincidunt malesuada. In egestas est vel nunc. Donec auctor facilisis neque. Curabitur nec diam at eros gravida tempus. Phasellus tincidunt risus. Phasellus in sem a tellus dictum vulputate. Phasellus nunc. Integer pharetra. Maecenas ornare enim eu odio. Suspendisse consequat blandit tellus. Curabitur est ante, luctus id, tempor non, rhoncus ac, ipsum. </p></div>
    </body>
    </html>
    FF: It works perfectly fine
    IE: The fixed position was hard, but I got it. It jerks though, it will be just fine .
    Here's an example of the menu full page(It's almost valid ): http://niler.net/examples/menuFixed.html
    Last edited by Nile; 07-04-2008 at 05:39 PM.
    Jeremy | jfein.net

  3. #13
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    the change between the first code and the second code was only this right?

    Code:
    <!--[if IE]>
    <style type="text/css">
    #navigation {
    padding-top: 10px;
    position:absolute;
    left: 0px;
    top:expression(body.scrollTop+"px");
    }
    #content {
    padding-left: 200px;
    }
    </style>
    <![endif]-->
    so could i just change the <!--[if IE]> code to make it compatible with IE ?

    anyway here is the test page:

    the one that i say that the css messed up :
    Code:
    http://www.rumahblogger.com/folder/this.htm
    the page was generated from my live website , saved to my computer, and then i added the navbar code, but when i upload the image wont show up, so if you want to see it complete with the image you can download the page here :
    Code:
    http://www.rumahblogger.com/folder/this.rar
    (sorry for the trouble)

    and the navbar should be like this if its not messed up with any css :
    Code:
    http://www.rumahblogger.com/folder/like_this.html
    can you tell me how to solve this please?

    thanks in advance

  4. #14
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I don't see the differences.

    the change between the first code and the second code was only this right?

    Code:
    <!--[if IE]>
    <style type="text/css">
    #navigation {
    padding-top: 10px;
    position:absolute;
    left: 0px;
    top:expression(body.scrollTop+"px");
    }
    #content {
    padding-left: 200px;
    }
    </style>
    <![endif]-->
    And the divs at the bottom.
    I've made it compatible with IE already, witch is why I have the ifs.
    I hope you understand it more now.
    Nile
    Jeremy | jfein.net

  5. #15
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    can you take a look at the .rar file? when you open the page there the navbar will look okay but behind the links there are some kind of background, and the navbar title were not in the right place,

    you can see what i mean in this screenshot :



    could you tell me how to make it the same like in here :

    Code:
    http://www.rumahblogger.com/folder/like_this.html
    thanks again nile you have helped me a lot

  6. #16
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Can you please use zip? I don't use rar.
    And what browser are you using?
    Jeremy | jfein.net

  7. #17
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    sure, here it is :

    Code:
    http://www.rumahblogger.com/folder/this.zip
    the screenshot was taken when im using firefox, but in firefox and IE they showed the same thing..

  8. #18
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    There's nothing in the zip...
    But to fix this, find:
    Code:
    #navigation a:link, a:visited {
    display: block;
    font-size: 70%;
    text-decoration: none;
    color: #000;
    }
    And change it to:
    Code:
    #navigation a:link, a:visited {
    display: block;
    font-size: 70%;
    text-decoration: none;
    color: #000;
    background-color: transparent;
    }
    Jeremy | jfein.net

  9. #19
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Quote Originally Posted by Nile View Post
    IE: The fixed position was hard, but I got it. It jerks though, it will be just fine .
    Use body{background: url(foo) fixed} to get rid of the jerkyness.
    ===
    Arie Molendijk.

  10. #20
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    It doesn't really matter.
    Jeremy | jfein.net

Bookmarks

Posting Permissions

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