Horizontal Scrollbar

liunx

Guest
Is there a way to set up a Web page so that there isn't a horizontal scrollbar? My pages are all set up to the left, and there isn't much on the right side, but on certain, older, smaller monitors, you have to scroll to the right to see everything. I would really appreciate any suggesstions you may have. <br />
<br />
Thanks!!!<!--content-->If there is something to the right of your page that won't fit on the monitor, the browser will automatically put the horizontal scrollbar in. To avoid getting the horizontal scroll bar, put all of your code inside a table with a max width of around 775-790 pixels (to compensate for the smallest viewing area that some people still use of 800 x 600.) That way all of your code is confined to under 800 pixels wide and won't require the horixontal scrolling.<!--content-->Originally posted by villenuv27 <br />
To avoid getting the horizontal scroll bar, put all of your code inside a table with a max width of around 775-790 pixels (to compensate for the smallest viewing area that some people still use of 800 x 600.) That way all of your code is confined to under 800 pixels wide and won't require the horixontal scrolling. [/B] <br />
<br />
You are exactly describing how to FORCE a scrollbar at resolutions below 800x600.<br />
<br />
The real solution if you want to avoid scrollbars is to use CSS and NOT force a specific width on anything.<br />
<br />
You can even use CSS to make eg a 1000px wide image to not give the entire page a horizontal scrollbar, only a scrollbar for the image itself or even to cut off the parts not fitting if you like.<br />
<br />
In short, <table> based layout is the thing you should AVOID if you don't want horizontal scrollbars.<!--content-->How do I do that (use CSS)? All of my pages are in tables, can I still use them?<br />
<br />
Thanks<!--content-->For example:<br />
<br />
put it between <head></head>:<br />
<br />
<style type="text/css"><br />
<!--<br />
table.fix {<br />
width:772;<br />
}<br />
--><br />
</style><br />
<br />
<br />
and your <table> could be:<br />
<br />
<table class="fix"><!--content-->Originally posted by webGirl20032003 <br />
How do I do that (use CSS)? All of my pages are in tables, can I still use them?<br />
<br />
Thanks <br />
<br />
One of the problem with tables for layout is that a table is deliberately designed to IGNORE any width you specify on it if the content in it doesn't fit.<br />
<br />
The reson for this is that in a "real" table you have rows and columns of tabular data and the worst thing that can happen in that situation is if some of the content is not visable because the content is too wide.<br />
<br />
With page layout this "ignore your wishes" property of tables is usually not desired.<br />
<br />
Thus the best solution if you really want to avoid horizontal scrollbars is to get rid of tables abused for layout all together.<br />
<br />
Eactly how to convert your pages to a tableless design I can't answer since you are not linking to them.<br />
<br />
But I can give you an example of how to make a big image fit on screen and have it's own scrollbar<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta http-equiv="Content-Script-Type" content="text/javascript"><br />
<meta http-equiv="Content-Style-Type" content="text/css"><br />
<title></title><br />
<style type="text/css" title="Default" media="screen"><br />
.imagecontainer {overflow:auto; width:100%;}<br />
#fakeimage {width:2000px; height:200px; border:2px solid red;}<br />
</style><br />
</head><br />
<body><br />
<br />
<div class="imagecontainer"><br />
<div id="fakeimage"><br />
This is representing a large image.<br />
</div><br />
</div><br />
<br />
</body><br />
</html><!--content-->
 
Back
Top