homepage Welcome to WebmasterWorld Guest from 54.167.41.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Force horizontal scrollbar when resizing browser window
snehula




msg:4313040
 12:29 pm on May 16, 2011 (gmt 0)

Hi there :-)

I would really appreciate some help with page resizing issues. I have a tabbed menu on the site i'm trying to put together, and other stuff on each page. Now, normally if users resize any of the pages, stuff begins to float around and the tabbed menu flows on to the next line and gets ugly. I'm looking for a way to prevent this from happening, and have a nice layout that stretches the width of the page with additional scroll controls rather than flowing on to the next line and messing up the whole thing.
I tried using overflow:auto on the body tag, but honestly I ain't got a clue how to use it for the whole page rather than adding scrolls to individual elements or divs, anyway I didnt get the hang of the overflow thing.
Thanks :-)

If the level of "expertise"/stupidity in my questions insults you, you're probably the right person to answer them :-)))

 

lucy24




msg:4313171
 4:26 pm on May 16, 2011 (gmt 0)

Uh-oh. What I'm reading is "How can I force my users to keep their window at a certain size because my site looks prettier that way?" You can certainly force a page width by a variety of means, starting at the <body> level-- but are you absolutely certain you want to? I'm speaking here as a user, not a designer.

Someone else will come along and tell you exactly how to operate the gun ;)

alt131




msg:4313324
 10:09 pm on May 16, 2011 (gmt 0)

Now, now Lucy ... that would create an awful mess and no one ever volunteers for clean-up ;)

Hi snehula and a big welcome to CSS :)

I wonder if the menu bar is created by floating list items, perhaps inside another container (div?), with the width as a %? Browsers will usually create a horizontal scroll bar if an element's width exceeds the width of the viewport. So easiest to set a specific width (or min-width) in px on the element that contains the menu items.

However, really important to ask how that will affect users. Horizontal scrolling is often disliked, plus users with motor skills issues can have real difficulty moving between the scrollbar and menu items. Also the hidden menu items might be overlooked so parts of your site are never visited. Useful to ask if you want to risk those sorts of things.

tried using overflow:auto on the body tag, but honestly I ain't got a clue how to use it for the whole page rather than adding scrolls to individual elements or divs, anyway I didnt get the hang of the overflow thing.
Sounds like you almost did :) overflow:auto [w3.org] "should cause a scrolling mechanism to be provided for overflowing boxes"
But that needs an element to be wider than the containing box so it overflows and "triggers" the scrollbars. As you've explained, the elements aren't overflowing - they are rearranging themselves inside the containing box, which means they are not triggering a scrollbar.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved