Example of a Static Corner Banner

This text won't show

This is two examples of placing "banners" that are positioned in the corners of your page. position: absolute allows the banners to scroll with the page. position: fixed locks the banner into the same position relative to the browser window (won't scroll).

The code

[[module css]]
.mybanner a {
    position:absolute;
    z-index:1000; /* or some number high enough to get it on top of everything else */
    overflow: hidden;
    text-indent:-9999px;
    right:0;
    top:0;
    display:block;
    width:200px; /* width of your image */
    height: 200px; /* height of your image */
    background:url(http://community.wikidot.com/local--files/sandbox:ed-j-corner-banner/thought_cloud_whats_new.png) no-repeat;
}
.banner-br a {
    position:fixed;
    z-index:1000; /* or some number high enough to get it on top of everything else */
    overflow: hidden;
    text-indent:-9999px;
    right:0;
    bottom:0;
    display:block;
    width:150px; /* width of your image */
    height: 150px; /* height of your image */
    background:url(http://community.wikidot.com/local--files/sandbox:ed-j-corner-banner/latest-news.png) no-repeat;
}
[[/module]]
[[span class="mybanner"]][*http://www.wikidot.com This text won't show][[/span]]
[[span class="banner-br"]][*http://community.wikidot.com This text won't show][[/span]]


Addition

new-tag-indicator.png

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.