(Help) How to disable horizontal scrolling on a website

Discussion in 'HTML & Website Design' started by ronnie84, Dec 3, 2010.

  1. #1
    Hi,

    My client wants a website optimised for the resolution 1366*768 , but the again he does not want a horizontal scroll on smaller resolutions for eg: 1024*768. Can somebody tell me how to disable the horizontal scroll on the website. Thank you
     
    ronnie84, Dec 3, 2010 IP
  2. Sojanjose4u

    Sojanjose4u Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    use a liquid design ??

    give the body element 100 % width . then for the inside elements, either them be a fixed width one or relative width one.
    but in case of fixed width , use margin auto to focus it to the center
     
    Sojanjose4u, Dec 3, 2010 IP
  3. ronnie84

    ronnie84 Well-Known Member

    Messages:
    236
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Thanks for you reply but there is a big image in the background
     
    ronnie84, Dec 3, 2010 IP
  4. Sojanjose4u

    Sojanjose4u Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    when image is set as background using the css property .. i don;t think a scroll bar problem will arise ?
     
    Sojanjose4u, Dec 3, 2010 IP
  5. Holidayskye

    Holidayskye Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You can get plugins for Dreamweaver that can help you turn on and off scroll bars.
    Also with regard to the 'Liquid' idea, I have recently been messing about with turning images liquid too.
    it actually works really well, just give the image a 100% rule and it'll stretch or compress depnding on the browser size.
     
    Holidayskye, Dec 3, 2010 IP
  6. ronnie84

    ronnie84 Well-Known Member

    Messages:
    236
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #6
    What Plugins

     
    ronnie84, Dec 3, 2010 IP
  7. Holidayskye

    Holidayskye Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Well the one I use is mainly for pop up windows, but perhaps you can work out the code needed by using it and then looking at the generated code.
    (i can't post live links yet so google search for Fluid Browser Dreamweaver Extension)

    also this may help, it's from a forum i found.

    "In order to disable the scroll bar in the IE, you can do the following. In the body tag, there is a property call scroll. Set it to no"
    <body scroll=no>
     
    Holidayskye, Dec 3, 2010 IP
  8. Holidayskye

    Holidayskye Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    another forum answer.....

    yes.. certainly..
    there are two ways which you could do so.. one is to place the entire site in
    a frame and set the properties to "scrolling=no" or make use of CSS to change
    the colour of the scrollbar to the same colour of your background or page
    colour.. however, the CSS method will not work on netscape.

    [q]Originally posted by: rG]Courage-D-
    is there any way i can hide the scroll bars? i do not meen with a java popup
    window![/q]

    and another

    Try this:

    <body style="overflow:hidden;">
     
    Holidayskye, Dec 3, 2010 IP
  9. calvin4u

    calvin4u Peon

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I think by using this code you can disable horizontal scrolling overflow-y: hidden;
     
    calvin4u, Jan 27, 2011 IP
  10. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #10
    The way I do it is set a min-width and max-width on your container.

    
    <div id="wrap" style="min-width: 770px; max-width: 1002px; width: 96%; margin: 0 auto}
    Code (markup):
    That will give you a 2% left and right margin and the screen won't add scroll bars unless it's smaller than 770px (which is 800px wide with no horz scroll) and it will always be centered.

    setting overflow to hidden will hide content without letting the user know they are missing something. Bad idea.
    Frames went out with grunge. Bad idea.
    Plugins are mostly bloated code and won't work in the OP request.
    Not going with a liquid layout will render your site mostly useless on mobile. Bad idea

    You also do not want a window 13xx or more wide. I believe the optimal width is either 32 or 35em wide. Google it. :)
     
    AtSeaDesign, Jan 27, 2011 IP