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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Alternative to overflow:auto (sidebar without tables)

    Hello,

    I am currently making a vBulletin skin, and was wondering if there were any alternative to overflow: auto? The thing is, I'm trying to create a sidebar without tables AND with a fluid wrapper.

    My CSS code looks like this:
    Code:
    #wrapper {
     width: 90%;
     min-width: 980px;
     margin: 10px auto 0 auto;
     background: #1a1a1a url(images/magnetic/style/wrapper.png) repeat-x top left;
     border: 1px solid #161616;
     overflow-x: hidden;
     -moz-border-radius: 8px 8px 8px 8px;
     -webkit-border-bottom-left-radius: 8px;
     -webkit-border-bottom-right-radius: 8px;
     -webkit-border-top-left-radius: 8px;
     -webkit-border-top-right-radius: 8px;
    }
    
    #right-content {
     float: right;
     width: 275px;
     color: #7a7a7a;
     padding: 15px 0;
    }
    
    #left-content {
     margin: 0px 0 0 0;
     background: #e9ecee url(images/magnetic/style/bg-main.gif);
     padding: 0px;
     min-height: 800px;
     overflow: auto;
     overflow-x: hidden;
     -moz-border-radius: 8px 8px 8px 8px;
     -webkit-border-bottom-left-radius: 8px;
     -webkit-border-bottom-right-radius: 8px;
     -webkit-border-top-left-radius: 8px;
     -webkit-border-top-right-radius: 8px;
    }
    And here's what the HTML looks like:
    Code:
    <div id='wrapper'>
    
            <div id='right-content'>
    
    Right content (sidebar) here
    
            <!--end right--></div>
    
                <div id='left-content'>
    
    The left content here
    
                </div>
    </div>
    The thing is, when the overflow:auto is there, the page looks fine BUT it has issues when opening, for example, dropdown menu or expanding a big image.

    Here's what it does when opening a dropdown menu:


    Here's what it does when trying to open an image:


    So what I'm trying to do, is to create a fluid layout with a right sidebar without tables. It's working, although I'm looking for some code modifications so it doesn't have issues with the dropdowns etc. Basically, it seems that everything looks fine BUT when we open something that is "larger" than the #left-content ID. Then it creates issues.

    Any idea?

    Thank you so much in advance.

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    15
    Thanks
    2
    Thanked 1 Time in 1 Post
    Most forums I have seen don't allow the image to be maximized in it's post (possibly because there isn't a way to do it) and instead just link you to the image in a new tab/window.

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, yeah it's possible with VB/IPB. The problem won't be solved that way though - I'm selling this template. It has to have no bugs in it. This is not an option at all. I need to tweak the code.

    Anyone willing to help please? Even willing to pay for this as it's pissing me off so much.

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    15
    Thanks
    2
    Thanked 1 Time in 1 Post
    Sorry about that, I missed the image of the menu being hidden.
    You could try using the z-index property but you will also have to use the position property also for it to work.
    http://www.w3schools.com/css/pr_pos_z-index.asp

    But for large images, from the image that I'm seeing, when the image is maximized it's disappearing "under" the side menu, if you wanted it so that the image displayed fully it would either push everything out to the right making the page look broken while it's full or it would overlay over the side bar again looking broken, the other option is to make overflow scroll for that post so it would still be partially hidden, and the user would have to scroll to the right to see the rest of the image but that would be annoying for the user to have to scroll to see the image in sections in a sense.
    You could also use lightbox or something similar. But the best option is to have the image auto fit (like it is) and click to see the whole image in a new tab/window, that isn't really a bug, but a useful function rather than having to scroll to see a large image.

    hope that is a little more helpful.
    Last edited by shepherd; 05-19-2010 at 01:04 AM.

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Shepherd,

    Thanks for your reply.

    I tried to do a z-index:10000; and a position:absolute and it won't work at all.

    I'm so lost right now.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There may be some help here. Use the search box.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You may want to try clearing using the :after pseudoclass.

    http://www.webtoolkit.info/css-clearfix.html


  •  

    Posting Permissions

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