More nav codes?!!

[angermanaging]

( static preview )


( live preview )

Black Widow

OOC Contact

IC Inbox

Application

Permissions

CR Chart

Thread Tracking

Derek Hale

OOC Contact

IC Inbox

Application

Permissions

CR Chart

Thread Tracking

( instructions )

Red Room: <raw-code><center><div style="width:351px;text-align:right;"><span style="font: 28px verdana, sans-serif; color: #761721; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 1px #000;">Black Widow</span> <img src="http://i.imgur.com/5PkqcV7.png" style="border: 13px solid #761721;"><div style="float:right;width:200px;text-align:left;text-transform:uppercase;font-size:13px;font-family:arial;"><B> <div style="background:#761721;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #a0a0a0; text-decoration:none;">OOC Contact</A></div> <div style="background:#a0a0a0;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #404040; text-decoration:none;">IC Inbox</A></div> <div style="background:#808080;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #404040; text-decoration:none;">Application</A></div> <div style="background:#a0a0a0;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #404040; text-decoration:none;">Permissions</A></div> <div style="background:#808080;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #404040; text-decoration:none;">CR Chart</A></div> <div style="background:#a0a0a0;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #404040; text-decoration:none;">Thread Tracking</A></div> </B></div></div></center></raw-code> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>

Monochrome: <raw-code><center><div style="width:351px;text-align:right;"><span style="font: 28px verdana, sans-serif; color: #000; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 1px #a0a0a0;">Derek Hale</span> <img src="http://i.imgur.com/FoXNUWK.png" style="border: 13px solid #000;"><div style="float:right;width:200px;text-align:left;text-transform:uppercase;font-size:13px;font-family:arial;"><B> <div style="background:#000;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #fff; text-decoration:none;">OOC Contact</A></div> <div style="height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #000; text-decoration:none;">IC Inbox</A></div> <div style="background:#000;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #fff; text-decoration:none;">Application</A></div> <div style="height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #000; text-decoration:none;">Permissions</A></div> <div style="background:#000;height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #fff; text-decoration:none;">CR Chart</A></div> <div style="height:20px;display:block;padding:5px 0 2px 10px;"><a href="http://" style="color: #000; text-decoration:none;">Thread Tracking</A></div> </B></div></div></center></raw-code> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>

You can have any height image, but the width must be 125 px. You can have as many links as you want! Hex codes for the red version are: Main accent #761721. Alternating blocks #a0a0a0 and #808080. Links #404040.

Comments

[seacups]

screeeeee

[angermanaging]

I'm glad you like it! Look, no rounded corners!

[cindergraphics]

Hi! I rather like the navigation codes you've been doing, but I'd really love to see some versions which could work on profiles. Would you mind if I try using your designs as a base, and see if I can recode them to work on profile pages?

[angermanaging]

I don't mind at all-- actually, I'd love to see them. I originally tried to do this one as a profile code, but I ended up with so many nested tables that I started tearing my hair out. lol

So by all means, Godspeed!

[cindergraphics]

Oh yeah, I definitely imagine I could end up with a crazy amount of coding! But I'm stubborn too, so I will try like hell to make it work :P

Thanks, and I'll make sure to give credit to you if I do manage to pull it off!

[angermanaging]

Haha good luck!! Definitely link me if you pull it off! :)

[cindergraphics]

Will do!

[cindergraphics]

And I return, with shiny new recodes! Although unfortunately I couldn't get the version that most closely matches yours to work in firefox (it kinda gets really crazy), so I ended up making a modified version as well, that does work in firefox.

[raavashing]

Could you add a third column for more links to this? Or if I wanted to, how would I go about doing that?

[angermanaging]

This is all done with divs (this was during my "I'm allergic to HTML tables" phase) so it'd potentially be somewhat tricky. I'd suggest copying the list of links over and adding float:right to all of them in the style attribute. That might work, but it also might take some mucking-- which I probably don't really have time to do right now, sorry! But you're definitely welcome to alter this any way you please.

ETA: If you just want more links in general, you can keep adding them down the existing column until you reach the end of the image. I assumed you specifically wanted another column, though. I suppose you could also copy the link list before the image and make that all float:left.

[raavashing]

I do want a second column! Thank you for the advice I'll probably play with it a bit