If you want something a bit fancier, for example a content box with rounded edges you will need to use an image as the background. For this example we're going to use a simple rounded rectangular shape, like the one below.
Firstly, download the image or make your own.
Then, create a CSS document and enter the skeleton code for our example.
#contentBox {
{
#contentBox p {
}
We're going to specify how the content box and the text inside it should look .
To set the image above as the background, add the following code to #contentBox:
background-image:
url('box.png');
background-repeat: no-repeat;
background-attachment: fixed;
We want the box to stay as it is, hence the no-repeat attribute. Also, to prevent it from scrolling with the text, we're setting its position to fixed.
Next enter the following code to position the <div>:
position:absolute;
left:4px;
top:2px;
Make the height and width of the <div> the same as that of the background image:
height:271px;
width:340px;
To make the box scrollable add:
overflow: scroll;
Now that we have the box set, let's define how the text inside it should appear.
To define the font, enter the following code to #contentBox p:
font-family: sans-serif;
font-size: 80%;
color:dark grey;
To make the text stay within the box and not flow outside, we need to add some margins:
margin-top:7%;
margin-left:5%;
margin-right:7%;
Putting the CSS code together:
#contentBox
{
background-image:
url('box.png');
background-repeat: no-repeat;
background-attachment: fixed;
position:absolute;
left:4px;
top:2px;
height:271px;
width:340px;
overflow: scroll;
}
#contentBox p
{
font-family: sans-serif;
font-size: 80%;
color:dark grey;
margin-top:7%;
margin-left:5%;
margin-right:7%;
}
The HTML code will look like this
<html>
<head>
<title>Content Box 2</title>
<link rel="stylesheet" type="text/css"
href="content_box2.css" />
</head>
<body>
<div id='contentBox'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat neque sit amet ante tincidunt hendrerit. Vestibulum eleifend erat et enim. Cras nisi arcu, malesuada malesuada, accumsan non, venenatis eget, purus. Mauris pulvinar tincidunt turpis. Aliquam enim. Vestibulum tristique risus eget elit. Fusce urna arcu, dictum sit amet, luctus non, bibendum eu, leo. Vestibulum at diam. Nunc pretium. Maecenas dapibus laoreet leo. Mauris pretium quam. Nulla ultrices. Donec iaculis laoreet diam. Suspendisse a felis quis mauris porttitor mattis. Duis aliquet lacinia odio. </p>
<p>Nullam cursus erat id magna. Sed eget lectus. Phasellus dignissim. In purus. Duis scelerisque. Sed suscipit risus nec velit. Sed et neque. Maecenas eget nunc. Ut turpis tortor, varius ut, dapibus quis, lobortis et, erat. Aliquam vitae odio vitae tellus ultricies adipiscing. In ut diam. </p>
</div>
</body>
</html>
Do you need help with CSS? 
1
sweetangel - 11/06/08
css lessons - css scrollbar examples code
-- http://css-lessons.ucoz.com/scroll-css-examples.htm --
» Report offensive content