Petpage Help

[linsta]

So I decided that I would like to eventually make custom layouts for all my petpages/lookups/etc, and here is my first attempt.

http://www.neopets.com/~azuzephrie

 

I used this to make an avatar application page. It's very graphics heavy, and I realize I probably should've made it simpler and easier to navigate but I had this idea in mind and I really wanted to make it work.

 

So I don't know too much about coding. I know a bit of css and how to use div tags so I pretty much just did that. I noticed a lot of petpages use tables. Is that better than using divs? I made this on dreamweaver and it runs fine when I test it in IE and firefox (at least for me), but on a petpage it doesn't work at all.

 

I'm having 3 main problems:

 

1. Scrolling: I don't want the page itself to scroll (both vertical and horizontal), because the image I placed above the text scrolls with the page, and I want it to match the background in its position. However, I do want the boxes themselves to scroll (just the right box, not the left one). In my original code I had:

 

 

 

#main{

width:828px;

background-image:url(http://img.photobuck...vatars/main.png);

height: 90%;

padding: 0;

margin: -20 90px 0 90px;

background-repeat: repeat-y;

background-position: center;

overflow-y: hidden;

}

 

#left {

width: 198px;

float:left;

background-image:url(http://img.photobuck...Avatars/box.png);

border: 1px solid #7a6b79;

margin: 0 0 0 24px;

padding: 0;

height: 100%;

overflow-y: hidden;

}

 

#right {

width: 559px;

float: left;

background-image:url(http://img.photobuck...Avatars/box.png);

border: 1px solid #7a6b79;

margin: 0 0 0 10px;

padding: 0 5px;

height: 100%;

overflow-y: scroll;

}

 

 

 

Where main is the transparent white container box that goes around the banner and other boxes, and left and right are the smaller boxes inside it.

 

2. Anchor links within a scrolling div: this doesn't work on a normal webpage either. I have links at the top that refer to anchors within the right div. When you click on them, it scrolls the whole page down. This is a problem because it pushes the top of my page (banner, menu, etc) off of the page, and you can't scroll back to it (I guess because I tried to disable page scrolling?). Is there a way I can make it so it just goes to the link in the div without the whole page moving?

 

3. Neopets header/footer: this is also related to the scrolling. Even though I tried to disable page scrolling, it still scrolls a little bit and I think it's because of the neopets header/footer. When I preview my petpage, it's fine and doesn't do that, but there's no header and footer in the preview, so I think that's why it's still scrolling.

 

I tried using these codes to get rid of it, but they're not working. (I probably don't need all of these, but since one didn't work I just tried a few):

 

 

 

#main {

margin-top: 0px;

}

#header, #footer {

display: none;

}

 

 

 

Anyways, at the worst, I could get rid of the overlay image, since it's rather big in size and makes the page harder to navigate anyways, but I'd like to try to keep it as it is since I put a lot of work into it trying to work around these issues.

 

If any help would be great! Also, sorry if my code is messy or something. I only know a little bit of css and I don't really know the best way to go around coding things ^.^;

 

Also, if you have any tips, that would be awesome too since I'll probably be making more of these, as well as userlookups (which looks a lot more complicated D=)

 

--------------

 

Edit: I changed how the overlay image was displayed so that it stays on the bottom and doesn't scroll with the page anymore. This also effectively hides the footer, but it's still there and I would prefer to get rid of it.

 

I also managed to get rid of the footer/header by adding:

 

table{

display: none;

}

 

Not sure if this is the best way to do things, but I figured since I used divs and no tables, I'd be safe doing that =/

 

-------

 

Edit: I've fixed all these problems now ^.^. Don't worry about replying.



This topic has been edited by a member of staff (Anime).

The original topic had been answered.

Please check your user inbox to see if you have been contacted regarding this topic.

Per the reason above, this topic has been LOCKED. Please contact Anime if you have any questions regarding this action.