07.29
This post follows on from the Dynamic Banner post.
In this example we’re going to float an image on the top left, absolute position of 1, 1.
Adding the floating image to the banner
<div id="my_banner" style="top:0px; left:0px; position: absolute; z-index=11; visibility=show; right=0px;">
<table cellspacing="0" style="text-align: left; vertical-align: middle; background-color: rgb(24, 24, 24); height: 70px; width:expression((width1 = window.innerWidth?document.body.clientWidth:document.documentElement.clientWidth) + 'px'); padding: 0px; white-space: nowrap;" class="SectionTable"><tr><td> </td></tr></table>
</div>
<div id="my_banner_title"><font color="#FFFFFF"; style="top:20px; position:absolute; font-size:26px; text-align:center; margin-left:auto; margin-right:auto; left:0px; right:0px; width:expression((width1 = window.innerWidth?document.body.clientWidth:document.documentElement.clientWidth) + 'px');">Main Menu</font>
</div>
<div id="my_logo" style="top:1px; left:1px; position: absolute; z-index=14; visibility=show;">
<img src="http://www.wilson-is.com/blog/wp-content/uploads/2011/07/logo.png" height=68 border=0></div>
Considerations
1. the Image needs to be sitting on a production-ised web server. The logo will be retrieved on page load so if you have 50 concurrent users the webserver hosting the image needs to be up and running, no down time. (I would recommend packaging the image into a WAR file and including it on your OBIEE production web server);
2. Make the image as compact/compressed as possible for performance reasons;
I’ll look at adding a floating toolbar to this dynamic banner in my next post.
No Comment.
Add Your Comment