Css Scrollable Content

574 views

Published on

Register domain names and web domains - Hostgee.com offers domain name registration and is a top web hosting provider. Our professional website design and hosting services ensure quality solutions for your business.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
574
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css Scrollable Content

  1. 1. Create scrollable content using CSS If you want to fit a large amount of copy into a small amount of space (e.g. showing snippets from your blog posts or testimonials on your home page ) or you don’t want your site visitors to be scrolling down and down and down… (e.g. you have lengthy terms and conditions) you can display all this content within a scrollable box using the ‘overflow’ property. The example below uses an internal CSS style sheet but the same rules apply if you are using an external style sheet. The first step is to create the Div with the overflow property along with the styling values we want the Div to follow. The HTML below will create an area 300px wide and 300px high, with a solid gray border and a white back ground. <style type=”text/css”> #scrolling { overflow: auto; height: 300px; width: 300px; border: 1px solid #C0C0C0; background-color: #FFFFFF; padding: 15px; font-family: verdana, arial; } Once you have added this to your site you can now place the Div anywhere you want with whatever formatting you like within the Div… <div id=”scrolling”> <h1>Title goes here</h1> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Pellentesque tristique nulla eget mi facilisis rutrum. In sem arcu, tempor ac, fringilla et, rhoncus sed, nisi. <em>Vestibulum ante ipsum</em> primis in faucibus orci luctus et </p> </div> You will now have a text area your site’s visitors can scroll up and down to read which should look something like this…

×