scroll in centre of page [Archive]

View Full Version : scroll in centre of page

muldoon_smooth

08-26-2003, 02:30 PM

As a total noob to CSS can someone point me to a tutorial for having a small scrollable area in the middle of the page without having to have multiple frames in a frameset.

Cheers:confused:

bazz

08-26-2003, 03:03 PM

Hi,

I can't look right now (I'm under 'P' today), for the link to the w3c schools for css though you could try a search engine, with those keywords.

If you are a bit familiar you could try,thius in the head fo your html page.

<link rel="stylesheet" href="name of cssfile.css" type="text/css">

Then in the css file:

.scrolling text (or other name you prefer) {position: absolute; top: 200px; left: 200px; height: 250px; width: 300px; font-family: "Arial", verdans, sans-serif, helevicta; font-size: 10pt; color: 008080; scroll: auto;
}

Then in your HTML page try: -

<p class="scrollingtext">this is where you put your text in.</p>

Then play around with the dimensions until you are content :)

hth

Bazz

Catman

08-26-2003, 05:36 PM

Almost. It's really overflow : auto;

muldoon_smooth

08-27-2003, 11:35 AM

Thank you both very much but I think I'm missing something cos it's not working.

I've got a text doc called 'scrollinfo.css' with this code:

.scrolling text {position: absolute; top: 200px; left: 200px; height: 250px; width: 300px; font-family: "Arial", verdans, sans-serif, helvetica; font-size: 10pt; color: 008080; overflow: auto;
}

and an html page with this:

<html>
<head>
<link rel="stylesheet" href="scrollinfo.css" type="text/css">
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p class="blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah ">

</body>
</html>

I did say I was noob at this

muldoon_smooth

08-27-2003, 11:49 AM

OK I spotted my mistake and put the text in thus:

<p class="scrollingtext">blah blah blah blah blah blahblah blah</p>

It now works!! But only in Netscape! The scrollbar appears in IE 5.1 (Macos9.2) but doesn't work, ie it's static.

bazz

08-27-2003, 11:52 AM

Originally posted by Catman
Almost. It's really overflow : auto;

:o Just testing to see if your watching :D

OK Muldoon_Smooth, it might be simple. Is the css file located in the same folder as the html page. if not then your link to the css file needs to change in some way. Say, for example the css file is in the root folder of your site and your html page is in a folder within this. then try ../ before your present link.

<link rel="stylesheet" href="../ scrollinfo.css" type="text/css">

If the css file is on a folder that is inside that which contains the html file try this

<link rel="stylesheet" href="NameOfFolder/scrollinfo.css" type="text/css">

Or you could use an absolute URL for the href. Just that it wont work when testing your site off line.

If those suggestions dont work you may need to add the top part of all my stylesheets above your script. i dunno if its necessary as I've never tried to validate the css without it.

Here it is anyway.

BODY { font-family: "Arial", verdana, helvetica, sans-serif; font-size: 90%; color: #336633; background-color: #004040; background-image: url("images/bckgrnd.gif"); scrollbar-face-color:#8AA385;
scrollbar-base-color: #336633;
scrollbar-arrow-color: #336633;
scrollbar-3d-light-color: #336633;
scrollbar-dark-shadow-color: #336633;
scrollbar-highlight-color: #336633;
scrollbar-shadow-color: #336633;

}

The scrollbar stuff only works (I think), with IE. And how well my colours looks across different browsers I have no idea.

Bazz

muldoon_smooth

08-29-2003, 08:02 AM

Thanks Bazz, the css text doc is defenitely in the same folder. I'll try your suggestions later on today.
Cheers

muldoon_smooth

08-29-2003, 11:37 AM

No luck I'm afraid. Everything appears (text, scrollbar and now colours) but it simply refuses to scroll in IE. So close and yet...

PS Definitely

bazz

08-29-2003, 12:49 PM

Can you give me a link to the page that is giving the grief? (It's always the page or the browser, isn't it? :D ) I'll try to get a look at it tonight but if not, then tomorrow.

Meant to say tooo. Make sure you have loads of text in the text area so that it has to scroll. If you don't, then with the auto setting for your scrollbar (in the css), it wont appear or, if it does it will be the full length (nearly) of the text area and so won't move much.

Please confirm which browser and o/s your on.

Bazz

muldoon_smooth

09-01-2003, 11:23 AM

Thanks Bazz

This is not for a specific project but it's something I want to be able use in the future.

Here's the link: scroll (http://www.webjelly.net/scroll/index.html)

Here's the scrollinfo.css:

BODY { font-family: "Arial", verdana, helvetica, sans-serif; font-size: 90%; color: #336633; background-color: #FFFF00; background-image: url(""); scrollbar-face-color:#8AA385;
scrollbar-base-color: #336633;
scrollbar-arrow-color: #336633;
scrollbar-3d-light-color: #336633;
scrollbar-dark-shadow-color: #336633;
scrollbar-highlight-color: #336633;
scrollbar-shadow-color: #336633;

}
.scrollingtext {position: absolute; top: 200px; left: 200px; height: 100px; width: 300px; font-family: "Arial", verdans, sans-serif, helvetica; font-size: 10pt; color: 008080; overflow: auto;
}

I am on Mac OS 9.2. The scrolling works in Netscape but not in Internet Explorer 5.1
Cheers

bazz

09-01-2003, 12:44 PM

Hi,

Firstly, I know nought about Mac (except that it is generally held to be better than windoze) :)

BUT.

1. Where is your DOCTYPE? I checked your source code and I dont see it, which may be why it isnt displaying correctly.

2. You have the body styles in the html. I think you would be better to place them in the CSS file too.

3. The text height and width should also go in the stylesheet.

HTH

Bazz.

MotherNatrsSon

09-01-2003, 01:41 PM

I am on a MAC and your style on the paragraph needs to be overflow: scroll; before it will work. IE 5.1.7 for MAC. It may also need to be styled on a div and not a paragraph to work.

MNS

muldoon_smooth

09-01-2003, 03:03 PM

I'm totally lost now, I think I'll stick to Flash - it's so much easier to get your head round.

Thanks a lot for your time
Cheers

MotherNatrsSon

09-01-2003, 03:18 PM

It's pretty simple.

.scrollingtext {position: absolute; top: 200px; left: 200px; height: 100px; width: 300px; font-family: "Arial", verdans, sans-serif, helvetica; font-size: 10pt; color: 008080; overflow: scroll;

Or you may have to put the paragraph in a div that has the scroll style;

#my div {position: absolute; top: 200px; left: 200px; height: 100px; width: 300px; font-family: "Arial", verdans, sans-serif, helvetica; font-size: 10pt; color: 008080; overflow: scroll}

<div id="mydiv">
<p> yada, yada, yada</p>
</div>

MNS

bazz

09-01-2003, 03:18 PM

Don't be disheartened.

The doctype is what you'll see at the top of the script for this forums page. It tells the browser how to read the page and it is this, which determines how it appears.

The appearance controls such as sizes and width and scroll ing should all go into the css. That will leave all your html in one place and may assist better when updating your pages to a newer script version.

Check out vallidator.w3.org and on the right of the page that you use to validate your code, click for the css validator. It should fill in any holes in your css knowledge but if not, keep posting.

You aren't that far from success anyway and since you've come this far it'd be a shame to change direction?

regards

Bazz.