PDA

View Full Version : Horizontal Scroll Bar



juddwa
Aug 7th, 2010, 02:41 AM
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?

PitbullMean
Aug 7th, 2010, 03:09 AM
U can do it using CSS,


.scroll-div{
overflow-x:scroll;
}

juddwa
Aug 7th, 2010, 06:11 AM
Do I put that code between <head> and </head>? If not there, then where do I put it?

Thanks.

abduraooft
Aug 7th, 2010, 10:09 AM
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.
<style type="text/css">
.scroll-div{
overflow-x:scroll;
}
</style>

PitbullMean
Aug 7th, 2010, 03:32 PM
Its a CSS style Sorry I didnt add that before,


<style type="text/css">
.scroll-div{
overflow-x:scroll;
}
</style>

juddwa
Aug 7th, 2010, 04:02 PM
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.

PitbullMean
Aug 7th, 2010, 05:17 PM
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:



<style type="text/css">
.scroll-div{
overflow-x:scroll;
}
</style>

<div class="scroll-div"></div>

juddwa
Aug 7th, 2010, 07:23 PM
Thanks. That really helps me out.

juddwa
Aug 9th, 2010, 04:42 PM
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?

SB65
Aug 9th, 2010, 05:02 PM
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 (http://validator.w3.org/check?uri=http://www.unlimitedsportsmacktalk.com/) - not least the absence of a doctype (http://www.alistapart.com/articles/doctype). Worth sorting these out if you are aiming for consistency across different browsers. IE is quite likely to display oddly without a doctype.

juddwa
Aug 9th, 2010, 05:07 PM
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.

juddwa
Aug 9th, 2010, 05:09 PM
SB65 thanks for those links. I will check them out.

juddwa
Aug 9th, 2010, 06:36 PM
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 (http://validator.w3.org/check?uri=http://www.unlimitedsportsmacktalk.com/) - not least the absence of a doctype (http://www.alistapart.com/articles/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?

SB65
Aug 9th, 2010, 07:02 PM
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.

juddwa
Aug 9th, 2010, 07:13 PM
Thank you for your help.

juddwa
Aug 9th, 2010, 07:14 PM
You don't know how much it means to me that I have found a website that offers so much useful and helpful information. Since I am new to this, finding an online coding community is probably the best resource I can find.

Thanks.

juddwa
Aug 9th, 2010, 07:21 PM
Since I have a lot of old-fashioned code, where can I find all of the newer codes? I just began building my website 6 months ago and found everything online, but I want to make sure I am using the most up-to-date codes that are.

Thanks.

juddwa
Aug 9th, 2010, 07:34 PM
I hate to keep bugging you, SB65, but I was wondering why I can't see the horizontal scroll bar on my website? I am making some adjustments on my laptop, before I send it live, but the scroll bar doesn't appear at all.

I took your advice and put </div> at the end of the entire code for the site, but the scroll bar still won't appear.

nobel
Aug 9th, 2010, 07:47 PM
hi friend,
i read your post.it attracted me.but i want to know detail about it.plz tell me how can i know about it detail?
http://online-earning-ways.com

SB65
Aug 9th, 2010, 07:49 PM
I hate to keep bugging you, SB65, but I was wondering why I can't see the horizontal scroll bar on my website? I am making some adjustments on my laptop, before I send it live, but the scroll bar doesn't appear at all.

I took your advice and put </div> at the end of the entire code for the site, but the scroll bar still won't appear.

You still have:


<div class="scroll-div"></div>

at the start of your code. Remove the closing </div> in this statement. Then, everything else in your html will be enclosed within that div.

If you really want to get your code right, adopt the strict doctype and work through all the errors that the validator throws out. This will get rid of all the old ("deprecated") code.

Tables are best avoided for layouts - here's some reasons why (http://www.hotdesign.com/seybold/index.html) - have a look here (http://bonrouge.com/3c-hf-fluid-lc.php) for some good non-table layouts.

For basics on css and html I like http://www.w3schools.com/

juddwa
Aug 10th, 2010, 02:30 AM
I am more confused than ever. It seems that when I follow the Markup Validation link, at W3C.org, that might site falls apart. I don't know the more advanced code to replace the old code with to make it where my site looks how I want it.

Any advice?

juddwa
Aug 10th, 2010, 03:05 AM
W3Schools are useful as they are full of information. I just worry that I am going to get lost in it, instead of knowing how to locate the exact thing that I am interested in finding out with any given problem involving coding at any given moment.