How do you avoid horizontal scrollbars?

Question

I'm doing an assignment for Web Design and I can't figure out how to keep my menu frame from getting horizontal scrollbars. When it's just the plain menu there are no bars, but when I click on "intvertebrates" and the menu expands the scroll bar (horizontal) appears. Take a look and if you don't get the scrollbar let me know which browser you are using as my teacher will most likely be using Safari.

http://www.niagara-news.com/jour1320sites/mbunston2/animals/animals.html

Answer 1

You can add an scrollbar attribute to the menu frameset to prevent the browser for displaying horizontal scrollbars. The problem is that if the content is wider than the allocated space for the menu frame, the content will overflow the section and will not be visible. You should make the menu frame as wide as the widest element of the content to prevent this issue. Here is a sample of the code for a frame with scrollbars:


As mentioned by another poster, you should not use frames in modern-day web development. The use of frames creates a lot of problems for search engines, collecting web analytics and creating the same experience for all visitors to your site on the various browsers and operating systems. However, I realize you are new and working on a school assignment where you do not have an option not to use frames.

Best of luck!

Answer 2

You need to give your menu a specific width in pixels so that it remains the same size all the time.

Same goes for layers and tables.
If you design a website for a screen of 800 x 600 without giving it a specific dimension in pixels, everything will expand when someone look at it on the web using a resolution of 1024.
This can make your beautiful website look absolutely terrible.

Also, because the monitors don't display exactly 800 (like televisions, a little bit of the screen is behind the plastic frame), your width dimension should be about 790 pixels for a screen of 800. Otherwise you'll get the horizontal scrollbar at the bottom of each page.

Answer 3

It looked okay in Firefox 2 until I bumped up the text size. What's happening is that the browser allocates space for the frame based on its initial size. If the frame expands, it adds scrollbars to let you see the added space.

First, I'd say if frames aren't required for the assignment, don't use them. Otherwise, you can stop the browser from displaying the scrollbars by adding 'scrolling="no"' to the frame tag. This still leaves you with the problem of what happens when your frame outgrows its space. I'd make the initial frame large enough so it doesn't have to expand, and control text size in the sub-menus by specifying font-size in px so it can't be resized.

Answer 4

1) get a bigger screen! (it works for me)
2) don't use framesets... they are a relic from the last millennium!
3) force the frames to not automatically do scrolling (scrolling="no") on each frame!

as for "2", modern sites don't use frames or framesets very much, they converted to iframes long ago, and now use ajax techniques to SLAP the secondary pages right into the main html page!

but "3" should get you through your assignment!