hover to navigate
to index
InvisionFree - Free Forum Hosting
Free Forums with no limits on posts or members.


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Quick Log In

 

 CSS & HTML
Track this topic | Email this topic | Print this topic
admin
Posted: Feb 28 2011, 06:27 PM


Administrator


Group: Admin
Posts: 2
Member No.: 1
Joined: 20-February 11
This is really more straightforward than usual. To change the banner, replace background-image:url(http://i51.tinypic.com/5f3lgn.png) with background-image:url(IMAGEURLOFYOURBANNER).

Javascript
CODE
<!--[if IE]>
       <style type="text/css">
.leftborder, .topborder, .rightborder, .bottomborder { display:none; }
       </style>
<![endif]-->

<script type="text/javascript">
function toggle() {
  var hoverghost = document.getElementById('navigation');
      hoverghost.style.display = 'block';
}

function toggleoff() {
  var hoverghost = document.getElementById('navigation');
      hoverghost.style.display = 'none';
}</script>


Header/body
CODE
<body>
<div class="leftborder"></div>
<div class="topborder"></div>
<div class="rightborder"></div>

<table align="center" class="mainforum">
<tr><td width="170px" valign="top"><div class="hoverghost" onmouseover="toggle()" onmouseout=" toggleoff()">hover to navigate<br>
<a href="http://z15.invisionfree.com/novia22/">to index</a>
<br>
<div id="navigation"><table><tr><td valign="middle" width="170px"><div class="linkbar"><br>

<a href="http://z15.invisionfree.com/novia22/index.php?act=site">Portal</a><br>
<a href="http://z15.invisionfree.com/novia22/index.php?act=calendar">Calendar</a><br>
<a href="http://z15.invisionfree.com/novia22/index.php?act=Members">Members</a><br>
<a href="http://z15.invisionfree.com/novia22/index.php?act=Help">Help</a><br>
<a href="http://z15.invisionfree.com/novia22/index.php?act=Search">Search</a><br><br>

<a href="http://z15.invisionfree.com/novia22/index.php?act=idx">Plot</a><br>
<a href="http://z15.invisionfree.com/novia22/index.php?act=idx">Rules</a><br>
<a href="http://z15.invisionfree.com/novia22/index.php?act=idx">Register</a><br>
<a href="http://z15.invisionfree.com/novia22/index.php?act=idx">Link...</a><br></td></tr></table></div>

</div></td>

<td width="800px" valign="top"><div class="forumtable">
<% BOARD HEADER %>
<% NAVIGATION %>
<table class="maintablehead" border="0" cellspacing="1" cellpadding="4">

<tr>

<td class="row4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br><br><br>

<form style='display:inline' action="http://z15.invisionfree.com/novia22/index.php?act=Login&CODE=01&CookieDate=1" method="post">
<div align='center'><strong>Quick Log In</strong>
<input type="text" class="forminput" size="10" name="UserName" onfocus="this.value=''" value="User Name" />
<input type='password' class='forminput' size='10' name='PassWord' onfocus="this.value=''" value='ibfrules' />
<input type='submit' class='forminput' value='Go' />
</div></form><br></td>

<td class="row4" width="350px"><!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="350" height="104" src="http://www2.cbox.ws/box/?boxid=2292420&amp;boxtag=rz1k0g&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="350" height="71" src="http://www2.cbox.ws/box/?boxid=2292420&amp;boxtag=rz1k0g&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX --></td>

<tr><td colspan="2" class="darkrow2"></td></tr></table>
<% BOARD %>
<% STATS %>
<div class="bordercheat">


Footer
CODE
<div class="credit">requiem skinned by novia of <a href="forums.redcarpetrebellion.org">rcr</a> and <a href="http://z10.invisionfree.com/Shadowplay">shadowplay</a>.</div></div></div></td></tr></table>
<div class="bottomborder"></div>


CSS
CODE
html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img  { vertical-align:middle; border:0px }
BODY { font-family: trebuchet ms, arial, sans-serif; font-size: 10px; color: #565656; margin:0px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/greywoodtile.png); background-attachment: fixed; }
TABLE, TR, TD { font-family: trebuchet ms, arial, sans-serif; font-size: 10px; color: #565656; }
a:link, a:visited, a:active { text-decoration: none; color: #acacac; }
a:hover { text-shadow: 0px 0px 3px #979797; color: #727272; text-decoration: none; }

fieldset.search { border: 0px!important; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); text-transform: uppercase; border-radius: 20px; -moz-border-radius: 20px; line-height:150% }
label { cursor:pointer; }

img.attach { border:2px outset #EEF2F7;padding:2px }

.googleroot  { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help    { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#555 }
.caldate   { font-size:11px; color:#565656; background-image: url(http://img.photobucket.com/albums/v638/marvolo/ghostdr2.png); height: 25px; background-repeat: no-repeat; background-position: -50px -18px; padding: 4px; margin: 1px }

.warngood { color:green }
.warnbad  { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; font-style: italic; }
#calendarname { font-size:22px; font-weight:bold; text-align: center; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg   { text-align:center; margin-top:15px }

#ucpmenu    { line-height:150%;width:22%; }
#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); }
#ucpcontent { line-height:150%; width:auto }
#ucpcontent form { margin-top: 4px; }
#ucpcontent p  { padding:10px;margin:0px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); }

#ipbwrapper { margin: 50px auto; width: 750px; padding: 40px; border-radius: 100px; -moz-border-radius: 100px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png);}
#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { height: 300px; width: 750px; background-image:url(http://i51.tinypic.com/5f3lgn.png); border-radius: 100px 100px 0px 0px; -moz-border-radius: 100px 100px 0px 0px; text-align: center; vertical-align: middle; }
#submenu   { display: none; }
table#userlinks { position: absolute; top: 15px; left: 50%;margin-left: -220px; width: 625px; z-index: 800; text-transform: uppercase;}
table#userlinks td { font-size: 7px!important; letter-spacing: 2px!important; }

#navstrip  { padding: 12px;font-family:lucida sans unicode, lucida grande;text-align:center;letter-spacing:5px;font-size:9px;text-transform:uppercase;position:relative;top: -17px;background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); }
#navstrip a:link, #navstrip a:visited, #navstrip a:active { text-decoration: none; color: #468408; }
#navstrip a:hover { text-shadow: 0px 0px 3px #979797; color: #727272; }

.activeuserstrip, .pformstrip, .postlinksbar, .titlemedium { padding: 2px 4px; font-size: 7px; font-weight: normal; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); letter-spacing: 2px; color: #565656; text-transform: uppercase; text-align: center; margin: 1px; }
.pformleft  { padding:6px; margin:1px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); width:25%; }
.pformleftw { padding:6px; margin:1px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); width:40%; }
.pformright { padding:6px; margin-top:1px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); }

.post1, .post2, .row1, .row3, .row4, .row2, .darkrow3, .dlight { background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); }

div.bordercheat div.row4 { border-color: transparent!important; border-radius:20px 20px 0px 0px;-moz-border-radius: 20px 20px 0px 0px; }
.row4 { padding: 4px 4px 4px 10px; line-height: 10px; }

.hlight { background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png); }

.darkrow1, .darkrow2 { background-image: url(http://img.photobucket.com/albums/v638/marvolo/ghostdr2.png); height: 43px; background-repeat: no-repeat; }

.maintitle { padding: 15px; font-family: lucida sans unicode, lucida grande, arial, sans-serif; text-align: center; letter-spacing: 5px; font-size: 9px; color: #468408; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); text-transform: uppercase; border-radius: 20px 20px 0px 0px; -moz-border-radius: 20px 20px 0px 0px; }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #468408; }
.maintitle a:hover { text-shadow: 0px 0px 3px #979797; color: #727272; }

.plainborder { }
.tableborder { padding:0px; margin:0px; width:100% }
.tablefill { padding:6px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png); }
.tablepad { padding:6px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); }
.tablebasic { width: 100%; padding: 0px; margin: 0px; border: 0px }

.wrapmini { float:left;line-height:1.5em;width:25% }
.pagelinks { float:left;line-height:1.2em;width:35% }

.desc { font-size: 10px; }
.edit { font-size: 9px }

.signature   { font-size: 9px; color: #565656; }
.postdetails { font-size: 9px }
span.postdetails { display: block; text-align: center; line-height: 95%; }
.postcolor   { font-size: 12px; line-height: 130%; font-family: lucida sans unicode, lucida grande, arial, sans-serif; }

.normalname { font-size: 12px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #900 }

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { text-align: justify!important; font-family: lucida sans unicode, lucida grande, trebuchet ms, sans-serif; font-size: 11px; color: #565656; padding: 3px; border: 1px solid #222222; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png);}
#CODE  { text-align: left!important; font-family: tahoma; font-size: 9px; color: #565656; padding: 3px; border: 1px solid #222222; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png);}

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

.codebuttons  { font-size: 8px; text-transform: uppercase; font-family: lucida sans unicode, lucida grande, arial; padding: 1px 4px; margin: 2px; border: 0px!important; background-color: #131313; color: #727272; text-shadow: 0px 0px 1px #101010; letter-spacing: 2px; }
.codebuttons:hover { color: #727272; text-shadow: 0px 0px 3px #979797; }

input.row1 { font-size: 8px!important; text-transform: uppercase; font-family: lucida sans unicode!important; padding: 1px 4px; margin: 2px; border: 0px!important; background-color: #131313!important; color: #494f43!important; background-image: none!important; letter-spacing: 2px; }

.forminput { background-color: #131313; border: 0px!important;  }
input.forminput, .forminput { font-size: 9px; font-family: lucida sans unicode, lucida grande, arial; letter-spacing: 3px; padding: 4px 8px; color: #727272; }
input.forminput { background-color: #131313;border: 0px!important; }
.textinput { font-family: lucida sans unicode, lucida grande, arial; color: #727272; border: 0px!important; padding: 6px; font-size: 11px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png); background-color: transparent!important; }
.radiobutton, .checkbox  { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.thin { padding: 4px; line-height:140%; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png); margin:2px; }

.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue   { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }

.topborder { background-repeat: repeat-x; background-image: url(http://img.photobucket.com/albums/v638/marvolo/topshadow.png); position: absolute; top: 0px; left: 0px; height: 125px; z-index: 300; width: 100%; }
.leftborder { background-image: url(http://img.photobucket.com/albums/v638/marvolo/leftshadow.png); width: 200px; left: 0px; height: 100%; position: fixed; top: 0px; left: 0px; background-repeat: repeat-y; }
.rightborder { background-repeat: repeat-y; background-image: url(http://img.photobucket.com/albums/v638/marvolo/rightborder.png); width: 221px; position: fixed; top: 0px; left: 100%; margin-left: -221px; z-index: 0; height: 100%; }
.bottomborder { background-repeat: repeat-x; background-image: url(http://img.photobucket.com/albums/v638/marvolo/bottomborder.png); height: 150px; z-index: 300; width: 100%; background-position: 0px -30px; }

.mainforum { width: 1020px; margin: 0px auto; position: relative; top: 75px; border-collapse: collapse; z-index: 800 }
.forumtable { width: 750px; padding: 45px 45px 55px 45px; border-radius: 100px; -moz-border-radius: 100px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png); }

.maintitlehead { vertical-align:middle; padding: 18px; font-family: lucida sans unicode, lucida grande, arial, sans-serif; text-align: center; letter-spacing: 9px; font-size: 11px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/40black.png); text-transform: lowercase; color: #468408; }
.maintablehead { width: 100%; position: relative; top: -32px; }

.hoverghost { width: 180px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/ghosthover.png); position: relative; top: 100px; font-family: lucida sans unicode, lucida grande, arial, sans-serif; font-size: 8px; color: #808080; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding: 18px 0px; background-repeat: no-repeat; z-index: 600; }
.hoverghost a { font-size: 7px; letter-spacing: 3px; }

#navigation { display: none; width: 130px; border-radius: 0px 0px 30px 30px; -moz-border-radius: 0px 0px 30px 30px; z-index: 1; position: relative; top: 18px; left: 33px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/16/60mediumdark.png); padding-bottom: 10px; text-align: center; }
.linkbar { text-align: center; }

.credit { padding: 10px; font-family: lucida sans unicode, lucida grande, arial, sans-serif; text-align: center; letter-spacing: 3px; font-size: 8px; text-transform: uppercase; background-image: url(http://img.photobucket.com/albums/v638/marvolo/ghostdr2.png); height: 43px; background-repeat: no-repeat; }
.credit a { text-decoration: none; color: #468408; }
.credit a:hover { text-shadow: 0px 0px 3px #979797; color: #727272; text-decoration: none; }
Top
« Next Oldest | Test Forum 1 | Next Newest »
DealsFor.me - The best sales, coupons, and discounts for you

Topic Options



Hosted for free by InvisionFree* (Terms of Use: Updated 2/10/2010) | Powered by Invision Power Board v1.3 Final © 2003 IPS, Inc.
Page creation time: 0.1910 seconds | Archive
requiem skinned by novia of rcr and shadowplay.