Navigation

Welcome
Important
Coding Competition
Style One
Style Two
Style Three
Style Four
Style Five
Style Six
Style Seven
Lookups

Neo-Navigation

account
central
explore
games
boards
shops
news
video
nc mall

Rules

• No stealing!
• Keep credit on!
• You can change them around as long as you keep the credit on!

If you see anyone breaking these rules, tell me! Neomail me about it, and give me their username. I will give them a warning, but if they continue to break the rules they will be put on the Wall of Shame.

Affies

Want to be an affie?

I want to be an affie of Mack's CSS! Name: Site name: Site link: Do you have a button? Will you put my button on your site? How did you find or hear about Mack's CSS?

Link back

<a href="http://www.neopets.com/~macks_css"><img src="http://i579.photobucket.com/albums/ss238/SherFam/mackscssbutton.png" border="0"></a>

<a href="http://www.neopets.com/~macks_css"><img src="http://i579.photobucket.com/albums/ss238/SherFam/macks_css_button.png" border="0"></a>

<a href="http://www.neopets.com/~macks_css"><img src="http://i579.photobucket.com/albums/ss238/SherFam/mackscssbutton2.gif" border="0"></a>

<a href="http://www.neopets.com/~macks_css"><img src="http://i28.tinypic.com/2mi5eu1.gif"></a>

Toybox

These pixels aren't mine, but I love them!

Credit

Layout and content by kenzie1270177.
Best Viewed sign and envelope pixels by Amber's Pixels. Link Back button #4 from Pinkstar.
Site from Neopets.

News and updates

Reviews

pending

50/50

6.5/10 or 65%

Vote for me!

Awards

Drag to the address bar for a better view.

Drag to the address bar for a better view.

From Weewoo Reviews.

Wall of Fame

guest!
Why? Because they are really awesome and visited Mack's CSS!

To be on the wall of fame, just visit us!

Wall of Shame

Nobody yet! Let's keep it that way!

Listed in

Pending

Icon Box

Where I put all my favorite icons!

Welcome

Welcome to Mack's Css, guest! This site was created August 3rd, 2009.

Back to top

Important!

Every time you see this pixel you can click on it to neomail me.

On style one, the "Save Changes" button is in between the page title and the tables.

Mouse over each picture to see what I've named the color scheme!

Drag the pictures to the address bar for a better view!

Back to top

Coding Competition

For the first time ever, Mack's CSS will be having a coding competition! Contestants will make a CSS petpage, and I will vote which one is the best! The winner will get there CSS added to the site as a new style, for everyone to use! (don't worry, I'll keep credit on)

RULES

• Coding MUST be your own work.
• If you don't win, don't be a sore loser. And if you do win, don't brag. It's just not nice.
• There is no actual prize involved, so don't ask.
• If you don't want me to put your CSS on Mack's CSS, tell me, and I won't. I will put on the second place winner's, though, but keep your image on saying that you won.

HOW TO ENTER

To enter, take a screenshot of your CSS and put it on another petpage, along with the code.

I want to enter Mack's CSS Coding Competition! Username: Petpage link: If you win, do you want your CSS on Mack's CSS?

Entry deadline: September 20

Back to top

Style One

Style One, my first style ever. It's a pretty good start. It has two columns, and I think it's pretty good.

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #9D70BF; } #RIGHT, #LEFT { position: absolute; } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #4A2A63; } #LEFT { left: 100px; width: 700px; height: auto; background: #E2D7FF; } #RIGHT { left: 815px; width: 200px; height: auto; background: #E2D7FF; } #TOP { position: absolute; top: 10px; left: 400px; width: 450px; background: #E2D7FF; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #E2D7FF; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #4D3A8C; letter-spacing: 3px; padding: 2px; border: 1px solid #76529A; } a:link, a, .pa, a:visited, a:active { color: #542E95; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div><style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #C3EBC7; } #RIGHT, #LEFT { position: absolute; } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #325E36; } #LEFT { left: 100px; width: 700px; height: auto; background: #FFFFFF; } #RIGHT { left: 815px; width: 200px; height: auto; background: #FFFFFF; } #TOP { position: absolute; top: 10px; left: 400px; width: 450px; background: #FFFFFF; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #FFFFFF; } h2 { font: 8pt georgia; color: #000000; text-align: left; background-color: #BCE4E3; letter-spacing: 3px; padding: 2px; border: 1px solid #325E36; } a:link, a, .pa, a:visited, a:active { color: #2F2A6D; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #4D3D1D; } #RIGHT, #LEFT { position: absolute; } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #1C160A; } #LEFT { left: 100px; width: 700px; height: auto; background: #9FA483; } #RIGHT { left: 815px; width: 200px; height: auto; background: #9FA483; } #TOP { position: absolute; top: 10px; left: 400px; width: 450px; background: #9FA483; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #9FA483; } h2 { font: 8pt georgia; color: #000000; text-align: left; background-color: #5B6624; letter-spacing: 3px; padding: 2px; border: 1px solid #1C160A; } a:link, a, .pa, a:visited, a:active { color: #16433D; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div><style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #BC5252; } #RIGHT, #LEFT { position: absolute; } #RIGHT, #LEFT, #TOP { top: 75px; margin: 6px; padding: 6px; border: 3px solid #410C0C; } #LEFT { left: 100px; width: 700px; height: auto; background: #EBEAD1; } #RIGHT { left: 815px; width: 200px; height: auto; background: #EBEAD1; } #TOP { position: absolute; top: 10px; left: 400px; width: 450px; background: #EBEAD1; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #EBEAD1; } h2 { font: 8pt georgia; color: #000000; text-align: left; background-color: #81667E; letter-spacing: 3px; padding: 2px; border: 1px solid #EBEAD1; } a:link, a, .pa, a:visited, a:active { color: #4E0830; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .header { } .sf { } </style> <div id="top"> <h1><center>Page title</center></h1> </div> <div id="right"> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Links</h2> <a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <br><a href="http://www.neopets.com/~freddie14101">Link</a> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Credit</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. </div> <div id="left"> <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <p></p> <h2>Title</h2> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>

Back to top

Style Two

Style Two has one column, and a page title that runs completely across the top of the page. The navigation is on the title banner as well.

<style> BODY { background-color: #D4E8EA; } BODY, font, div, p, a { color: #000000; font-family: Verdana; font-size: 10px; } a:link, a:visited, a:active, { color: #848C4F; text-decoration: none; font-size: 13px; } a:hover { color: #000000; text-decoration: underline; font-size: 13px; } #container { width: 500px; background: #FFFFFF; text-align: left; border: 12px solid #5095BE; } h1 { font: 60px Verdana; color: #CACACA; text-align: center; background-color: #234C82; letter-spacing: -2px; word-spacing: 10px; padding: 0px; padding-top: 2px; padding-bottom: 12px; margin: 0px; border: 10px solid #5095BE; width: 100%; } h2, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: right; margin: 3px; padding: 2px; border: 1px solid #e5e4e4; } .sf, .header { display: none; } </style> <p> </p> <div align="center"> <h1>Page title </h1> <p><a class="n">account</a> | <a class="n">central</a> | <a class="n">explore</a> | <a class="n">games</a> | <a class="n2">boards</a> | <a class="n">shops</a> | <a class="n">news</a> | <a class="n">video</a> | <a class="n">nc mall</a> </p> <div id="container"> <h2>header</h2> All your text can go here. </div> <div id="container"> <h2>header</h2> All your text can go here. </div> <div id="container"> <h2>header</h2> All your text can go here. </div> <div id="container"> <h2>Credits</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. <div><textarea><style> BODY { background-color: #444444; } BODY, font, div, p, a { color: #000000; font-family: Verdana; font-size: 10px; } a:link, a:visited, a:active, { color: #9B9C7D; text-decoration: none; font-size: 13px; } a:hover { color: #000000; text-decoration: underline; font-size: 13px; } #container { width: 500px; background: #FFFFFF; text-align: left; border: 12px solid #43465C; } h1 { font: 60px Verdana; color: #CACACA; text-align: center; background-color: #445C43; letter-spacing: -2px; word-spacing: 10px; padding: 0px; padding-top: 2px; padding-bottom: 12px; margin: 0px; border: 10px solid #43465C; width: 100%; } h2, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: right; margin: 3px; padding: 2px; border: 1px solid #e5e4e4; } .sf, .header { display: none; } </style> <p> </p> <div align="center"> <h1>Page title </h1> <p><a class="n">account</a> | <a class="n">central</a> | <a class="n">explore</a> | <a class="n">games</a> | <a class="n2">boards</a> | <a class="n">shops</a> | <a class="n">news</a> | <a class="n">video</a> | <a class="n">nc mall</a> </p> <div id="container"> <h2>header</h2> All your text can go here. </div> <div id="container"> <h2>header</h2> All your text can go here. </div> <div id="container"> <h2>header</h2> All your text can go here. </div> <div id="container"> <h2>Credits</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. <div> <p><a href="/~macks_css#top">Back to top</a> </p> <h2><a name="topic5"><font color="#FFFFFF">Style Three</font></a></h2> Style three has one column and a <i>scrollbar</i>, and it's perfect for a blog. Change the <i>background</i> to any one you want, or keep the current one. <p><img src="http://i579.photobucket.com/albums/ss238/SherFam/css7.png" width="143" height="159" alt="Brightness (You can change the colors around, though)"><br><textarea><style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } body { background: #15375A url("http://i579.-blocked--blocked-photobucket.com/albums/ss238/SherFam/lightyellowtilebackground.jpg"); } #CENTER { position: absolute; } #CENTER, #TOP { top: 100px; margin: 6px; padding: 6px; border: 3px solid #669799; } #CENTER { left: 345px; width: 475px; height: 250px; background: #EAFEED; } #TOP { position: absolute; top: 8px; left: 345px; width: 475px; background: #EAFEED; } scrollbar-face-color #0E243Ascrollbar-track-color #98BFE7scrollbar-highlight-color #98BFE7scrollbar-shadow-color #0E243Ascrollbar-3dlight-color #ffffffscrollbar-darkshadow-color #000000scrollbar-arrow-color #98BFE7 h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #EAFEED; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #3C3C82; letter-spacing: 3px; padding: 2px; border: 1px solid #AB8055; } a:link, a, .pa, a:visited, a:active { color: #542E95; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .sf, .td { } </style> <div id="top"> <h1><center><a name="top"><font color="#000000">Page Title</font></a></center></h1> </div> <div id="center"> <div style="width: 455; height: 350px; overflow: auto; background-color: #EAFEED; border: -blocked- 2px solid #669799;" align="center"> <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>Credits</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. </div> </div>

Back to top

Style Four

Style Four has four boxes to write in. The top right and bottom left boxes have scrollbars, and there is PLENTY of space to write!

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } body { background-color: #EE8F8F; } #RIGHTTOP, #LEFTTOP, #LEFTBOTTOM, #RIGHTBOTTOM, #NAV { position: absolute; } #RIGHTTOP, #TOP, #LEFTTOP, #LEFTBOTTOM, #RIGHTBOTTOM, #NAV { margin: 6px; padding: 6px; border: 2px solid #000000; } #RIGHTTOP { top: 110px; left: 578px; width: 375px; height: 250px; background: #BBE7BE; } #LEFTTOP { top: 110px; left: 180px; width: 378px; height: 250px; background: #F3F5BF; } #LEFTBOTTOM { top: 410px; left: 180px; width: 375px; height: 250px; background: #D1EDEC; } #RIGHTBOTTOM { top: 410px; left: 580px; width: 375px; height: 250px; background: #D2BAE4; } #TOP { top: 8px; position: absolute; left: 345px; width: 475px; background: #EEC58F; } #NAV { top: 75px; left: 345px; width: 475px; height: 30px; background: pink; } scrollbar-face-color #0E243Ascrollbar-track-color #98BFE7scrollbar-highlight-color #98BFE7scrollbar-shadow-color #0E243Ascrollbar-3dlight-color #ffffffscrollbar-darkshadow-color #000000scrollbar-arrow-color #98BFE7 h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #EEC58F; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #3A3A19; letter-spacing: 3px; padding: 2px; border: 1px solid #000000; } h3 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #1A1A4D; letter-spacing: 3px; padding: 2px; border: 1px solid #000000; } h4 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #002502; letter-spacing: 3px; padding: 2px; border: 1px solid #000000; } h5 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #25073C; letter-spacing: 3px; padding: 2px; border: 1px solid #000000; } a:link, a, .pa, a:visited, a:active { color: #542E95; text-decoration: underline; font-size: 10pt -blocked-; } a:hover { color: #000000; text-decoration: underline; } .sf, .td { } </style> <div id="top"> <h1><center><a name="top"><font color="#000000">Page Title</font></a></center></h1> </div> <div id="nav"> <center> <a href="/myaccount.phtml">account</a> <a href="/petcentral.phtml">central</a> <a href="/explore.phtml">explore</a> <a href="/games/arcade.phtml">games</a> <a href="/neoboards/index.phtml">boards</a> <a href="/objects.phtml">shops</a> <a href="/nf.phtml">news</a> <a href="/video/index.phtml">video</a> <a href="/mall/index.phtml">nc mall</a> </center> </div> <div id="lefttop"> <h2>header</h2> <center>Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! </center> </div> <div id="leftbottom"> <div style="width: 355; height: 265px; overflow: auto; background-color: #D1EDEC; border: -blocked- 2px solid #669799;" align="center"> <h3>header</h3> Put your text here! <h3>header</h3> Put your text here! <h3>header</h3> Put your text here! <h3>header</h3> Put your text here! <h3>header</h3> Put your text here! <h3>header</h3> Put your text here! <h3>header</h3> Put your text here! </div> </div> <div id="righttop"> <div style="width: 355; height: 265px; overflow: auto; background-color: #BBE7BE; border: -blocked- 2px solid #669799;" align="center"> <h4>header</h4> Put your text here! <h4>header</h4> Put your text here! <h4>header</h4> Put your text here! <h4>header</h4> Put your text here! <h4>header</h4> Put your text here! <h4>header</h4> Put your text here! </div> </div> <div id="rightbottom"> <h5>header</h5> Put your text here! <h5>header</h5> Put your text here! <h5>header</h5> Put your text here! <h5>Credits</h5> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. </div>

Back to top

Style Five

Style Five, the style used for this page, has three columns and a place for a picture.

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #9D70BF; } #RIGHT, #LEFT, #CENTER { position: absolute; } #TOP margin 6px padding 6px#RIGHT, #CENTER, #LEFT { top: 320px; margin: 6px; padding: 6px; border: 3px solid #4A2A63; } #CENTER { left: 345px; width: 475px; height: auto; background: #E2D7FF; } #RIGHT { left: 840px; width: 200px; height: auto; background: #E2D7FF; } #TOP { position: absolute; top: 8px; left: 130px; width: 379px; background: #E2D7FF; border: 3px solid #4A2A63; } #LEFT { left: 125px; width: 200px; height: auto; background: #E2D7FF; } h1, .pa { color: #000000; font-size: 24px; font-weight: bold; font-family: georgia; text-align: left; margin: 3px; padding: 2px; border: 1px solid #E2D7FF; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #4D3A8C; letter-spacing: 3px; padding: 2px; border: 1px solid #76529A; } a:link, a, .pa, a:visited, a:active { color: #542E95; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .sf, td { display: none; } </style> <div id="top"> <h1><center><a name="top"><font color="#000000"><img src="http://i579.photobucket.com/albums/ss238/SherFam/samplepicture.png" width="900" height="298"></font></a></center></h1> </div> <div id="right"> <h2>Navigation</h2> <center> <a href="/#topic1">link</a> <br><a href="/#topic2">link</a> <br><a href="/#topic3">link</a> <br><a href="/#topic4">link</a> <br><a href="/#topic5">link</a> <br><a href="/#topic6">link</a> <p></p> <h2>Neo-Navigation</h2> <center> <a class="n">account</a> <br><a class="n">central</a> <br><a class="n">explore</a> <br><a class="n">games</a> <br><a class="n2">boards</a> <br><a class="n">shops</a> <br><a class="n">news</a> <br><a class="n">video</a> <br><a class="n">nc mall</a> </center> <p></p> <h2>header</h2> Text here text here text here </center> </div> <div id="left"> <p></p> <h2>header</h2> Text here text here text here <p></p> <h2>header</h2> Text here text here text here <p></p> <h2>header</h2> Text here text here text here <p></p> <h2>Credits</h2> Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. </div> <div id="center"> <h2><a name="topic1"><font color="#FFFFFF">header</font></a></h2> Text here text here text here <p></p> <h2><a name="topic2"><font color="#FFFFFF">header</font></a></h2> Text here text here text here <p></p> <h2><a name="topic3"><font color="#FFFFFF">header</font></a></h2> Text here text here text here <p></p> <h2><a name="topic4"><font color="#FFFFFF">header</font></a></h2> Text here text here text here <p></p> <h2><a name="topic5"><font color="#FFFFFF">header</font></a></h2> Text here text here text here <p></p> <h2><a name="topic6"><font color="#FFFFFF">header</font></a></h2> Text here text here text here <p><a href="/~macks_css#top">Back to top</a> </p> <h2><a name="topic8"><font color="white">Style Six</font></a></h2> Style Six has not only a <i>table</i>, but also a <i>scrollbox</i>. There is also cool <i>navigation</i>. <p><img src="http://i579.photobucket.com/albums/ss238/SherFam/css10.png" width="149" height="170" alt="Cool and Colorless"><br><textarea><style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } body { background-color: #3D3C3C; } #LEFTTOP, #TABLE, #NAV { position: absolute; } #LEFTTOP, #TABLE, #NAV { margin: 6px; padding: 6px; border: 2px solid #000000; } #NAV { top: 140px; left: 740px; width: 150px; height: 270px; background: #ABABAB; } #LEFTTOP { top: 140px; left: 290px; width: 338px; height: 250px; background: #ABABAB; } #TABLE { top: 450px; left: 290px; width: 600px; height: auto; background: #ABABAB; } #navigation { top: 148px; left: 168px; width: 130px; } scrollbar-face-color #0E243Ascrollbar-track-color #98BFE7scrollbar-highlight-color #98BFE7scrollbar-shadow-color #0E243Ascrollbar-3dlight-color #ffffffscrollbar-darkshadow-color #000000scrollbar-arrow-color #98BFE7 h1 { font: 60px Verdana; color: #CACACA; text-align: center; background-color: #7A7A7A; letter-spacing: -2px; word-spacing: 10px; padding: 0px; padding-top: 2px; padding-bottom: 12px; margin: 0px; border: 10px solid #1C1C1C; width: 100%; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #333232; letter-spacing: 3px; padding: 2px; border: 1px solid #000000; } a:link, a:active, a:visited { font-weight: bold; color: #000000; text-decoration: none; text-transform: uppercase; } a:hover { color: #FFFFFF; } a.n:link, a.n:active, a.n:visited, a.n2:link, a.n2:active, a.n2:visited { font: 14px trebuchet ms; font-weight: bold; color: #000000; text-decoration: none; text-align: center; background-color: #D9D9D9; display: block; padding: 1px; padding-right: 1px; margin-bottom: 4px; width: 130px; border-right: 10px solid #141414; border-left: 10px solid #141414; } a.n2:link, a.n2:active, a.n2:visited { margin-bottom: 1px; } a.n:hover, a.n2:hover { letter-spacing: 3px; } .sf, td { } </style> <h1><center><a name="top"><font color="#000000">Page Title</font></a></center></h1>

Petpage made by Mackenzie.

header

Put your text here!

header

Put your text here!

header

Put your text here!

header

Put your text here!

header

Put your text here!

Back to top

Style Seven

Style Seven has two scrollbars to write in. I really like how this one turned out.

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } body { background-color: #E4D597; } #TOP, #BOTTOM, #NAV { position: absolute; } #TOP, #TITLE, #BOTTOM, #NAV { margin: 6px; padding: 6px; } #TOP { top: 120px; left: 320px; width: 575px; height: 150px; background: #DA9D41; border: 2px solid #000000; } #BOTTOM { top: 350px; left: 320px; width: 575px; height: 150px; background: #DA9D41; border: 2px solid #000000; } #TITLE { top: 8px; position: absolute; left: 360px; width: 475px; background: #E4D597; border: 2px solid #E4D597; } #NAV { top: 75px; left: 260px; width: 675px; height: 30px; background: #E4D597; border-top: 5px solid #88A760; word-spacing: 10px; letter-spacing: 3px; } scrollbar-face-color #0E243Ascrollbar-track-color #98BFE7scrollbar-highlight-color #98BFE7scrollbar-shadow-color #0E243Ascrollbar-3dlight-color #ffffffscrollbar-darkshadow-color #000000scrollbar-arrow-color #98BFE7 h1, .pa { color: #000000; font-size: 60px; font-weight: bold; font-family: georgia; text-align: left; } h2 { font: 8pt georgia; color: #FFFFFF; text-align: left; background-color: #516338; letter-spacing: 3px; padding: 2px; border: 1px solid #000000; } a:link, a, .pa, a:visited, a:active { color: #542E95; text-decoration: underline; font-size: 10pt -blocked-; } a:hover { color: #000000; text-decoration: underline; letter-spacing: 5px; } .sf, td { } </style> <div id="title"> <h1><center><a name="top"><font color="#000000"><i>Page Title</i></font></a></center></h1> </div> <div id="nav"> <center> <a href="/myaccount.phtml">account</a> <a href="/petcentral.phtml">central</a> <a href="/explore.phtml">explore</a> <a href="/games/arcade.phtml">games</a> <a href="/neoboards/index.phtml">boards</a> <a href="/objects.phtml">shops</a> <a href="/nf.phtml">news</a> <a href="/video/index.phtml">video</a> <a href="/mall/index.phtml">nc mall</a> </center> </div> <div id="top"> <h2>main section header</h2> <div style="width: 495; height: 145px; overflow: auto; background-color: #A9D2C4; border: -blocked- 2px solid #000000;" align="center"> <h2>header</h2> <center>Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! </center> </div> </div> <div id="bottom"> <h2>main section header</h2> <div style="width: 495; height: 145px; overflow: auto; background-color: #A9D2C4; border: -blocked- 2px solid #000000;" align="center"> <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! <h2>header</h2> Put your text here! </div> <center>Petpage made by <a href="http://www.neopets.com/~macks_css">Mackenzie</a>. <p><a href="/~macks_css#top">Back to top</a> </p> <h2><a name="topic10"><font color="white">Lookups</font></a></h2> CSS userlookups, see an example <a href="http://www.neopets.com/userlookup.phtml?user=kenzie1270177">here</a>. <p><img src="http://i579.photobucket.com/albums/ss238/SherFam/csslookup1.png" width="170" height="162" alt="Marvelous Mauve"><br><textarea><style></style> #footer, #header{display:none;} #main, .content{border:none;background:none;} #stats{width:700px;background:none;} body{background-color:#291028;} #table{position:absolute;top:0px;left:240px;width:720px;background-color:#FFDCFE;} h1{width:677px;background-color:#D3B1D2;border-bottom:3px solid #7D297D;border-top:3px solid #7D297D;border-right:3px solid #7D297D;border-left:40px solid #7D297D;font:60pt perpetua;line-height:80px;color:#682268;margin:0px;} h2 { font: 8pt georgia; color: #FFFFFF; text-align: center; background-color: #4D3A8C; letter-spacing: 3px; padding: 2px; border: 1px solid #76529A; } .contentModuleHeader, .contentModuleHeaderAlt{color:#FFFFFF;background-color:#471F46;} .contentModuleTable, .contentModuleContent, .contentModule{ border:none;background-color:#FFDCFE;} #userneopets img { filter: alpha(opacity="65"); opacity: .90; } .medText, td{color:#000000;} a:link, a:visited{color:#D794DC;text-decoration:none;} a:hover{color:#000000;text-decoration:underline;letter-spacing:5px;} /> <div id="table"> <h1>HEADER</h1> <h2>|<a href="/myaccount.phtml">My Account</a>|<a href="/petcentral.phtml">Pet Central</a>|<a href="/explore.phtml">Explore</a>|<a href="/games/arcade.phtml">Games</a>|<a href="/neoboards/index.phtml">Boards</a>|<a href="/objects.phtml">Shops</a>|<a href="/nf.phtml">News</a>|<a href="/video/index.phtml">Video</a>|<a href="http://ncmall.neopets.com/mall/shop.phtml?page=">NC Mall</a>|</h2> <p>TEXT HERE TEXT HERE TEXT HERE </p> <p>Lookup made by <a href="/~macks_css">Mackenzie</a>. </p> <div id="stats"><table><p><img src="http://i579.photobucket.com/albums/ss238/SherFam/colorscheme1.png" width="179" height="79" alt="Beachy"><br><textarea><style></style> #footer, #header{display:none;} #main, .content{border:none;background:none;} #stats{width:700px;background:none;} body{background-color:#BEDAE6;} #table{position:absolute;top:0px;left:240px;width:720px;background-color:#DED5AF; border:1px solid #000000} h1{width:677px;background-color:#8E7C37;border-bottom:3px solid #413919;border-top:3px solid #413919;border-right:3px solid #413919;border-left:40px solid #413919;font:60pt perpetua;line-height:80px;color:#F2E6B4;margin:0px;} h2 { font: 8pt georgia; color: #FFFFFF; text-align: center; background-color: #2B5843; letter-spacing: 3px; padding: 2px; border: 1px solid #09301E; } .contentModuleHeader, .contentModuleHeaderAlt{color:#F2E6B4;background-color:#413919;} .contentModuleTable, .contentModuleContent, .contentModule{ border:none;background-color:#FFFFFF;} #userneopets img { filter: alpha(opacity="65"); opacity: .90; } .medText, td{color:#000000;} a:link, a:visited{color:#000000;text-decoration:none;} a:hover{color:#000000;text-decoration:underline;letter-spacing:5px;} /> <div id="table"> <h1>HEADER</h1> <h2>|<a href="/myaccount.phtml">My Account</a>|<a href="/petcentral.phtml">Pet Central</a>|<a href="/explore.phtml">Explore</a>|<a href="/games/arcade.phtml">Games</a>|<a href="/neoboards/index.phtml">Boards</a>|<a href="/objects.phtml">Shops</a>|<a href="/nf.phtml">News</a>|<a href="/video/index.phtml">Video</a>|<a href="http://ncmall.neopets.com/mall/shop.phtml?page=">NC Mall</a>|</h2> <p>TEXT HERE TEXT HERE TEXT HERE </p> <p>Lookup made by <a href="/~macks_css">Mackenzie</a>. </p> <div id="stats"><table><p><a href="/~macks_css#top">Back to top</a></p></table></div> </div>