Petpage Layout Request ( ; ; I almost feel guilty for asking)

[RenegadeCatastrophe]

Hey everyone, its Ava.

 

So I'm absolutely terrible at HTML (I know basics and I can slightly alter images, add a background, silly stuff like that... even then I spend hours doing it) so I couldn't help myself and decided to make a request.

 

I've been searching for the past two days for a layout for my Shy Lupe Sanctuary but its not working out. I want something that's contained (like in a box... see poorly done diagram below)

______________________

|||||||||||| | Banner ||||||||||||

|||||||||||| |__Banner _|||||||||||||

|||||||||||| | Content |||||||||||||

|||||||||||| | Content ||||||||||||

|||||||||||| | Content ||||||||||||

|||||||||||| |_Content_ |||||||||||||

|||Background||||||||||||||||||||||

|||Background||||||||||||||||||||||

 

 

I like... lots of images and prettyness. I was thinking a Maractite vs. Magma theme? I hope this is making sense.

 

I don't know if there are any awesome "in action" images of a Maractite and Magma lupe... but I'd be infinitely okay with the standard ones (provided below)

 

http://pets.neopets....9s4tmf4/1/4.png

http://pets.neopets....wzxgbjh/1/4.png

 

I think those two together make a beautiful pair (which is why a Maractite lupe is now on my wishlist lol)

 

I really love the Georgia font, I think its really simple and pretty.

 

I'd like Shy Lupe Sanctuary up at the top in really pretty, swirly text.

 

Text example (or you could download and actually use this text which would be awesome)

 

http://www.dafont.co...arry-night.font

 

If you're not sure about backgrounds, I was trying to find HQ, large images of these but it didn't work out so I decided to post them as a reference to what I really like:

http://images.neopet...g_moonstars.gif

http://images.neopet...star_gazing.gif

 

Anyway, I hope I'm not asking something that's beyond ridiculous. I know I'm new and all but I figured I should try. Everyone has their specific talents and HTML is totally not one of mine. Sorry for the really... bad diagram. X.x;; I tried to give as much detail as possible. I hope I gave enough ._.

 

Loves and kisses,

 

Ava Lynn

 

Update: the diagram is a little messed up due to spaces being deleted from posts... but I hope it gets the point across ._.;;

[chiaroscruo]

I'd be more than happy to code it for you, but I'm afraid I wouldn't be able to make a banner. It's not my strong suit (as my userlookup proves :P ). I would probably be able to make a coordinating background if someone else makes a banner though.

[RenegadeCatastrophe]

<3 You're so sweet. Did the diagram help at all? Haha, maybe someone will be banner awesome. I mean I could try to make one... but... *shakes head* that would be a four hour process and I might snap.

[chiaroscruo]

Haha I understand what you're looking for I think. And if not it won't be difficult to tweak. We have an art request board somewhere here at TDN I think. Maybe someone there will help? I can make one as a placeholder but I think you'd be happier with the end result if someone else does that bit :D

[RenegadeCatastrophe]

Haha I understand what you're looking for I think. And if not it won't be difficult to tweak. We have an art request board somewhere here at TDN I think. Maybe someone there will help? I can make one as a placeholder but I think you'd be happier with the end result if someone else does that bit :D

 

:) A place holder would be awesome. Anyway I could know the dimensions ahead of time? I might as well start posting now haha. I actually have better art. I'm so excited! <3 <3 You're my hero by the way haha.

 

Update! I found bigger images of those backgrounds that I love. I don't know if that will help at all. I also made a request for a banner. I feel like I'm going to get smited or something for posting so much. I'm so needy D:

 

https://openneo-uploads.s3.amazonaws.com/outfits/000/240/674/preview.png

https://openneo-uploads.s3.amazonaws.com/outfits/000/240/672/preview.png

[chiaroscruo]

Any size banner will work. The code edit will be fast and easy if the banner you get is a different size, I'll only have to change a few numbers. I think 400x650 is standard(ish) so I'll go with that unless it ends up looking really bad.

 

Those backgrounds will definitely help. I'll stick them in photoshop and see if I can get them up to the size I need without losing quality. Do you care which one I use?

[RenegadeCatastrophe]

I decided to try my hand in this. This is an extremely unfinished product but its going to stay that size. You can use either/or of the backgrounds depending on what looks good with the banner (I'm just adding brush effects and stuff). Tell me if the banner is hideous >_<;; There will be a glow to the font, etc. I just wanted to give you the size for reference. =)

 

As I forgot to post the link -.-;

 

http://i47.tinypic.com/34jf33b.png

[chiaroscruo]

Oh I really like it! Only thing I would suggest is a border unless you want me to use a different image (or solid color) for the page background. Otherwise it won't stand out as well. Also, I can match the border you use to a border behind the content. I'm still sorting out the coding (but it's coming along well) so I haven't touched that part yet. I can use an image, solid color with or without border, or a color with slight transparency so you can see the background through it slightly. Do you have a preference?

 

Edit: If I do use that image (the one on your banner) as the background, I will have to either tile it or put the content in a scrolling div and have the background stay in place. From your picture in the original post it looks more like a scrolling div.

[RenegadeCatastrophe]

Oh I really like it! Only thing I would suggest is a border unless you want me to use a different image (or solid color) for the page background. Otherwise it won't stand out as well. Also, I can match the border you use to a border behind the content. I'm still sorting out the coding (but it's coming along well) so I haven't touched that part yet. I can use an image, solid color with or without border, or a color with slight transparency so you can see the background through it slightly. Do you have a preference?

 

Edit: If I do use that image (the one on your banner) as the background, I will have to either tile it or put the content in a scrolling div and have the background stay in place. From your picture in the original post it looks more like a scrolling div.

 

My mind shut off as I was reading that. But I think I get it. So it'll be (I hope formatting doesn't mess this diagram up):

 

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|HEADERcontentcontentcontentctS|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentconI|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotD|~border~|||||||||||||

|||||||||||||~border~|HEADERcontentcontentcontentctE|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotB|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotA|~border~|||||||||||||

|||||||||||||~border~|HEADERcontentcontentcontentctR|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcon-|~border~|||||||||||||

|||||||||||||~border~|~border~|~border~|~border~|~border~|b~|||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

 

 

||||||||||| = Background lol

 

 

Would there be any way we could do it like this?

 

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||~border~|~border~|~border~|~border~|~border~|b~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|HEADERcontentcontentcontentctS|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentconI|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotD|~border~|||||||||||||

|||||||||||||~border~|HEADERcontentcontentcontentctE|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotB|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotA|~border~|||||||||||||

|||||||||||||~border~|HEADERcontentcontentcontentctR|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcon-|~border~|||||||||||||

|||||||||||||~border~|~border~|~border~|~border~|~border~|b~|||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

 

XD Wow...these diagrams are getting a little intense.

 

Do the diagrams help? I figure its easier to see a picture then just describe what I mean X.x;

 

PS: Would much rather the scrolling div.

 

You're letting my mind run wild which is proving dangerous. I must admit that I've editted this post at least 6 times now.

 

Could we do something like this? http://www.sunnyneo....mples.php?id=51

 

Obviously I would have to create the whole image that the text lays upon (which I'm okay with doing at this point lmao). But my biggest problem with all of the premade layouts... is that the ones that I actually liked... didn't have a navigation bar for multiple pages and I'd seriously need multiple pages. Would I have to photoshop a side graphic for that? Like....

 

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||~border~|~border~|~border~|~border~|~border~|b~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~border~|bannerbannerbannerbannerbanner|~border~|||||||||||||

|||||||||||||~bordNAVIGADERcontentcontentcontentcotS|~border~|||||||||||||

|||||||||||||~bordNAVIGntentcontentcontentcontentconI|~border~|||||||||||||

|||||||||||||~bordNAVIGntentcontentcontentcontentcotD|~border~|||||||||||||

|||||||||||||~bordNAVIGADERcontentcontentcontentcotE|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotB|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcotA|~border~|||||||||||||

|||||||||||||~border~|HEADERcontentcontentcontentctR|~border~|||||||||||||

|||||||||||||~border~|contentcontentcontentcontentcon-|~border~|||||||||||||

|||||||||||||~border~|~border~|~border~|~border~|~border~|b~|||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

 

PSS: If at any time... I'm getting to be too much, please tell me. You can even be like "Girl, I am two seconds away from referring you to a coding tutorial".

 

 

PSSS: If you want a pretty banner for yourself, I can make it for you! ._.; I'm turning out to be a nightmare XD so I have to pay you back somehow. :)

[chiaroscruo]

I can definitely do something like the page you linked. The code is already in place, I'd just have to move things around for the background thing you make. Somehow I managed to throw in something that took away my "save page" option which is obviously not good, but other than that it's nearly done. Once I can save the page I'll link it to you so you can tell me what you want me to change.

 

As for linked nav, I haven't done it in years. I'm willing to give it a go but it may take a bit more time. You can make individual buttons for the links, or you could leave a space on the side of your image that says Navigation and has a blank box underneath for the code. Either way would work. It just depends on how you want it to look. I think leaving a spot on the image would be a lot easier for you :)

 

Don't worry, it's not overwhelming. I've been dabbling in code for years. I like playing around with it. Hopefully I can make it what you want :)

 

Edit: Fixed it. Heres the page I'm testing on: http://www.neopets.com/~Sport_5678

 

The background is just chilling there for now, in case you decide on something different. Since I have the divs set up now it's just a matter of putting in the right graphics.

[RenegadeCatastrophe]

I can definitely do something like the page you linked. The code is already in place, I'd just have to move things around for the background thing you make. Somehow I managed to throw in something that took away my "save page" option which is obviously not good, but other than that it's nearly done. Once I can save the page I'll link it to you so you can tell me what you want me to change.

 

As for linked nav, I haven't done it in years. I'm willing to give it a go but it may take a bit more time. You can make individual buttons for the links, or you could leave a space on the side of your image that says Navigation and has a blank box underneath for the code. Either way would work. It just depends on how you want it to look. I think leaving a spot on the image would be a lot easier for you :)

 

Don't worry, it's not overwhelming. I've been dabbling in code for years. I like playing around with it. Hopefully I can make it what you want :)

 

=) Awesome~ I'm working on the image now. It shouldn't take me too long. Hopefully I can upload it and keep the size.

[chiaroscruo]

Cool. I've had good results using imgur if you can't get tinypic to keep the size.

[RenegadeCatastrophe]

Well... here it is so far. http://i50.tinypic.com/6z7vo0.png

 

Maybe it should just be on a black background? I don't want the page to end up like... SUPER busy. And I have no idea where to put the navigation bar... any sugguestions? ._.;

[chiaroscruo]

I didn't get a notification about this so I forgot to check. Sorry! It looks really nice. I think a black background would be good. As for navigation, you could make a separate image and I can set it off to the side. I've seen some that way, and as long as it has the same border or something to anchor it I think it would look all right. Otherwise I could link the navigation right below the header and above the content as plain text links. The only other option would be to make the whole thing big enough to allow nav next to content, which I don't think you want.

[RenegadeCatastrophe]

I didn't get a notification about this so I forgot to check. Sorry! It looks really nice. I think a black background would be good. As for navigation, you could make a separate image and I can set it off to the side. I've seen some that way, and as long as it has the same border or something to anchor it I think it would look all right. Otherwise I could link the navigation right below the header and above the content as plain text links. The only other option would be to make the whole thing big enough to allow nav next to content, which I don't think you want.

 

Hmmm right below the content sounds like the best idea.

[chiaroscruo]

Okay, here's the preview again: http://www.neopets.com/~sport_5678

 

The anchors are working but do not hide the text. I haven't yet figured out how to do that. I may be able to but I can't promise. But hey, I got working anchors so I'm fairly proud of myself :)

 

The scrollbar is ugly. I hate it. Unfortunately, scrollbar codes only work in internet explorer and I don't have IE installed on this computer so I can't test it. If you want the codes I can throw them in but I won't be able to make sure everything looks right.

 

Let me know what you like/don't like and I'll make any changes.

[RenegadeCatastrophe]

Its beautiful. Is the image centered? X.x; I don't think it is. Would you like the exact demensions? I'm so excited! You're so wonderful. Don't worry about the scroll bar, they always look silly haha.

[chiaroscruo]

It's centered on my screen but we probably have different resolutions. If you tell me the amount left you want it I'll move it over. It's at something like 450 right now I think.

[RenegadeCatastrophe]

I'm not exactly sure how far to move it over but I took a screenshot if that helps XD

 

http://i.imgur.com/wbLYb.png

 

Sorry about not replying, I read the email then forgot (I was in a mean round of faerie bubbles)

[chiaroscruo]

Oh good it is just a resolution difference. Mine's 1440x900 which isn't super common. It's going to look different on every computer but as long as it looks right on yours that's all that counts. Does it look better now? http://www.neopets.com/~sport_5678

[RenegadeCatastrophe]

:O Its amazing! <3 Thank you for everything <3

 

This post has been edited by a member of staff (Crimson) because of a violation of the forum rules.

Please keep your posts at 7 words or above.

Please check your user inbox to see if you have been contacted regarding this incident, then review our rules.

[chiaroscruo]

You are most welcome! Some things I should have noted before, I've set bold/italics/links/etc to be different colors because I just think it looks nice when they're different but if you don't like it you can change the colors or take one or all out with no effect on the rest (a, a:hover, b, and i in the style tag). All the breaks at the very end of the code are because the divs do not push what the page recognizes as content down so without them the "save page" option is hidden under the banner. It's messy coding but I couldn't figure out a better way to do it. The breaks between anchors is just so I could test the anchors, and can be removed.

 

So without further ado, here is the complete code:

 

<style>
body {
background-color: #000000;
}
BODY, font, div, table, td, p, .sf {
color: #444444;
font-family: georgia;
font-size: 10;
font-weight: bold;
}
A {
color: #fafafa;
font-size: 10;
font-family: georgia;
}
A:hover {
text-decoration: none;
color: #c61919;
}
b {
color: #640707;
font: 10pt georgia;
text-transform: lowercase;
font-weight: bold;
}
i {
color: #444444;
font-weight: normal;
}
hr {
width: 300;
height: 2;
color: #640707;
border: 1px solid #444444;
}
.sf {
display: none;
}
table {
background: none;
}
td {
visibility: hidden;
}
#mainbody {
left: 0px;
top: 0px;
z-index: 1;
}
</style>

<div id="tgb" style="position: absolute;"></div>
<div style="position: absolute; top: 15; left: 300; width: 656; height: 966; z-index: -100;">
<img src="//images.weserv.nl/?url=http://i50.tinypic.com/6z7vo0.png">
</div>
<div id="nav" style="position: absolute; top: 0; left: 395;">
<a href="/index.phtml">Home</a> |
<a href="/myaccount.phtml">My Account</a> |
<a href="/games/arcade.phtml">Games</a> |
<a href="/explore.phtml">Explore</a> |
<a href="/nf.phtml">News</a> |
<a href="/petcentral.phtml">Pet Central</a> |
<a href="/neoboards/index.phtml">Boards</a> |
<a href="/objects.phtml">Shops</a> |
<a href="/shop.phtml">NC Mall</a>
</div>
<div id="internalnav" style="position: absolute; top: 450; left: 400;">
<a href="#ANCHOR1">Anchor One</a> |
<a href="#ANCHOR2">Anchor Two</a> |
<a href="#ANCHOR3">Anchor Three</a> |
<a href="#ANCHOR4">Anchor Four</a> |
<a href="#ANCHOR5">Anchor Five</a> |
<a href="#ANCHOR6">Anchor Six</a> |
</div>
<div id="mainbody" style="position: absolute;"></div>
<div style="position: absolute; top: 470; left: 350; width: 550; height: 450; z-index: 1; overflow: auto;">

<center>
<a name="ANCHOR1">
Content for Anchor 1
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="ANCHOR2">
Content for Anchor 2
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="ANCHOR3">
Content for Anchor 3
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="ANCHOR4">
Content for Anchor 4
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="ANCHOR5">
Content for Anchor 5
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="ANCHOR6">
Content for Anchor 6
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></a>

</center>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

 

Hope it's what you were hoping for!

[RenegadeCatastrophe]

Its everything I was looking for! You're so amazing, thank you!!

 

If you need any help with anything or anything at all just let me know. :) I'd totally be willing to make you a Gelert banner or something in return. :)

[chiaroscruo]

Well I definitely wouldn't refuse a new banner for my lookup, but please don't feel like you have to. I genuinely enjoy helping people, reward or not.

[RenegadeCatastrophe]

Same dimensions as the current one? Any specific images you want?

 

:) Its not a reward, its a thank you. ^^