InsaneJournal

• Create Account
• IJ Login
• OpenID Login

Search by :  Username E-mail Region Interest AOL IM ICQ Number Yahoo! ID MSN Username Jabber

• View
  • Create Account
  • IJ Login
  • OpenID Login
• Journal
  • Post
  • Edit Entries
  • Customize Journal
  • Comment Settings
  • Recent Comments
  • Manage Tags
• Account
  • Manage Account
  • Viewing Options
  • Manage Profile
  • Manage Notifications
  • Manage Pictures
  • Manage Schools
  • Account Status
• Friends
  • Edit Friends
  • Edit Custom Groups
  • Friends Filter
  • Nudge Friends
  • Invite
  • Create RSS Feed
• Asylums
  • Post
  • Asylum Invitations
  • Manage Asylums
  • Create Asylum
• Site
  • Support
  • Upgrade Account
  • FAQs
  • Search By Location
  • Search By Interest
  • Search Randomly

Ally -- are you already gone? (wastintime) wrote in rp_tutorials, @ 2011-01-06 08:36:00

Table-less Navigation Bar


This is a navigation bar built using DIV and SPAN statements. It can fit inside any table or stand on its own. However, it WILL NOT work in the IJ profile pages.

Live Example

game name

link link link link link link link link
link link link link link link

The Code
<div style="width:800px;background:#AA0000;padding:10px;letter-spacing:2px; font-size:10px;font-family:monospace;color:white;text-align:center;text-shadow:0 1px 1px #222222;"><span style="font-size:20px;"><b>game name</b></span><br> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a> <a href="" style="text-decoration:none;"><span style="margin-right:15px;color:white;">link</span></a></div>

Note: Take out the width:800px; statement to make it fit inside any table or extend the width of a page.

See it in action!: super_mod

Questions/Feedback?
Leave a comment to this post. Thanks!

(Read comments)

Post a comment in response:

From:	( ) Anonymous- this user has disabled anonymous posting. ( ) OpenID InsaneJournal user Username: Password: Login?  Don't have an account? Create one now.
Subject:	No HTML allowed in subject   Don't auto-format:
Message:	Check spelling during preview