Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal Scroll Bar

    I just built a website and on some computers, like mine, everything is able to be seen on the same page. But on other screens, the pictures wrap around and it isn't the same as I intended it. I think the solution is to install a horizontal scroll bar at the bottom of my website.

    Does anyone know the html code to install a horizontal scroll bar on the bottom of my website?

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    U can do it using CSS,

    Code:
    .scroll-div{
    overflow-x:scroll;
    }
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do I put that code between <head> and </head>? If not there, then where do I put it?

    Thanks.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Do you have a CSS file linked to your page? If yes, put the above given CSS in that file. Otherwise, put the following inside the <head> tag of your document.
    Code:
    <style type="text/css">
    .scroll-div{
    overflow-x:scroll;
    }
    </style>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Its a CSS style Sorry I didnt add that before,

    Code:
    <style type="text/css">
    .scroll-div{
    overflow-x:scroll;
    }
    </style>
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #6
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am relatively new to this. Could you please tell me if I don't insert that code between <head> and </head>, where do I put that CSS code?

    I really appreciate it. Also, feel free to check out my website at http://www.unlimitedsportsmacktalk.com. That might help show what I am talking about.

    Thanks.

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    You can put that css code outside the head tags, but u need to set a div class with the same name so the css takes effect.

    example:

    Code:
    <style type="text/css">
    .scroll-div{
    overflow-x:scroll;
    }
    </style>
    
    <div class="scroll-div"></div>
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. That really helps me out.

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried putting that CSS code in both inside and outside of the <head> </head> but the horizontal scroll bar won't appear on my site.

    Does anybody know why that is?

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You do have a scrollbar - at the top of the page. There's nothing in the div to which the style has been applied however. You may want to try enclosing all of the rest of the code within that div - then you'll get a scroll bar at the bottom. I'm not quite sure if that's what you want though...

    Your page has a lot of errors - not least the absence of a doctype. Worth sorting these out if you are aiming for consistency across different browsers. IE is quite likely to display oddly without a doctype.
    Last edited by SB65; 08-09-2010 at 04:05 PM.

  • #11
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't see the horizontal scroll bar either on my laptop nor on a regular computer. I do, however, see the pictures wrapped around on a regular computer, but not on my laptop.

    The reason why I want the horizontal scroll bar at the bottom is that I don't want the pictures to wrap around, if the screen is not big enough. Instead I want people to be able to scroll across and see the rest of the page - pictures included.

  • #12
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SB65 thanks for those links. I will check them out.

  • #13
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    You do have a scrollbar - at the top of the page. There's nothing in the div to which the style has been applied however. You may want to try enclosing all of the rest of the code within that div - then you'll get a scroll bar at the bottom. I'm not quite sure if that's what you want though...

    Your page has a lot of errors - not least the absence of a doctype. Worth sorting these out if you are aiming for consistency across different browsers. IE is quite likely to display oddly without a doctype.
    I am trying to tackle the problems that these links have pointed out. Since I am new to this, what type of encoding would you recommend I use? Am I supposed to change the encoding used throughout the website?

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Do you mean what sort of doctype?

    For this site, given you have a lot of old-fashioned code I'd recommend:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    You other option, harder but better, is to go with a strict doctype:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    but you'll probably have to rewrite a this good chunk of code as this doctype doesn't allow some of the code you have (eg. <font>)

    If you mean character encoding then utf-8 should be fine.
    Last edited by SB65; 08-09-2010 at 06:05 PM.

  • #15
    New Coder
    Join Date
    Aug 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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