The CSS Express

account | central | explore | games | boards | shops | news | video | nc mall

Navigation

More CSS
Home
Sitely
Exit

Style Three

There are four, yes FOUR, boxes to write in. There's a lot of room!

<style>
BODY, TABLE, TD {
	font-family: Verdana;
	font-size: 8.5pt;
}
body {
	background-color: #EE8F8F;
}
#RIGHTTOP, #LEFTTOP, #LEFTBOTTOM, #RIGHTBOTTOM, #NAV {
}
#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;
	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/~zuicie">Mackenzie</a>.
</div>

Style Four

Style Four, my favorite one. It has three columns, as well as a place to put a banner.

<style> BODY, TABLE, TD { font-family: Verdana; font-size: 8.5pt; } BODY { background-color: #9D70BF; } #RIGHT, #LEFT, #CENTER { } #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 { 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/~zuicie">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 </div>

Style Five

Style Five has two boxes, both with scrollbars, to write in.

<style>
BODY, TABLE, TD {
	font-family: Verdana;
	font-size: 8.5pt;
}
body {
	background-color: #E4D597;
}
#TOP, #BOTTOM, #NAV {
}
#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;
	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/~zuicie">Mackenzie</a>.

</center>
</div>

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions