...

View Full Version : Horizontal Scroll Bar



juddwa
08-07-2010, 01: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
08-07-2010, 02:09 AM
U can do it using CSS,


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

juddwa
08-07-2010, 05:11 AM
Do I put that code between <head> and </head>? If not there, then where do I put it?

Thanks.

abduraooft
08-07-2010, 09: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
08-07-2010, 02:32 PM
Its a CSS style Sorry I didnt add that before,


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

juddwa
08-07-2010, 03: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
08-07-2010, 04: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
08-07-2010, 06:23 PM
Thanks. That really helps me out.

juddwa
08-09-2010, 03: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
08-09-2010, 04: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
08-09-2010, 04: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
08-09-2010, 04:09 PM
SB65 thanks for those links. I will check them out.

juddwa
08-09-2010, 05: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
08-09-2010, 06: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
08-09-2010, 06:13 PM
Thank you for your help.

juddwa
08-09-2010, 06: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
08-09-2010, 06: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
08-09-2010, 06: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
08-09-2010, 06: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
08-09-2010, 06: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
08-10-2010, 01: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
08-10-2010, 02: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum