VampireFreaks
[ Vampirefreaks.com ]



VFLayouts.com - Vampirefreakss Official Layout Site

Vampirefreaks Page Classes - Maintop Image (VF Banner)



.Maintop Img (The VF Banner)



.maintop img


*The banner is an image link, so if you don't set separate styles for it, it will be affected by image link styles.


o Make It Disappear

<style type="text/css">
.maintop img { display: none; }
</style>




o Borders

To put a border around the banner (this code makes the border change on mouseover too):

<style type="text/css">
.maintop a:link img, .maintop a:visited img { border: 1px solid red; }
.maintop a:hover img { border: 2px dashed green; }
</style>

[ More Border Styles ]



o Background

To set a background color for the banner (color changes on mouseover):

<style type="text/css">
.maintop a:link img, .maintop a:visited img { background: deeppink; }
.maintop a:hover img { background: orange; }
</style>


(Nb, if you just want to get rid of the annoying little purple bit on hover, just set the hover background color to match your page), ie:

<style type="text/css">
.maintop a:hover img { background: black; }
</style>

More on [ Backgrounds ]



o Image Filters

To apply a filter to the banner:

<style type="text/css">
.maintop a:link img, .maintop a:visited img { filter: fliph; }
.maintop a:hover img { filter: flipv; }
</style>


Nb, filters only work in the IE browser, except for [ Opacity ] which is cross browser. [ More IE Filters ]



o Positioning

To move the banner to the left or right, just float it like this:

<style type="text/css">
.maintop img { float: left; }
</style>


If you want to create a space above or below it, or just move it a teeny bit left, or right, you can use margins, for instance, this code would move it just slightly to the right:

<style type="text/css">
.maintop img { margin-left: 100px; }
</style>


And this one would create a space around it, top and bottom:

<style type="text/css">
.maintop img {
margin-top: 20px;
margin-bottom: 10px;
}
</style>






Design by [ KineticShock.com ] && [ PrintedExistence[dot]com ]
All content copyright © PrintedExistence 2006 - 2008


Contact VFLayouts
[ Contact VFLayouts! ]