Janis Joplin Pet Page and Site Layout

Petpage Layout: <style> body { background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage2.jpg") repeat-y; } a:link { color: #FF9900; text-decoration: none; } a:visited { color: #FF9900; text-decoration: none; } a:hover { color: #FF9900; text-decoration: none; } td, p, body { font-family: century gothic; color: #000000; font-size: 15px; } #navlist a { display: block; color: #016F7E; padding: 5px 2px 5px 2px; text-decoration: none; text-align: left; font-weight: bold; font-family: garamond; font-size: 15px; background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage3.png") no-repeat; text-transform: uppercase; } #navlist a:hover { background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage4.png") no-repeat; color: #009900; } .header { color: #B12234; text-align: center; text-transform: lowercase; font-size: 20px; font-family: lucida console; background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage5.gif") no-repeat top center; padding-top: 3px; } table { background: none; } table a img, center p { height: 0px; width: 0px; overflow: hidden; } #cont { background: #F2EEE3; text-align: justify; } </style> <div style="position: absolute; top: 0px; left: 0px; z-index: -1;"> <img src="http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage1.jpg"> </div> <div id="navlist" style="position: fixed; top: 197px; left: 641px; width: 185px;"> <a href="#topic1">Topic 1</a> <a href="#topic2">Topic 2</a> <a href="#topic3">Topic 3</a> <a href="#topic4">Topic 4</a> <a href="#topic5">Topic 5</a> <a href="http://www.neopets.com/~unilone">Credit</a> </div> <div style="position: absolute; top: 295px; left: 44px; width: 588px;"> <p class="header"><a name="topic1">Topic 1</a></p> <div id="cont"> Just change the "Topic 1" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header"><a name="topic2">Topic 2</a></p> <div id="cont"> Just change the "Topic 2" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header"><a name="topic3">Topic 3</a></p> <div id="cont"> Just change the "Topic 3" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header"><a name="topic4">Topic 4</a></p> <div id="cont"> Just change the "Topic 4" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header"><a name="topic5">Topic 5</a></p> <div id="cont"> Just change the "Topic 5" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> </div> Web Layout: <title>Your Site</title> <style> body { background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage2.jpg") repeat-y; } a:link { color: #FF9900; text-decoration: none; } a:visited { color: #FF9900; text-decoration: none; } a:hover { color: #FF9900; text-decoration: none; } td, p, body { font-family: century gothic; color: #000000; font-size: 15px; } #navlist a { display: block; color: #016F7E; padding: 5px 2px 5px 2px; text-decoration: none; text-align: left; font-weight: bold; font-family: garamond; font-size: 15px; background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage3.png") no-repeat; text-transform: uppercase; } #navlist a:hover { background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage4.png") no-repeat; color: #009900; } .header { color: #B12234; text-align: center; text-transform: lowercase; font-size: 20px; font-family: lucida console; background: url("http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage5.gif") no-repeat top center; padding-top: 3px; } table { background: none; } table a img, center p { height: 0px; width: 0px; overflow: hidden; } #cont { background: #F2EEE3; text-align: justify; } </style> <div style="position: absolute; top: 0px; left: 0px; z-index: -1;"> <img src="http://i281.photobucket.com/albums/kk219/jaraya_del/janisjoplinpetpage1.jpg"> </div> <div id="navlist" style="position: fixed; top: 197px; left: 641px; width: 185px;"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="http://www.neo-faeriewings.co.nr">Credit</a> </div> <div style="position: absolute; top: 295px; left: 44px; width: 588px;"> <p class="header">Topic 1</p> <div id="cont"> Just change the "Topic 1" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header">Topic 2</p> <div id="cont"> Just change the "Topic 2" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header">Topic 3</p> <div id="cont"> Just change the "Topic 3" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header">Topic 4</p> <div id="cont"> Just change the "Topic 4" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> <p class="header">Topic 5</p> <div id="cont"> Just change the "Topic 5" text to any other topic title you have! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! Put your text here!Put your text here!Put your text here!Put your text here! </div> </div>

Share |