Ethelune Posted April 30, 2011 Share Posted April 30, 2011 So, after weeks of grueling copy-and-paste work for the 1,980 books my Rowanan has yet to read... I'm finally done with his pet page! :laughingsmiley: Here's a preview of the final product. It's not the best work I've ever done... but, since it's been years since I've coded HTML, I'm pretty happy with the result: Image removed. The only problem is, once I attempted uploading the page, the layout was completely destroyed... which I suspected might happen, since Neopets seems to be rather nit-picky about what specific codes do and do not work on their site. :S If I posted the HTML, would any of you folks be interested in helping me find the problem? Even if the code can't be fixed to fit Neopets's standards, I won't feel like all that work was wasted. The page still makes a nice checklist to help me keep track of what books Rowanan has yet to read without constantly running to JellyNeo for help. ^_^ Quote Link to comment Share on other sites More sharing options...
ahtaxotep Posted April 30, 2011 Share Posted April 30, 2011 I can't help with the HTML sorry, but I wanted to tell you your page looks amazing! It's very slick and accessable. It's also kind of scary to see an illustration of how much work has to go in to winning a book trophy -_- Quote Link to comment Share on other sites More sharing options...
Ethelune Posted April 30, 2011 Author Share Posted April 30, 2011 Thank you for the compliment! :laughingsmiley: It is a little intimidating, especially since I'm nowhere near a millionaire. I recognize that Rowanan will likely never win the award... but what's the fun in just not trying? ;) Quote Link to comment Share on other sites More sharing options...
Syrin of Neopia Posted May 1, 2011 Share Posted May 1, 2011 I could try & help if you posted the HTML. I've been troubleshooting my new layout (I'm still using base coding from SunnyNeo so I'm nowhere near making HTML & layouts from scratch yet) but I've had some recent experience with Neopets & coding issues :D Quote Link to comment Share on other sites More sharing options...
Ethelune Posted May 1, 2011 Author Share Posted May 1, 2011 In all honesty, I used SunnyNeo for help with the basics, too... so no worries. ;) Thank you for offering to help! <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; background-color: #5F554B; background-image: url("http://i485.photobucket.com/albums/rr219/EtheluneDreamsong/background.png"); background-repeat: repeat-y; font-family: arial, serif; color: #000000; font-size: 12px; } header { background-color: #554B41; border: #000000 1px solid; text-align: center; height: 30px; font-family: georgia; font-weight: bold; font-size: 14pt; color: #FFFFFF; letter-spacing: 1px; line-height: 30px; } a:link, a:visited, a:hover, a:active { color: #4B73C3 } table { align: center; border: 0px; border-spacing: 10px 0px; } tr { height: 80px; } td { border-color: #000000; border-width: 1px; border-style: solid; background-color: #FFFFFF; text-align: center; width: 80px; } </style> <html><body> <div style="position: absolute; top: 0px; left: 110px; width: 410px; height: 460px; z-index: 2;"> <img src="//images.weserv.nl/?url=http://i485.photobucket.com/albums/rr219/EtheluneDreamsong/header.png"> </div> <div style="position: absolute; top: 50px; left: 530px; width: 490px; height: 410px; z-index: 1; line-height: 20px;"> <center><header>Rowanan's Wish List</header><br> <a href="http://www.neopets.com/petlookup.phtml?pet=Rowanan">Rowanan</a> has <b>1,980</b> books to read!<br><br> In my spare time, I've decided to compile a list of all the books Rowanan has yet to read, in order to help him reach the goal of winning the Neopian and Booktastic Book Awards.<br><br> <table><tr> <td><img src="https://images.neopets.com/games/trophies/trophy_books_read_1.gif"></td> <td><img src="https://images.neopets.com/games/trophies/trophy_booktastic_books_1.gif"></td> </tr></table><br> Included in the list are books eligible for the Neopian and Booktastic Book Awards. Books are organized alphabetically, with the title shown in alt text over the respective image.</center> </div> <div style="position: absolute; top: 430px; left: 210px; width: 810px; z-index: 2; line-height: 10px;"> <center><header>Books, Z</header><br><br> <table><tr> <td><img src="https://images.neopets.com/items/boo_zafara_z.gif" title="Z Is for Zafara"></td> <td><img src="https://images.neopets.com/items/book_zafaraart.gif" title="Zafara Art"></td> <td><img src="https://images.neopets.com/items/book_zafara1.gif" title="Zafara Crossword Puzzles"></td> <td><img src="https://images.neopets.com/items/book_zafaradetective.gif" title="Zafara Detective"></td> <td><img src="https://images.neopets.com/items/boo_zafara_keepfit.gif" title="Zafara Keep Fit"></td> <td><img src="https://images.neopets.com/items/book_zafaralore.gif" title="Zafara Lore"></td> <td><img src="https://images.neopets.com/items/book_zafaramystery.gif" title="Zafara Mystery Collection"></td> <td><img src="https://images.neopets.com/items/book_zafarawar.gif" title="Zafara War"></td> </tr></table><br> <table><tr> <td><img src="https://images.neopets.com/items/boo_aisha_robozap.gif" title="Zap the Robot Aisha"></td> <td><img src="https://images.neopets.com/items/bbo_lb_zarexdiary.gif" title="Zarex Diary"></td> <td><img src="https://images.neopets.com/items/boo_zombiegravebook.gif" title="Zombie Grave Book"></td> <td><img src="https://images.neopets.com/items/boo_zombiehandbook.gif" title="Zombie Handbook"></td> <td><img src="https://images.neopets.com/items/boo_zombieskullbook.gif" title="Zombie Legends"></td> <td><img src="https://images.neopets.com/items/book_unizombie.gif" title="Zombie Unis"></td> </tr></table><br><br> <div style="position: relative; top: 0px; left: 0px; width: 810px; z-index: 2; line-height: 20px;"> <header>Recognition</header><br> Any and all book donations made in support of Rowanan's quest for the Neopian and Booktastic Book Awards will be credited! The user's name, as well as the title donated, will be listed here. Donations are always appreciated!<br><br> Thank you, <a href="http://www.neopets.com/userlookup.phtml?user=bunny_and_pengie">Haley</a>, for all the support you've given me over the years!<br><br> Page designed and coded by <a href="http://www.neopets.com/userlookup.phtml?user=ethelune">Ethelune</a>. Credit for coding help goes to <a href="http://www.sunnyneo.com/">SunnyNeo</a>, while credit for the book checklist goes to <a href="http://www.jellyneo.net/">JellyNeo</a>.<br><br></center> </div></div> </body></html> I cut out the majority of the page, but the code above has all the key components. It seems Neopets has the biggest issue with the headers; otherwise, the code doesn't seem to work too badly. Also, I wanted to ask if Neopets has character limits for pet pages? I thought that was restricted only to profiles, but the preview was cut off somewhere in the A's. That would basically make the layout useless, unless I could magically obtain 1,900 books with my limited funds. x_x Quote Link to comment Share on other sites More sharing options...
Syrin of Neopia Posted May 1, 2011 Share Posted May 1, 2011 In all honesty, I used SunnyNeo for help with the basics, too... so no worries. ;) Thank you for offering to help! I cut out the majority of the page, but the code above has all the key components. It seems Neopets has the biggest issue with the headers; otherwise, the code doesn't seem to work too badly. Also, I wanted to ask if Neopets has character limits for pet pages? I thought that was restricted only to profiles, but the preview was cut off somewhere in the A's. That would basically make the layout useless, unless I could magically obtain 1,900 books with my limited funds. x_x I don't see a character limit listed anywhere on the editor for pet pages, so i wouldn't think there is one. I wonder if putting the books up via links or scroll boxes would help, like all the A books in one link or scroll book & so on . . . but I'm not certain. I can't figure out why the headers aren't displaying properly as far as coding is concerned . . . it seems like it isn't recognizing any of the headers, but I'm not sure how to go about fixing that Quote Link to comment Share on other sites More sharing options...
Ethelune Posted May 1, 2011 Author Share Posted May 1, 2011 Aw, okay. Thanks for trying, though..! I really do appreciate it. ^_^ I think I'll tinker with the code for a bit longer... but if it doesn't work, it doesn't work. The page still makes a handy checklist. :) Quote Link to comment Share on other sites More sharing options...
Xepha Posted May 2, 2011 Share Posted May 2, 2011 Replaced your header with h1 and it works :P Also, you will not be able to link to site ouside Neopets.com domain... they will get blocked. If it stops displaying items after a certain point, changes are that your code has an error... so check out for typo. <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; background-color: #5F554B; background-image: url("http://i485.photobucket.com/albums/rr219/EtheluneDreamsong/background.png"); background-repeat: repeat-y; font-family: arial, serif; color: #000000; font-size: 12px; } h1 { background-color: #554B41; border: #000000 1px solid; text-align: center; height: 30px; font-family: georgia; font-weight: bold; font-size: 14pt; color: #FFFFFF; letter-spacing: 1px; line-height: 30px; } a:link, a:visited, a:hover, a:active { color: #4B73C3; } table { align: center; border: 0px; border-spacing: 10px 0px; } tr { height: 80px; } td { border-color: #000000; border-width: 1px; border-style: solid; background-color: #FFFFFF; text-align: center; width: 80px; } </style> <html><body> <div style="position: absolute; top: 0px; left: 110px; width: 410px; height: 460px; z-index: 2;"> <img src="//images.weserv.nl/?url=http://i485.photobucket.com/albums/rr219/EtheluneDreamsong/header.png"> </div> <div style="position: absolute; top: 50px; left: 530px; width: 490px; height: 410px; z-index: 1; line-height: 20px;"> <center><h1>Rowanan's Wish List</h1><br> <a href="http://www.neopets.com/petlookup.phtml?pet=Rowanan">Rowanan</a> has <b>1,980</b> books to read!<br><br> In my spare time, I've decided to compile a list of all the books Rowanan has yet to read, in order to help him reach the goal of winning the Neopian and Booktastic Book Awards.<br><br> <table><tr> <td><img src="https://images.neopets.com/games/trophies/trophy_books_read_1.gif"></td> <td><img src="https://images.neopets.com/games/trophies/trophy_booktastic_books_1.gif"></td> </tr></table><br> Included in the list are books eligible for the Neopian and Booktastic Book Awards. Books are organized alphabetically, with the title shown in alt text over the respective image.</center> </div> <div style="position: absolute; top: 430px; left: 210px; width: 810px; z-index: 2; line-height: 10px;"> <center><h1>Books, Z</h1><br><br> <table><tr> <td><img src="https://images.neopets.com/items/boo_zafara_z.gif" title="Z Is for Zafara"></td> <td><img src="https://images.neopets.com/items/book_zafaraart.gif" title="Zafara Art"></td> <td><img src="https://images.neopets.com/items/book_zafara1.gif" title="Zafara Crossword Puzzles"></td> <td><img src="https://images.neopets.com/items/book_zafaradetective.gif" title="Zafara Detective"></td> <td><img src="https://images.neopets.com/items/boo_zafara_keepfit.gif" title="Zafara Keep Fit"></td> <td><img src="https://images.neopets.com/items/book_zafaralore.gif" title="Zafara Lore"></td> <td><img src="https://images.neopets.com/items/book_zafaramystery.gif" title="Zafara Mystery Collection"></td> <td><img src="https://images.neopets.com/items/book_zafarawar.gif" title="Zafara War"></td> </tr></table><br> <table><tr> <td><img src="https://images.neopets.com/items/boo_aisha_robozap.gif" title="Zap the Robot Aisha"></td> <td><img src="https://images.neopets.com/items/bbo_lb_zarexdiary.gif" title="Zarex Diary"></td> <td><img src="https://images.neopets.com/items/boo_zombiegravebook.gif" title="Zombie Grave Book"></td> <td><img src="https://images.neopets.com/items/boo_zombiehandbook.gif" title="Zombie Handbook"></td> <td><img src="https://images.neopets.com/items/boo_zombieskullbook.gif" title="Zombie Legends"></td> <td><img src="https://images.neopets.com/items/book_unizombie.gif" title="Zombie Unis"></td> </tr></table><br><br> <div style="position: relative; top: 0px; left: 0px; width: 810px; z-index: 2; line-height: 20px;"> <h1>Recognition</h1><br> Any and all book donations made in support of Rowanan's quest for the Neopian and Booktastic Book Awards will be credited! The user's name, as well as the title donated, will be listed here. Donations are always appreciated!<br><br> Thank you, <a href="http://www.neopets.com/userlookup.phtml?user=bunny_and_pengie">Haley</a>, for all the support you've given me over the years!<br><br> Page designed and coded by <a href="http://www.neopets.com/userlookup.phtml?user=ethelune">Ethelune</a>. Credit for coding help goes to <a href="http://www.sunnyneo.com/">SunnyNeo</a>, while credit for the book checklist goes to <a href="http://www.jellyneo.net/">JellyNeo</a>.<br><br></center> </div></div> </body></html> Quote Link to comment Share on other sites More sharing options...
Ethelune Posted May 2, 2011 Author Share Posted May 2, 2011 Thank you so much, Xepha! That worked beautifully. :laughingsmiley: Plus, I found I was missing an ending bracket in one of the tables, which automatically fixed the length issue. ... now, my only problem is that I can't confirm the design while previewing it, as the save button lies underneath the div layer. Any suggestions? x_x Quote Link to comment Share on other sites More sharing options...
Xepha Posted May 2, 2011 Share Posted May 2, 2011 You could try to give a negative z-index to your divs, but be sure it doesn't mess up your layout in other browsers. Quote Link to comment Share on other sites More sharing options...
Ethelune Posted May 2, 2011 Author Share Posted May 2, 2011 Boo..! Unfortunately, negative z-indices do not work with my browser. :sad02: Is there any other way I can try and fix the problem? Now that the code works, I'd hate to not be able to upload it simply because the save button is hiding underneath a div layer. Edit: So, the issue with the layers has been fixed... but more problems have arisen in its place. x_x When I save the layout, Neopets warns that the names of classes and IDs must be preceded by a . or #. I've tried both separately, but the tags never recognize them (e.g. I put ".table" in the CSS, but the tables in the layout aren't stylized as they should be). If anyone is still reading this topic... any suggestions..? :S Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.