Header Ads

How to frame text or scripts with scroll bar on blogpost

Using a div with scrollbars is an easy way to put a lot of information within a limited space, something you might typically want to do in a sidebar.

HTML is really much easier than it looks. Ok, let me re-state that: when publishing a blog, the groundwork is already done for us, we are left to play with the goodies: fiddling around with the text and images. And fiddling we do!
Someone asked me how to put a text within a scroll bar so he can easily copy the text or code.

Here we go:


The HTML code for the scroll bar above is:


<div style="text-align: center;">
<b><span style="background-color: white;">CODE</span></b></div>
<div style="text-align: center;">
<textarea onclick="this.focus();this.select()" readonly="readonly" style="height: 300px; width: 500px;">  

YOUR TEXT OR CODE  HERE    

</textarea></div>
<div dir="ltr" style="text-align: left;">
<div style="text-align: center;">
<span style="background-color: white; line-height: 20px;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>


OR


CODE


Edit the width and height at your choice..

Other sample :


CODE




No comments

blogmytuts. Powered by Blogger.