CODE | sally (request)

[manual]

one.	two.	three.
sally malik PLAYER CONTACT. ABOUT. HOW'S MY DRIVING.

one.	two.	three.
would you still love me PLAYER CONTACT. ABOUT. HOW'S MY DRIVING.

one.	two.	three.
if i'm no longer young & beautiful? PLAYER CONTACT. ABOUT. ABOUT. ABOUT. HOW'S MY DRIVING.

THE CODE:
<raw-code> <div style="height:500px; overflow: hidden;"> <!-- START COPYING FROM HERE FOR YOUR "TABS" --!> <a name="LINK1"></a> <table style="font-family: Helvetica, Calibri, sans-serif; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase;"> <tr> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: center;"><a href="#LINK1" style=" color: #353535; text-decoration: none;">TAB1</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle; border-left: 5px solid transparent;"><a href="#LINK2" style="color: #ffffff; text-decoration: none;">TAB2</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle;"><a href="#LINK3" style="color: #ffffff; text-decoration: none;">TAB3</a> </td> </tr> <tr> <td colspan="3" style="background: url(BACKGROUNDIMGURL) #ececec; background-position: center center; height: 400px; width: 400px; padding: 0; text-align: center; vertical-align: middle; -webkit-filter: grayscale(1);"> <div style="height: 40px; width: 400px; position: relative; top: 50px;"> <span style="font-size: 3.0em; color: #ffffff;">LARGE TEXT</span> </div> <div style="background: #000000; background-position: center center; width: 400px; position: relative; top: 68px; opacity: 0.8; padding: 14px 14px; text-align: right; font-size: 0.8em;"> <a href="URL" style="color: #ffffff; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">LINKTEXT</a> </div> </td> </tr> <tr><td style="height:50px;"></td></tr> </table> <!-- STOP COPYING AT THIS POINT FOR YOUR "TABS", AND PASTE DIRECTLY AFTER THIS PART--!> </div> </raw-code>

NOTES:
- To change the subtitle font size, ctrl+f 3.0em and replace it with 1.6em or 1.0em or really any value lesser than 3.0.
- If you don't want greyscale background images, just remove -webkit-filter: grayscale(1);
- Image size should be at least 400px by 400px.
- Remember to add [br/] tags at the end of every linebreak (with proper punctuation like u kno).
- a name="LINK1" is the name of your "tab", a href="#LINK1" is how you link to the tab. Replace LINK1 with your desired name, and so on. Both pairs have to match, leave the # in front of the target.
- Ideally works for three tabs, but feel free to edit the hell out of this.

Comments

[catmaylook]

This is gorgeous, thank you for sharing! Will definitely be implementing this between my more active muses. ♥

[isleofapples]

I feel like I should tell you that this is probably my favourite navbox, and certainly my go-to for navs that need a bunch of links. I've used it a few times, but I'm currently using it over at trigedakru. So thank you so much. I love this concept, and I'm not sure I would have thought to do it this way.

[queenofbooks]

Hi!

This is gorgeous code, but I can't get it to look right. Could you maybe tell me where I have messed it up?

raw-code> <div style="height:500px; overflow: hidden;"> <!-- START COPYING FROM HERE FOR YOUR "TABS" --!> <a name="OOC"></a> <table style="font-family: Helvetica, Calibri, sans-serif; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase;"> <tr> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: center;"><a href="#OOC" style=" color: #353535; text-decoration: none;">OOC</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle; border-left: 5px solid transparent;"><a href="#City of Sin" style="color: #ffffff; text-decoration: none;">City of Sin</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle;"><a href="#Teleios" style="color: #ffffff; text-decoration: none;">Teleios</a> </td> </tr> <tr> <td colspan="3" style="background: url(http://i.imgur.com/c0FRCKv.png) #ececec; background-position: center center; height: 400px; width: 400px; padding: 0; text-align: center; vertical-align: middle; -webkit-filter: grayscale(1);"> <div style="height: 40px; width: 400px; position: relative; top: 50px;"> <span style="font-size: 3.0em; color: #ffffff;">There is more to knowledge than power</span> </div> <div style="background: #000000; background-position: center center; width: 400px; position: relative; top: 68px; opacity: 0.8; padding: 14px 14px; text-align: right; font-size: 0.8em;"> <a href="URL" style="color: #ffffff; text-decoration: none;">OOC</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">HMD</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Permissions</a> </div> </td> </tr> <tr><td style="height:50px;"></td></tr> </table> <!-- STOP COPYING AT THIS POINT FOR YOUR "TABS", AND PASTE DIRECTLY AFTER THIS PART--!> <a name="OOC"></a> <table style="font-family: Helvetica, Calibri, sans-serif; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase;"> <tr> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: center;"><a href="#OOC" style=" color: #353535; text-decoration: none;">OOC</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle; border-left: 5px solid transparent;"><a href="#City of Sin" style="color: #ffffff; text-decoration: none;">City of Sin</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle;"><a href="#Teleios" style="color: #ffffff; text-decoration: none;">Teleios</a> </td> </tr> <tr> <td colspan="3" style="background: url(http://i.imgur.com/c0FRCKv.png) #ececec; background-position: center center; height: 400px; width: 400px; padding: 0; text-align: center; vertical-align: middle; -webkit-filter: grayscale(1);"> <div style="height: 40px; width: 400px; position: relative; top: 50px;"> <span style="font-size: 3.0em; color: #ffffff;">There is more to Knowledge than Power</span> </div> <div style="background: #000000; background-position: center center; width: 400px; position: relative; top: 68px; opacity: 0.8; padding: 14px 14px; text-align: right; font-size: 0.8em;"> <a href="URL" style="color: #ffffff; text-decoration: none;">Application</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">IC Contact</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Thread Tracker</a> </div> </td> </tr> <tr><td style="height:50px;"></td></tr> </table> <a name="OOC"></a> <table style="font-family: Helvetica, Calibri, sans-serif; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase;"> <tr> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: center;"><a href="#LINK1" style=" color: #353535; text-decoration: none;">OOC</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle; border-left: 5px solid transparent;"><a href="#City of Sin" style="color: #ffffff; text-decoration: none;">City of Sin</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle;"><a href="#Teleios3" style="color: #ffffff; text-decoration: none;">Teleios</a> </td> </tr> <tr> <td colspan="3" style="background: url(http://imagehost4.online-image-editor.com/oie_upload/images/1131422chL88nqjU/1131519l78LCJaW.jpg) #ececec; background-position: center center; height: 400px; width: 400px; padding: 0; text-align: center; vertical-align: middle; -webkit-filter: grayscale(1);"> <div style="height: 40px; width: 400px; position: relative; top: 50px;"> <span style="font-size: 3.0em; color: #ffffff;">Forbidden</span> </div> <div style="background: #000000; background-position: center center; width: 400px; position: relative; top: 68px; opacity: 0.8; padding: 14px 14px; text-align: right; font-size: 0.8em;"> <a href="URL" style="color: #ffffff; text-decoration: none;">Application</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">IC Contact</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Thread Tracker</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Permissions</a> </div> </td> </tr> <tr><td style="height:50px;"></td></tr> </table> </div> </raw-code></text> Thank you so much!

[ex_trikru194]

Not manual but I wanted to see if I could help :)

Looks like you tried to put spaces in your City of Sin links, which I got rid of, and then also forgot to update the to reflect the other tab options (you needed one each for "CityofSin" and "Teleios"). I also adjusted the font size + padding so that the title ("there is more to knowledge than power") didn't hide itself partially under the menu options.

The only thing I'd suggest is adjusting the background image you're currently using so that the dimensions are more like 450x450 so there aren't any chances of the other images running over into the other navigation tabs as it seems to be happening now.

<raw-code> <div style="height:500px; overflow: hidden;"> <!-- START COPYING FROM HERE FOR YOUR "TABS" --!> <a name="OOC"></a> <table style="font-family: Helvetica, Calibri, sans-serif; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase;"> <tr> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: center;"><a href="#OOC" style=" color: #353535; text-decoration: none;">OOC</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle; border-left: 5px solid transparent;"><a href="#CityofSin" style="color: #ffffff; text-decoration: none;">City of Sin</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle;"><a href="#Teleios" style="color: #ffffff; text-decoration: none;">Teleios</a> </td> </tr> <tr> <td colspan="3" style="background: url(http://i.imgur.com/c0FRCKv.png) #ececec; background-position: center center; height: 400px; width: 400px; padding: 0; text-align: center; vertical-align: middle; -webkit-filter: grayscale(1);"> <div style="height: 40px; width: 400px; position: relative; top: 40px;"> <span style="font-size: 2.0em; color: #ffffff;">There is more to knowledge than power</span> </div> <div style="background: #000000; background-position: center center; width: 400px; position: relative; top: 68px; opacity: 0.8; padding: 14px 14px; text-align: right; font-size: 0.8em;"> <a href="URL" style="color: #ffffff; text-decoration: none;">OOC</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">HMD</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Permissions</a> </div> </td> </tr> <tr><td style="height:50px;"></td></tr> </table> <!-- STOP COPYING AT THIS POINT FOR YOUR "TABS", AND PASTE DIRECTLY AFTER THIS PART--!> <a name="CityofSin"></a> <table style="font-family: Helvetica, Calibri, sans-serif; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase;"> <tr> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: center;"><a href="#OOC" style=" color: #ffffff; text-decoration: none;">OOC</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle; border-left: 5px solid transparent;"><a href="#CityofSin" style="color: #353535; text-decoration: none;">City of Sin</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle;"><a href="#Teleios" style="color: #ffffff; text-decoration: none;">Teleios</a> </td> </tr> <tr> <td colspan="3" style="background: url(http://i.imgur.com/c0FRCKv.png) #ececec; background-position: center center; height: 400px; width: 400px; padding: 0; text-align: center; vertical-align: middle; -webkit-filter: grayscale(1);"> <div style="height: 40px; width: 400px; position: relative; top: 40px;"> <span style="font-size: 2.0em; color: #ffffff;">There is more to Knowledge than Power</span> </div> <div style="background: #000000; background-position: center center; width: 400px; position: relative; top: 68px; opacity: 0.8; padding: 14px 14px; text-align: right; font-size: 0.8em;"> <a href="URL" style="color: #ffffff; text-decoration: none;">Application</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">IC Contact</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Thread Tracker</a> </div> </td> </tr> <tr><td style="height:50px;"></td></tr> </table> <a name="Teleios"></a> <table style="font-family: Helvetica, Calibri, sans-serif; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase;"> <tr> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: center;"><a href="#LINK1" style=" color: #ffffff; text-decoration: none;">OOC</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle; border-left: 5px solid transparent;"><a href="#CityofSin" style="color: #ffffff; text-decoration: none;">City of Sin</a></td> <td style="padding: 20px; width: 80px; background: #ececec; vertical-align: middle;"><a href="#Teleios3" style="color: #353535; text-decoration: none;">Teleios</a> </td> </tr> <tr> <td colspan="3" style="background: url(http://imagehost4.online-image-editor.com/oie_upload/images/1131422chL88nqjU/1131519l78LCJaW.jpg) #ececec; background-position: center center; height: 400px; width: 400px; padding: 0; text-align: center; vertical-align: middle; -webkit-filter: grayscale(1);"> <div style="height: 40px; width: 400px; position: relative; top: 50px;"> <span style="font-size: 2.0em; color: #ffffff;">Forbidden</span> </div> <div style="background: #000000; background-position: center center; width: 400px; position: relative; top: 68px; opacity: 0.8; padding: 14px 14px; text-align: right; font-size: 0.8em;"> <a href="URL" style="color: #ffffff; text-decoration: none;">Application</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">IC Contact</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Thread Tracker</a><br/> <a href="URL" style="color: #ffffff; text-decoration: none;">Permissions</a> </div> </td> </tr> <tr><td style="height:50px;"></td></tr> </table> </div> </raw-code>

Hope that helped :) And sorry manual for jumping in unannounced!!