How do I… Create a scrolling content box in CSS?
However, there is an alternative CSS markup that will let you confine large blocks of content to a set width and height and let you scroll through them using a scrollbar control. This gives the effect of viewing content in a frame (remember those?), but the scrolling box stays put on one page and you can place it anywhere in your layout that you wish. This gives both you and your clients much more control over how you view your Web pages. All of my clients like this layout solution, and I bet yours will as well.
This blog post is also available in PDF format as a TechRepublic download, which includes a sample Web page and the example code.
Start
Open your preferred HTML editor and create a new page. Enter the code in Listing A to get started.
Listing A
<html>
<head>
<title>Scrolling Content Box</title>
<body>
</body>
</html>
Let's go ahead and place some formatted text in the Body of the HTML document, so we can see the effects of our CSS code as we build it (Listing B). Place a significant amount of text into the page. This will give us plenty of text to scroll through when the page is complete.
Listing B
<html>
<head>
<title> Scrolling Content Box </title>
</head>
<body>
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</body>
</html>
Our text is in place, but let's go ahead and assign the CSS class to it. Even though the CSS markup has not been coded yet, by assigning the style to the text, you can preview the HTML you are writing at any time to see how the styling is built step by step.
We'll name our style class "scrollBox" in a couple of steps, so assign a <div> tag with that attribute as shown in Listing C.
Listing C
<html>
<head>
<title> Scrolling Content Box </title>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
</html>
Now that our content is in place, it's time to create your CSS code in the head of the document Declare the style and place it immediately after the closing </TITLE> tag. (Listing D)
Listing D
<html>
<head>
<title> Scrolling Content Box </title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
</html>
The next step is to declare a class name for the scrolling box style. Let's keep things simple and name it "scrollBox" by typing in the new code in Listing E.
Listing E
<html>
<head>
<title> Scrolling Content Box </title>
<style type="text/css">
<!-
.scrollBox {
}
-->
</style>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
</html>
Now we have to assign some attributes to the scrollBox class. Let's start by defining how the text itself should look. Helvetica is back in style, and 10 pixels high with a line height of 12 pixels should look fine.
Listing F
<html>
<head>
<title> Scrolling Content Box </title>
<style type="text/css">
<!-
.scrollBox {
font-family: Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
</html>
The font is typeset to satisfaction. The next step is to determine how wide and tall the containing box will be. Type in the code in Listing G to give the box a width of 200 pixels and a height of 150 pixels.
Listing G
<html>
<head>
<title> Scrolling Content Box </title>
<style type="text/css">
<!-
.scrollBox {
font-family: Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
height: 150px;
width: 200px;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
</html>
If we were to just leave the styling alone here, the type would butt up against the scrollbar when it is viewed in the Web browser. Enter the additional code in Listing H to give the type some padding along all edges of the containing box.
Listing H
<html>
<head>
<title> Scrolling Content Box </title>
<style type="text/css">
<!-
.scrollBox {
font-family: Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
height: 150px;
width: 200px;
padding: 5px;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
</html>
One last bit of graphic design before we move on to the scroll functionality. Give the box a light blue background using the additional markup shown in Listing I.
Listing I
<html>
<head>
<title> Scrolling Content Box </title>
<style type="text/css">
<!-
.scrollBox {
font-family: Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
height: 150px;
width: 200px;
padding: 5px;
background-color: #CCCCFF;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
</html>
Now, if you previewed your code thus far in a Web browser, you would see that the enormous block of text would be in a blue box, but it would be cut off after several lines. This is due to the height attribute. Therefore, we need a line of markup (shown in Listing J) that tells the browser to allow us to see the text beyond that height limit. This is done with the overflow rule and we'll set its attribute to auto, which will tell the browser to show the scrollbar controls as needed.
Listing J
<html>
<head>
<title> Scrolling Content Box </title>
<style type="text/css">
<!-
.scrollBox {
font-family: Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
height: 150px;
width: 200px;
padding: 5px;
background-color: #CCCCFF;
overflow: auto;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
"It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with paneled walls and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats--the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill--The Hill, as all the people for many miles round called it--and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the lefthand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river."
</div>
</body>
- Date: April 10th, 2008
- Author: John Lee
</html>
Preview the page in several browsers across operating systems to see how they display the design markup and scrollbar controls.
Since scrollBox is a CSS class, it can be styled even further and it can be applied to any HTML element, not just blocks of text. Try applying it to <img> tags, for example, to create scroll box containers for high-resolution images.
Comments