How to add HTML Scroll Box
Basic HTML Scroll
Box
<div style="height:100px;width:200px;border:1px solid #ccc;font:16px/26px Georgia, Garamond,
Serif;overflow:auto;">
Text Content
</div>
Text Content
Background Color
<div
style="height:
100px
;width:
200px
;overflow:scroll;background-color:#67F152;">
Text Content
</div>
Example:
Text Content
Text Color
<div
style="height:
100px
;width:
200px
;overflow:scroll;background-color:#67F152;color:#A6120D;">
Text Content
</div>
Example:
Scrollbar Color
Example:
Hyperlink the Image
Example:
Background Pictures
Example:
Example:
Thick Border
Dotted Border
Example:
Dashed Border
Grooved Borders
Example:
Double Borders
Example:
Ridged Borders
Example:
Outset Borders
Example:
Inset Borders
Mixed Borders
Example:
Horizontal Scroll
Example:
Horizontal Scrolling Webpage
Text Content
Scrollbar Color
<div
style="height:
100px
;width:
200px
;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">
Text Content
</div>
Example:
Text Content
Scroll Box with
Images
Foreground Picture
<div style="height:200px;width:600px;overflow:scroll;">
<img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg"
border="0" width="700"
height="300" alt="Sample picture
for scroll box: Milford Sound, New Zealand" /><br />
<img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg"
border="0" width="700" height="300"
alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand"
/>
</div>
Example:
Hyperlink the Image
<div style="height:200px;width:600px;overflow:scroll;">
<a href="http://newesteducation.blogspot.in/"
target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg"
border="0" width="700" height="300"
alt="Sample picture for scroll box: Milford Sound, New Zealand"
/></a><br />
<a href="http://newesteducation.blogspot.in/"
target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg"
border="0" width="700" height="300"
alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand"
/></a>
</div>
Example:
Background Pictures
<div style="height:200px;width:600px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url(‘http://newesteducation.blogspot.in/');">
Text Content
</div>
Text Content
Scroll Box Borders
Thin Border
<div
style="height:
100px
;width:
200px
;overflow:scroll;border:1px solid
#0ADA0A;">
Text Content
</div>
Text Content
Thick Border
<div style="height:
100px
;width:
200px
;overflow:scroll;border:9px
solid
#0ADA0A;">
Text Content
</div>
Example:
Text Content
Dotted Border
<div style="height: 100px;width: 200px;overflow:scroll;border:9px
dotted
#0ADA0A;">
Text Content
</div>
Text Content
Dashed Border
<div style="height: 100px;width: 200px;overflow:scroll;border:9px dashed #0ADA0A;">
Text Content
</div>
Example:
Text Content
Grooved Borders
<div style="height: 100px;width: 200px;overflow:scroll;border:9px groove #0ADA0A;">
Text Content
</div>
Example:
Text Content
Double Borders
<div style="height: 100px;width: 200px;overflow:scroll;border:9px double #0ADA0A;">
Text Content
</div>Example:
Text Content
Ridged Borders
<div style="height: 100px;width: 200px;overflow:scroll;border:9px ridge #0ADA0A;">
Text Content
</div>Example:
Text Content
Outset Borders
<div style="height: 100px;width: 200px;overflow:scroll;border:9px outset #0ADA0A;">
Text Content
</div>Example:
Text Content
Inset Borders
<div style="height: 100px;width: 200px;overflow:scroll;border:9px inset #0ADA0A;">
Text Content
</div>
Example:
Text Content
Mixed Borders
<div style="height: 100px;width: 200px;overflow:scroll;border-top:7px dashed
#0ADA0A;border-right:7px dotted #000000;border-bottom:7px dashed
#0ADA0A;border-left:8px solid #000000;">
Text Content
</div>Example:
Text Content
Horizontal Scroll
Basic Horizontal
Scroll Box
<div style="border:1px solid black;width:150px;height:100px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
Text Content
</p>
</div>Example:
Horizontal Scrolling Webpage
<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body style="width:120%;">
<h1>Title</h1>
<p>Text Content<span style="float:right;width:40px;">Text
Content</span></p>
</body>
</html>
0 comments:
Post a Comment