Multi-column Table Templates To menu

Two-Column Left Sidebar Table Template (adjust percentages to suit your taste)

Column One

Column Two

<style> table td { padding: 2px; } </style> <table width="100%" cellpadding="0" cellspacing="0" border="1"><tr> <td width="20%">Column One</td> <td width="80%">Column Two</td> </tr></table>

Two-Column Right Sidebar Table Template (adjust percentages to suit your taste)

Column One

Column Two

<style> table td { padding: 2px; } </style> <table width="100%" cellpadding="0" cellspacing="0" border="1"><tr> <td width="80%">Column One</td> <td width="20%">Column Two</td> </tr></table>

Three-Column Table Template (adjust percentages to suit your taste)

Column One

Column Two

Column Three

<style> table td { padding: 2px; } </style> <table width="100%" cellpadding="0" cellspacing="0" border="1"><tr> <td width="20%">Column One</td> <td width="60%">Column Two</td> <td width="20%">Column Three</td> </tr></table>

Multi-Column Table Template (Adjust td widths to suit. Add as many td tags as you need.)

Column One

Column Two

Column Three

Column Four

Column Five

Column Six

<style> table td { padding: 2px; } </style> <table width="100%" cellpadding="0" cellspacing="0" border="1"><tr> <td width="100">Column One</td> <td width="100">Column Two</td> <td width="100">Column Three</td> <td width="100">Column Four</td> <td width="100">Column Five</td> <td width="100">Column Six</td> </tr></table>

Multi-column Div Templates To menu

Two-Column Left Sidebar Template

<style> #col1 { float: left; width: 20%; border: 1px black solid; text-align: left; padding: 1px; } #col2 { float: left; width: 79%; border: 1px black solid; text-align: left; padding: 1px; } .clr { clear: both; } </style> <div id="col1">Column One</div> <div id="col2">Column Two</div> <div class="clr"></div>

Two-Column Right Sidebar Template

<style> #col1 { float: left; width: 79%; border: 1px black solid; text-align: left; padding: 1px; } #col2 { float: left; width: 20%; border: 1px black solid; text-align: left; padding: 1px; } .clr { clear: both; } </style> <div id="col1">Column One</div> <div id="col2">Column Two</div> <div class="clr"></div>

Three-Column Two-Sidebar Template

<style> #col1 { float: left; width: 20%; border: 1px black solid; text-align: left; padding: 1px; } #col2 { float: left; width: 58%; border: 1px black solid; text-align: left; padding: 1px; } #col3 { float: left; width: 20%; border: 1px black solid; text-align: left; padding: 1px; } .clr { clear: both; } </style> <div id="col1">Column One</div> <div id="col2">Column Two</div> <div id="col3">Column Three</div> <div class="clr"></div>

CSS Buttons To menu

These are nice CSS hover buttons in two styles: horizontal and vertical. Change size and color to suit your taste.

Change height, width, font and font size, background-color and color and images to suit your taste. NOTE: with CSS buttons, be sure to include the cursor change so visitors will recognize the button is a link.

Miscellaneous Codes To menu

Hover Image Change

Change height, width and images to suit your taste.

Hover Testing
<style> a#info { background-image: url("http://images.neopets.com/items/toy_blueusul.gif"); width: 80px; height: 80px; display: block; } a#info:hover { background-image: url("http://images.neopets.com/items/ala_sword_2.gif"); } </style> Hover Testing <a id="info" href="/"></a><br>

Opacity Hover Testing

This code no longer works on any Neopets' pages except for guilds. Sure wish I understood TNT's reasoning.

<style> a#info2 { background-image: url("http://images.neopets.com/items/toy_blueusul.gif"); width: 80px; height: 80px; display: block; } a#info2:hover { background-image: url("http://images.neopets.com/items/toy_blueusul.gif"); } </style> Opacity Hover Testing <a id="info2" href="/"></a><br>

Avatar Block

Change avatar image URL to match your choice.

<style> #avatarcontainer { width: 260px; height: 150px; text-align: center; vertical-align: middle; top: 20px; } .avatar { float: left; padding: 0 18px; } .title { text-align: center; font: 12pt verdana; color: black; font-variant: small-caps; } </style> <div align="center" id="avatarcontainer" style="position: relative;"> <p class="title">Avatars</p> <div class="avatar"> <img src="http://images.neopets.com/neoboards/avatars/youravatarURL.gif" width="50" height="50"><br> Current<br>Fav </div> <div class="avatar"> <img src="http://images.neopets.com/neoboards/avatars/youravatarURL.gif" width="50" height="50"><br> Working<br>Toward </div> <div class="avatar"> <img src="http://images.neopets.com/neoboards/avatars/youravatarURL.gif" width="50" height="50"><br> Most<br>Recent </div> </div>

Fixed Position Sidebar Menu

This CSS page code will create a left content area with a right-side fixed-position menu. In other words, the menu will stay in the same position on the page while the user scrolls down your content. (This is whole-page code and the visual demo below has been altered so it will work on this page without breaking it. The attached code will work as expected.

<style> body { } #pg_container { width: 770px; height: auto; margin: 0 auto; text-align: justify; } #pg_content { float: left; width: 520px; height: auto; margin-right: 10px; padding: 8px 10px; } #pg_menu { float: right; padding: 8px 10px; width: 200px; } .pg_clr { clear: both; } </style> <div align="center"> <div id="pg_container"> <div id="pg_content"> <p>A Faerieland Bedtime Story</p> <p>As evening fell on Neopia Central, it was time for Kora the Poogle's nightly bedtime story. Her mother Eppa knew an endless supply of bedtime stories, for she'd loved them since her youth. Of all the stories Eppa knew, Kora's favourites were the ones about the faeries. "Mum, mum!" Kora pleaded, "Please tell me a faerie story...</p> <p>Which of the faeries would you like to hear about tonight, darling?" Eppa asked.</p> <p>Oh let me see," Kora mused. "As you know, my favourite is the Space Faerie. But you told me a story about her for bedtime last night. Hmmm... I think I'm in the mood to root for the bad guy. How about a story about a dark faerie? Why yes, I think that a story about a dark faerie would suit me nicely.</p> <p>Okay dear, I think that can be arranged." Eppa thought for a moment, then began: "Alright, well our story this evening begins, not in Faerieland, but rather on Mystery Island, with a Kougra named Raitorn. Having graduated first in his class at the Training School, Raitorn soon began a great career as a Battledome combatant...</p> <p>But mum," Kora interrupted, "Why haven't I heard of him?</p> <p>Well you see honey," Eppa explained, "this story takes place a long, long time ago, far before your time. This story is actually an old legend, which has been passed down for many generations.</p> <p>Oh, I see," Kora said.</p> </div> <div id="pg_menu" style="position: fixed;"> Link 1<br> Link 2<br> Link 3<br> Link 4<br> </div> <div class="pg_clr"></div> </div> </div>

Blog Codes To menu

Simple Blog

Change height, width, top and left to suit your taste.

<style> #container { top: 0px; left: 0px; width: 100%; height: 200px; } #blog { top: 35px; left: 90px; width: 150px; height: 150px; border: 2px dotted red; overflow: auto; } </style> <div id="container" style="position: relative;"> <div id="blog" style="position: absolute;"> <p>Content here</p> <p>The scroll bar will show up when the length of the content exceeds the height of this area.</p> </div> </div>

Simple Blog with Background Image

Change height, width, top and left to suit your image.

<style> #blogbkgd2 { background: url("http://i239.photobucket.com/albums/ff190/rita11_11/blogs/harristree.jpg") no-repeat; width: 600px; height: 434px; top: 0px; left: 0px; } #blog2 { overflow: auto; width: 195px; height: 326px; top: 50px; left: 55px; } .inner { padding: 8px; } </style> <div id="blogbkgd2" style="position: relative;"> <div id="blog2" style="position: absolute;"> <div class="inner"> <p>Your text goes here.</p> <p>The scroll bar will show up when the length of the content exceeds the height of this area.</p> </div> </div> </div>

Some "Reusable" Blog Space

This is NOT code for the HTML/CSS newbie. Tackle at your own risk.

Some tips regarding creating "reusable" blogs:

1. Create a container for ALL your content. (Let's call this blogcontainer.) Relatively position this container on the page: position: relative;. Reasoning: Using position: relative; ensures the page is displayed correctly and that the TNT code following your code (the copyright info) will remain at the bottom of the page where it's supposed to be.
2. From now on, all positioning INSIDE the blogcontainer will be absolutely positioned and based on the edges of your container.
3. Put your page header divs and page navigation divs INSIDE the blogcontainer created above. Absolutely position these elements.
4. Create another container div for the actual content of the "pages." (Let's call this container mycontent.) The height and width of mycontent MUST be smaller than that of blogcontainer, and must take into account the other elements displayed above, below and/or to the sides of mycontent.
5. Mycontent is the div on which you apply overflow: hidden; to hide all the extra "pages" you don't want seen until the link is clicked upon.
6. Inside the mycontent div is where you place all the sections of the "pages" you have to display, so create a separate div for each section, let's call it section. In your styles, add overflow: auto; to the class defining section.
7. To this point you have the following layout:
   • div id="blogcontainer
   • div id="pageheader" /div
   • div id="nav" /div
   • div id="mycontent
   • div class="section" /div
   • div class="section" /div
   • div class="section" /div
   • /div (this closes the mycontent div)
   • /div (this closes the blogcontainer div)
8. This is the bare bones of a "reusable" (non-full-page) blog. It can be customized in many different ways, putting your nav at the top, to either side or the bottom.
9. If you want, you can place any image either as a body background, or as a background to blogcontainer or mycontent

More "Reusable" Blog Space with Background Image

This is NOT code for the HTML/CSS newbie. Tackle at your own risk.