Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 20
  1. #1
    Junior Member
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26315
    I am working on a website for a graphic designer. Example page: Haesegat : Erik Desombere | Grafische Vormgeving

    Problem: when the screen size is small, a scrollbar appears in the left menu pane for the expanded menu. This scrollbar should appear on the very right of the window, not in the left menu div.

    I tried to solve this by adjusting the overflow and position settings, but it just wont work :'(
    I played around in Firebug for hours, and can't figure it out.

    By setting the position to 'absolute' instead of fixed, it works. But then the menu doesn't stay in place when you scroll horizontally.

    Please, any css wizzard that can tell me what I'm doing wrong?

    Code:
    /*CSS*/
    
    body, h1, h2, h3, ul, li, form {border:0; margin:0; padding:0; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #A0A0A0; }
    body {background-color:black;}
    p {border:0; margin:0; padding:0; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #A0A0A0;}
    
    #menu-background {width: 300px;  top: 0; bottom: 0; left: 0; position: fixed; height: 100%; background-color:white ; z-index:10;}
    #menu {z-index: 12; width: 300px; overflow: auto; top: 0; bottom: 0; left: 0; position: fixed; height: 100%; background-image:url('/afbeeldingen/menu-background.png');background-repeat:repeat;}
    #menu .container { margin: 60px 0 0 10px; }
    #content {z-index: 11; position: relative; padding: 0px; height: auto; margin: 60px 0 0 300px;}
    #the-background{position:fixed;z-index:1;width:100%;height:100%;top:0;left:0;}
    #wrapper {position: absolute;z-index: 2;width: 100%;height: 100%;top: 0;left:0;}
    PHP 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' xml:lang='en' lang='en'>
    <
    head>
    <
    meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>

    <
    title><%title%> : <%obj_name%></title>

    <
    link rel='stylesheet' href='<%baseurl%><%basename%>/site/<%obj_theme%>/style.css' type='text/css' />
    <!--[if 
    lte IE 6]>
    <
    link rel='stylesheet' href='<%baseurl%><%basename%>/site/<%obj_theme%>/ie.css' type='text/css' />
    <![endif]-->
    <
    plug:front_lib_css />
    <
    plug:front_dyn_css />


    <
    script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
    <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
    <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingMenus.js'></script>
    <plug:front_lib_js />
    <script type='text/javascript'>
    path = '<%baseurl%>/files/gimgs/';

    $(document).ready(function()
    {
        setTimeout('move_up()', 1);
    });
    $(document).ready(function() { 
        setTimeout('move_up()', 1); 
        expandingMenu(0); 
        expandingMenu(1); 
        expandingMenu(2); 
        expandingMenu(3); 
    });



    </script>

    <script type='text/javascript'>
    function bg_img_resize() 
    {
        var w = $(window).width();
        var h = $(window).height();
        var iw = $('#the-background img').attr('width');
        var ih = $('#the-background img').attr('height');
        var rw = iw / ih;
        var rh = ih / iw;
        var sc = h * rw;
        if (sc >= w) {
            nh = h;
            nw = sc;
        } else {
            sc = w * rh;
            nh = sc;
            nw = w;
        }
        $('#the-background img').css({height: nh, width: nw});
    }
    $(document).ready(function(){ bg_img_resize(); });
    $(window).resize(function(){ bg_img_resize(); });
    </script>
    <plug:front_dyn_js />

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-19678092-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
    </head>

    <body class='section-<%section_id%>'>

    <div id='the-background'><plug:full_background /></div>

    <div id='wrapper'>

    <div id='menu-background'>
    </div>    


    <div id='menu'>
    <div class='container'>

    <%obj_itop%>

    <plug:front_index />
    <%obj_ibot%>




    </div>    
    </div>

    <div id='content'>
    <div class='container'>

    <!-- text and image -->
    <plug:front_exhibit />
    <!-- end text and image -->

    </div>
    </div>

    </div>

    </body>
    </html> 

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The problem seems to be one of two things:

    1) #menu-background is fixed relative to a parent container. Usually when that's the case, you get the effect that you see.

    2) #menu-background doesn't have a width of 100%, or at least there isn't a fixed parent container with a width of 100%.

    So I'd do two things:

    1) Put the menu either just before the end of the page or just after the beginning (after the <body> tag or before the </body> tag.

    2) Create a parent container for the menu and fix that, with a width of 100%.

    I've done something similar in the past, although I don't have the code handy for it right now.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26315
    Thanx, it worked!

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    so, you want the menu to scroll by a bar on the far right replacing the normal browser scroll and you don't want the menu to shift left or right. do i have that right?

    while($get_it !== true){ continue; }

  6. #5
    Junior Member
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26315
    Hey Dorky

    Yes, that is correct, but I have that already working thanks to the reply of TheGAME1264.

    The problem now is that there are 2 scrollbars on the right when the screen is small: one to move the overflowing menu up and down, and one to move the overflowing images in the content up and down.

    And that's supposed to be only one scrollbar.

    Any idea?

    Thanx a lot

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    you can get rid of the default scroll bar but the question is how will your visitors view overflowing content if they can only scroll the menu? if this is a non-issue
    body { position: absolute; width: 100%; height: 100%; overflow: hidden; }

    while($get_it !== true){ continue; }

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Your menu div still has parent containers. Multiple ones. Bring it outside of those parent containers. It should be a parent container all by itself.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Junior Member
    Join Date
    Jan 2011
    Posts
    8
    Member #
    26315
    Thanx, but I really can't figure it out. Must be something stupid that I don't know ...
    I made a simple example page: Attachment 3552

    This is the effect that I want, BUT with the menu (left side) fixed!

    Overflowing menu or content brings out an scrollbar.

    Any idea?

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {width: 100%;height: 100%; margin: 0; background-color: green;}
    #menu-background {z-index: 1; position: fixed; width: 300px; margin: 0; height: 100%; background-color:white;} 
    #menu-transparancy {z-index: 15; position: fixed; width: 300px;  margin: 0; height: 100%; background-color:red; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;}
    #menu {z-index: 20; position: absolute; width: 300px; margin: 0; height: 100%;} 
    #content {z-index: 10; position: absolute; width: 100%; margin: 100px 0 0 300px;}
    -->
    </style>
    </head>
    <body>
    <div id="menu-background"></div>
    <div id="menu-transparancy"></div>
    
    <div id="content">Hereddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrf  <ul>
        <li></li>
        <li>qsf</li>
        <li>s</li>
        <li>sf</li>
        <li>s</li>
        <li>fs</li>
        <li>fs</li>
        <li>fs</li>
        <li>fqs</li>
        <li>f</li>
        <li>sf</li>
        <li>sf</li>
        <li>qsf</li>
        <li>qsf</li>
        <li>qs</li>
        <li>f</li>
        <li></li>
        </ul></div>
    
    <div id="menu">
      <ul>
        <li></li>
        <li>qsf</li>
        <li>s</li>
        <li>sf</li>
        <li>s</li>
        <li>fs</li>
        <li>fs</li>
        <li>fs</li>
        <li>fqs</li>
        <li>f</li>
        <li>sf</li>
        <li>sf</li>
        <li>qsf</li>
        <li>qsf</li>
        <li>qs</li>
        <li>f</li>
        <li>qsf</li>
        <li>sfsfs</li>
        <li>qsfsfqsf</li>
        <li>qsfqsfsf</li>
        <li>qsfqsfqsf</li>
        <li>qsfsfqsf</li>
        <li>qsfsfqs</li>
        <li>qsfsfs</li>
        <li>qs</li>
        <li>qsf</li>
        <li>s</li>
        <li>sf</li>
        <li>s</li>
        <li>fs</li>
        <li>fs</li>
        <li>fs</li>
        <li>fqs</li>
        <li>f</li>
        <li>sf</li>
        <li>sf</li>
        <li>qsf</li>
        <li>qsf</li>
        <li>qs</li>
        <li>f</li>
        <li>qsf</li>
        <li>sfsfs</li>
        <li>qsfsfqsf</li>
        <li>qsfqsfsf</li>
        <li>qsfqsfqsf</li>
        <li>qsfsfqsf</li>
        <li>qsfsfqs</li>
        <li>qsfsfs</li>
        <li>qs</li>
        <li>f</li>
        <li>fs</li>
        <li>f</li>
        <li>s</li>
        <li>f</li>
        <li>qs</li>
        </ul>
     
    </div>
    </body>
    </html>

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    overflow: hidden; <-- add that to your menu background CSS.

    Also, you don't need two fixed divs. You only need one. Put the menu div inside of one of them (probably menu-background).

    You're getting warmer, though.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Won't "overflow:hidden" make it impossible to see the bottom part of the menu if it is longer than the content??
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

add scrollbars to position fixed
,
chrome css fixed position over scrollbar
,
css position fixed no scrollbar
,
css position scrollbar absolute
,
css scrollbar position absolute
,
html scrollbar offset fixed position
,

position fixed scrollbar

,
scrollbar padding position fixed
,
scrollbar z-index fixed
,
winrt move scrollbar position to fixed point
Click on a term to search for related topics.
All times are GMT -6. The time now is 05:43 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com