how to add overflow:scroll-x to define pages?

Hi.

I'm wondering what the proper way would be to add vertical scrolling for define pages. I've figured out the "how" which is fairly simple but I'm unclear what the proper css will be.

If I look at the source I'm seeing what looks like ZC calling the css dynamically ie "ConditionsMainContent" "PrivacyMainContent". I've got a few idea's on implementing it but I'd like the proper way ;)

When you type up your home page content in define_main_page.php, toggle out of WYSIWYG mode in the little html editor to SOURCE mode (so you can see the underlying html) and then manually insert a <div> tag set around the content you want scrolled.

EG:

<div id="myScrollingContent">
Some text here, some more text, and even more text, and even more text
and even more text, and even more text, and even more text
and even more text, and even more text, and even more text
and even more text, and even more text, and even more text.
</div>

Then... at the BOTTOM of your template's stylesheet.css file, add the following...

#myScrollingContent {height: 300px;overflow-y: scroll; padding: 0 2px; line-height:160%;}

... of course you will select the height parameters and padding parameters. Remember... the scroll will only appear if the text block overflows the height setting.

Thanks Schoolboy! I'll give that a try.

It worked!

What I ended up doing is adding the css entries for each page since there were only 4 (and another planned 2 or 3). So I had to add it to _tm.css instead.

Keeps everything tight on lengthy terms and conditions...etc.

Thanks!

The <div id="myScrollingContent"> worked fine thank you.
I would like to know how to get a bulleted list within the scrolling area?
I have tried <ul><li> etc but the bullets and indenting does not show up in the browsers. They work fine where there is no scroll bar added.
I am missing something??

robbie269:

The <div id="myScrollingContent"> worked fine thank you.
I would like to know how to get a bulleted list within the scrolling area?
I have tried <ul><li> etc but the bullets and indenting does not show up in the browsers. They work fine where there is no scroll bar added.
I am missing something??

Thre is no reason why formatted HTML should not render in the scrolling area. Check your HTML syntax, and look for other declarations in stylesheets that may be governing the appearance of bulleted lists.

Using:

#myScrollingContent ul {DECLARATIONS HERE}
#myScrollingContent li {DECLARATIONS HERE}
or
#myScrollingContent ul li {DECLARATIONS HERE}

May assist you as these specifiy an application of a listing style to the div in question.

Thanks Schoolboy

That got me on the right track.

I added #myScrollingContent ul li {margin-left:1em;padding-left:1em;} to my stylesheet and the bullets reappeared.

The finished page is here.

robbie269:

Thanks Schoolboy

That got me on the right track.

I added #myScrollingContent ul li {margin-left:1em;padding-left:1em;} to my stylesheet and the bullets reappeared.

The finished page is here.

For testimonials, there is a really neat module by the late Clyde Jones.

We use it on several sites. This one is in development, but take a look anyway. Testimonials are shown in a sidebox, with links. Admin is done in the admin panel.

http://officefrog.co.uk