Image based nav code

[angermanaging]

( static preview )


( live preview )

Red She-Hulk How's My Driving IC Contact Permissions Application Thread Tracking CR Chart Misc.

Elizabeth Ross How's My Driving IC Contact Permissions Application Thread Tracking CR Chart Misc.

( instructions )

Black boxes: <raw-code><center> <table height="380px" style="background: url(http://i.imgur.com/g6jqo52.jpg) no-repeat;width:550px;"><tr><td> <div style="margin: 163px 0px 0px 300px;display: inline-block;position: relative;background: rgba(0,0,0,0.8); width: 370px; height:40px; padding:5px; transform:rotate(270deg); -webkit-transform:rotate(270deg); text-align:right;"><span style="font: 30px verdana, sans-serif; color: #E03D38; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 1px #000;">Red She-Hulk</span></div> <div style="text-align: left; position: relative; margin-left:25px;background: rgba(0,0,0,0.8); width: 175px; height: 130px;padding: 10px; border-radius: 0px 10px 0px 10px;"><span style="font: 14px verdana, sans-serif; color: #E03D38; text-transform: uppercase; text-shadow: 1px 1px 1px #000;"><a href="http://" style="color: #E03D38; text-decoration:none;">How's My Driving</A> <br><a href="http://" style="color: #E03D38; text-decoration:none;">IC Contact</A> <br><a href="http://" style="color: #E03D38; text-decoration:none;">Permissions</A> <br><a href="http://" style="color: #E03D38; text-decoration:none;">Application</A> <br><a href="http://" style="color: #E03D38; text-decoration:none;">Thread Tracking</A> <br><a href="http://" style="color: #E03D38; text-decoration:none;">CR Chart</A> <br><a href="http://" style="color: #E03D38; text-decoration:none;">Misc.</A></span></div></td></tr></table></center></raw-code> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>

White boxes: <raw-code><center><table height="380px" style="background: url(http://i.imgur.com/nZoiFnp.jpg) no-repeat;width:550px;"><tr><td> <div style="margin: 163px 0px 0px 300px;display: inline-block;position: relative;background: rgba(255,255,255,0.75); width: 370px; height:40px; padding:5px;transform:rotate(270deg); -webkit-transform:rotate(270deg); text-align:right;"><span style="font: 30px Georgia; color: #2E0854; letter-spacing: 3px; text-shadow: 1px 1px 1px #f0f0f0;"><I>Elizabeth Ross</I></span></div> <div style="text-align: left; position: relative; margin-left:25px; background: rgba(255,255,255,0.75); width: 175px; height: 130px;padding: 10px; border-radius: 0px 10px 0px 10px;"><span style="font: 14px Georgia; color: #2E0854; text-shadow: 1px 1px 1px #f0f0f0;"><a href="http://" style="color: #2E0854; text-decoration:none;">How's My Driving</A> <br><a href="http://" style="color: #2E0854; text-decoration:none;">IC Contact</A> <br><a href="http://" style="color: #2E0854; text-decoration:none;">Permissions</A> <br><a href="http://" style="color: #2E0854; text-decoration:none;">Application</A> <br><a href="http://" style="color: #2E0854; text-decoration:none;">Thread Tracking</A> <br><a href="http://" style="color: #2E0854; text-decoration:none;">CR Chart</A> <br><a href="http://" style="color: #2E0854; text-decoration:none;">Misc.</A></span></div></td></tr></table></center></raw-code> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>

The image MUST BE 550 x 380 px unless you want to get your hands dirty. You're totally welcome to customize this, but it might be somewhat tricky with the spacing. If you need to re-align the boxes, the values to look at are the margin values. You can't have the menu box any larger without adjusting its height and width values, which will then alter its margin values. The URL for the image is the second line. The hex code for the black version accent color is #E03D38 and for the white version is #2E0854. You can also change the font family for more customization.

Comments

[seacups]

yes good

[clozapine]

Bookmarking, may use this in the future. ♥