www.webdeveloper.com
Results 1 to 6 of 6

Thread: Horizontal Scrollbar

  1. #1
    Join Date
    Dec 2002
    Posts
    10

    Horizontal Scrollbar

    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.

    Thanks!!!

  2. #2
    Join Date
    Dec 2002
    Posts
    6
    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.

  3. #3
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by villenuv27
    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]
    You are exactly describing how to FORCE a scrollbar at resolutions below 800x600.

    The real solution if you want to avoid scrollbars is to use CSS and NOT force a specific width on anything.

    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.

    In short, <table> based layout is the thing you should AVOID if you don't want horizontal scrollbars.
    // Stefan Huszics

  4. #4
    Join Date
    Dec 2002
    Posts
    10
    How do I do that (use CSS)? All of my pages are in tables, can I still use them?

    Thanks

  5. #5
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    For example:

    put it between <head></head>:

    <style type="text/css">
    <!--
    table.fix {
    width:772;
    }
    -->
    </style>


    and your <table> could be:

    <table class="fix">


    Swon

  6. #6
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by webGirl20032003
    How do I do that (use CSS)? All of my pages are in tables, can I still use them?

    Thanks
    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.

    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.

    With page layout this "ignore your wishes" property of tables is usually not desired.

    Thus the best solution if you really want to avoid horizontal scrollbars is to get rid of tables abused for layout all together.

    Eactly how to convert your pages to a tableless design I can't answer since you are not linking to them.

    But I can give you an example of how to make a big image fit on screen and have it's own scrollbar

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title></title>
    <style type="text/css" title="Default" media="screen">
    .imagecontainer {overflow:auto; width:100%;}
    #fakeimage {width:2000px; height:200px; border:2px solid red;}
    </style>
    </head>
    <body>

    <div class="imagecontainer">
    <div id="fakeimage">
    This is representing a large image.
    </div>
    </div>

    </body>
    </html>
    // Stefan Huszics

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles