Wednesday, June 15, 2011

Create HTML Scroller in div using CSS, CSS Tutorial to create HTML Scroller, CSS Scrollbar content

Last month I was working on my companies client website. he ask to me make scrollable area to show there text. because website content has too much text which increase the height of webpage too much.

So I did some quick research into creating my own Scroll area without using script as i have posted before for JavaScript Scroll bar content.

After Searching I found CSS attribute "Overflow" and i found that this attribute can help me to create my own scrollable content.

So here I am sharing the source code for CSS Scrollbar content.

CSS CODE With Div

<div style="width: 98%; padding: 1%; border: 2px solid rgb(170, 0, 0); height: 400px; overflow: auto;">
        <p>
            This Subscriber Agreement and Terms of Use govern your use of RIP (Revitalize Inspire
            Perform) online magazine, distributed by The Aquiline Group, and unless other terms
            and conditions expressly govern, any other electronic services from RIP magazine
            and the Aquiline Group that may be made available from time to time (each, a "Service").</p>
        <p>
            If you agree to be bound by the terms of this Agreement, you should click on the
            "I AGREE" button at the end of this Agreement. If you do not agree to be bound by
            the terms of this Agreement, you should click "I DISAGREE." If you click "I DISAGREE,"
            you will not be able to proceed with the registration process for the respective
            Service and become a subscriber. To the extent you have access to, or are using,
            a Service without having completed our registration process or clicked on an "I
            AGREE" button, you are hereby notified that your continued use of a Service is subject
            to many of the terms and conditions of this Agreement as explained in Section 5
            below.</p>
       

        <p>
            <strong class="con_head">5. Limitations on Use. </strong>
        <br>
            a.Only one individual may access a Service at the same time using the same user
            name or password, unless we agree otherwise.</p>
        <p>
            b.The text, graphics, images, video, metadata, design, organization, compilation,
            look and feel, advertising and all other protectable intellectual property (the
            "Content") available through the Services are our property or the property of our
            advertisers and licensors and are protected by copyright and other intellectual
            property laws. Unless you have our written consent, you may not sell, publish, distribute,
            retransmit or otherwise provide access to the Content received through the Services
            to anyone, including, if applicable, your fellow students or employees, with the
            following exceptions:</p>
        <p>
            (i) You may occasionally distribute a copy of an article, or a portion of an article,
            from a Service in non-electronic form to a few individuals without charge, provided
            you include all copyright and other proprietary rights notices in the same form
            in which the notices appear in the Service, original source attribution, and the
            phrase "Used with permission from RIP magazine" or "Used with permission from the
            Aquiline Group" as appropriate. Please consult the RIP magazine web site if you
            need to distribute an article from a Service to a larger number of individuals,
            on a regular basis or in any other manner not expressly permitted by this Agreement.</p>
        <p>
            (ii)While you may download, store and create an archive of articles from the Service
            for your personal use, you may not otherwise provide access to such an archive to
            more than a few individuals on an occasional basis. The foregoing does not apply
            to any sharing functionality we provide through the Service that expressly allows
            you to share articles or links to articles with others. In addition, you may not
            use such an archive to develop or operate an automated trading system or for data
            or text mining.</p>
        <p>
            c.You agree not to rearrange or modify the Content. You agree not to create abstracts
            from, scrape or display our content for use on another web site or service (other
            than headlines from our RSS Feed with active links back to the full article on the
            Service). You agree not to post any content from the Services (other than headlines
            from our RSS Feed with active links back to the full article on the Service) to
            weblogs, newsgroups, mail lists or electronic bulletin boards, without our written
            consent.</p>
        <p>
            d.You agree not to use the Services for any unlawful purpose. We reserve the right
            to terminate or restrict your access to a Service if, in our opinion, your use of
            the Service may violate any laws, regulations or rulings, infringe upon another
            person's rights or violate the terms of this Agreement. Also, we may refuse to grant
            you a user name that impersonates someone else, is protected by trademark or other
            proprietary right law, or is vulgar or otherwise offensive.</p>
       

        <p>
            iii. Grant of Rights and Representations by You. If you upload, post or submit any
            User Content on a Service, you represent to us that you have all the necessary legal
            rights to upload, post or submit such User Content and it will not violate any law
            or the rights of any person. You agree that upon uploading, posting or submitting
            information on the Services, you grant the Aquiline Group, and our respective affiliates
            and successors a non-exclusive, transferable, worldwide, fully paid-up, royalty-free,
            perpetual, irrevocable right and license to use, distribute, publicly perform, display,
            reproduce, and create derivative works from your User Content in any and all media,
            in any manner, in whole or part, without any duty to compensate you. You also grant
            us the right to authorize the use of User Content, or any portion thereof, by users
            and other users in accordance with the terms and conditions of this Agreement, including
            the rights to feature your User Content specifically on the Services and to allow
            other users or users to request access to your User Content, such as for example
            through an RSS Feed.</p>
        <p>
            iv. We may also remove any User Content for any reason and without notice to you.
            This includes all materials related to your use of the Services or membership, including
            email accounts, postings, profiles or other personalized information you have created
            while on the Services.</p>
        <p>
            v. Copyright/IP Policy. It is our policy to respond to notices of alleged infringement
            that comply with the Digital Millennium Copyright Act. For more information about
            our policy, please see our Privacy Policy.</p>
        <p>
            <strong class="con_head">7. Third Party Web Sites, Services and Software. </strong><br>
            We may link to, or promote web sites or services from other companies or offer you
            the ability to download software from other companies. You agree that we are not
            responsible for, and do not control, those web sites, services and software.</p>
        <p>
            <strong class="con_head">8. DISCLAIMERS OF WARRANTIES AND LIMITATIONS ON LIABILITY.
            </strong><br>YOU AGREE THAT YOUR ACCESS TO, AND USE OF, THE SERVICES AND THE CONTENT
            AVAILABLE THROUGH THE SERVICES IS ON AN "AS-IS", "AS AVAILABLE" BASIS AND WE SPECIFICALLY
            DISCLAIM ANY REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, WITHOUT
            LIMITATION, ANY REPRESENTATIONS OR WARRANTIES OF MERCHANTABILITY OR FITNESS FOR
            A PARTICULAR PURPOSE. We do not give tax or investment advice or advocate the purchase
            or sale of any security or investment. You should always seek the assistance of
            a professional for tax and investment advice. THE AQUILINE GROUP AND ITS SUBSIDIARIES,
            AFFILIATES, SHAREHOLDERS, DIRECTORS, OFFICERS, EMPLOYEES AND LICENSORS WILL NOT
            BE LIABLE (JOINTLY OR SEVERALLY) TO YOU OR ANY OTHER PERSON AS A RESULT OF YOUR
            ACCESS OR USE OF THE SERVICES FOR INDIRECT, CONSEQUENTIAL, SPECIAL, INCIDENTAL,
            PUNITIVE, OR EXEMPLARY DAMAGES, INCLUDING, WITHOUT LIMITATION, LOST PROFITS, LOST
            SAVINGS AND LOST REVENUES (COLLECTIVELY, THE "EXCLUDED DAMAGES"), WHETHER OR NOT
            CHARACTERIZED IN NEGLIGENCE, TORT, CONTRACT, OR OTHER THEORY OF LIABILITY, EVEN
            IF ANY OF THE AQUILINE GROUP PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF OR
            COULD HAVE FORESEEN ANY OF THE EXCLUDED DAMAGES, AND IRRESPECTIVE OF ANY FAILURE
            OF AN ESSENTIAL PURPOSE OF A LIMITED REMEDY. IF ANY APPLICABLE AUTHORITY HOLDS ANY
            PORTION OF THIS SECTION TO BE UNENFORCEABLE, THEN THE AQUILINE GROUP PARTIES' LIABILITY
            WILL BE LIMITED TO THE FULLEST POSSIBLE EXTENT PERMITTED BY APPLICABLE LAW.</p>
        <p>
            <strong class="con_head">9. General.</strong><br>This Agreement contains the final
            and entire agreement between us regarding your use of the Services and supersedes
            all previous and contemporaneous oral or written agreements regarding your use of
            the Services. We may discontinue or change the Services, or their availability to
            you, at any time. This Agreement is personal to you, which means that you may not
            assign your rights or obligations under this Agreement to anyone. No third party
            is a beneficiary of this Agreement. You agree that this Agreement, as well as any
            and all claims arising from this Agreement will be governed by and construed in
            accordance with the laws of the District of Columbia, United States of America applicable
            to contracts made entirely within the District of Columbia and wholly performed
            in Washington, D.C., without regard to any conflict or choice of law principles.
            The sole jurisdiction and venue for any litigation arising out of this Agreement
            will be an appropriate federal or state court located in Washington, D.C. This Agreement
            will not be governed by the United Nations Convention on Contracts for the International
            Sale of Goods.</p>
    </div>


Just copy and paste above text into body tag of your HTML.

and you will find content like this.


Online link

No comments: