Vertical Text Display IE5+ browsers ~ Tested in IE6.0, Netscape8.1, Opera9.0, Firefox1.5.0.4 and AOL Explorer1.2

T ext has always been displayed horizontally (in the Western World at least), until now! This script harnesses the "writing-mode" attribute of CSS, supported in IE5.5+, to display any text vertically in those browsers. Great for showing items such as copyright text, special notices etc.

W e have tested the code in IE6.0, Firefox1.5.0.4, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked in IE and AOL Explorer1.2. All other platforms tested you will "Not" see the effect. It degrades well and you will not get any error messages.

Reason being is IE is the only platform that supports Cascading Style Sheet, or better known as CSS.

D epending on your knowledge of HTML and java scripts, this is an easy, two part copy and paste code with minimal reconfiguration. The first part which is the CSS (Cascading Style Sheet) goes in the <HEAD> section of the document. (See Below) You may customize the below attributes (except "writing-mode") to control more precisely where you wish the vertical text to appear on the page.

* Notice the above one font style. Proper HTML coding dictates you should have three font styles as opposed to the above one (1). See below:

L ets define the above attributes so you can get a better understanding of what each one does within the code.

font: bold 13px    The 13 denotes the size of the font to be used within the code. The bold attribute can be removed if you so choose.

font: bold 13px Arial    This denotes the font style to be used.

position: absolute;
right: 3px; ~    Tells the code how many pixels (px) to be positioned from the right side of the page

top: 20px; ~    Tells the code how many pixels (px) to be positioned from the top of the page

width: 15px; ~    Tells the code how many pixels (px) wide the text area will be. The larger the number, the wider but "shorter" the area will be.

F inally, in the <BODY> section of your page, insert the last part of the code anywhere to activate the displaying of the text. See below on where to add your text, link(s) etc into the script.

//Enter desired vertical text:
var myverticaltext='<div class="verticaltext">Add Text, Link Here</div>'

var bodycache=document.body

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.