bannertech | Navigation codes

Skip to Main Content

Entry tags:

navigation

Navigation codes

( static preview )

( live preview )

NAVIGATION

APPLICATION
IC CONTACT
CONCRIT / CONTACT
CHARACTER RELATIONS
THREAD TRACKING
PERMISSIONS
MISC.

NAVIGATION

GAME #1
• APPLICATION
• IC CONTACT
• CONCRIT / CONTACT
• CHARACTER RELATIONS
• THREAD TRACKING
• PERMISSIONS
• MISC.

GAME #2
• APPLICATION
• IC CONTACT
• CONCRIT / CONTACT
• CHARACTER RELATIONS
• THREAD TRACKING
• PERMISSIONS
• MISC.

( instructions )

1 column staggered: <center><div style="width:430px;"> <div style="width:110px;float:left;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:200px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;">NAVIGATION</span></div> <div style="width:180px;height:190px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><a href="" style="text-decoration: none; color:#5A4C3A;">APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">MISC.</A></div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>	2 column staggered: <center><div style="width:630px;"> <div style="width:110px;float:left;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:400px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;text-align:left;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;"> NAVIGATION</span></div> <div style="width:380px;height:190px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><table><tr><td width="180px"><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #1</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td> <td><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #2</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td></tr></table> </div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>
1 column level version: <center><div style="width:430px;"> <div style="width:110px;float:left;margin-top:17px;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:200px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;">NAVIGATION</span></div> <div style="width:180px;height:173px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><a href="" style="text-decoration: none; color:#5A4C3A;">APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">MISC.</A></div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>	2 column level version: <center><div style="width:630px;"> <div style="width:110px;float:left;margin-top:17px;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:400px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;text-align:left;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;"> NAVIGATION</span></div> <div style="width:380px;height:173px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><table><tr><td width="180px"><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #1</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td> <td><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #2</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td></tr></table> </div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>
This has a fixed height, so you can't have more links than ~10 or 11 per column. You can have fewer without affecting anything, though. HEX CODES Navigation panel background: #49A9F3 Main background and border: #e0e0e0 Links color: #5A4C3A

Flat | Top-Level Comments Only

Thank you very much for the code! I used it, though I ended up modifying it (making it pink to match the character's tastes and listing the game at the top like in the two-column layout, as well as using for bullet points an image my game uses for that purpose).

Flat | Top-Level Comments Only