CSS/HTML help needed!

[Hert123]

Hi!

I recently started to think of coding my userlookup and petpages because I know a bit HTML (created my own website for a school assignment) and I thought it looked really cool. I got some premade templates for my user lookup and two petpages but I need some help.
On some user lookups you can see more than 5 pets displaying, although they're not all on the same account because this is impossible. I want to know how that works and what code you need to have to show more Neopets!

If you could help me out, answer this topic or send me a Neomail. I really want to know how it works!

My user lookup is CSS.

Thanks in advance!

xx Tess

 

ps. sorry if this isn't the right place to post this question but I thought it's about coding for Neopets so..

[Xepha]

The first step would be to create an image the same width as the neopets box where you mimic the placement of the extra pets you want to display. When you are done with that image, I can take a look at integrating it into your premade.

[Hert123]

I only had a basic HTML course and I know how to place an image and how to size it, but I have no clue on how I can fit it in my premade without messing up the whole thing.

[Xepha]

Borrowing from Emily's lookup:

#userneopets .contentModuleTable {
	background: url("http://i.imgur.com/LxlC90j.jpg") -20px 0px no-repeat;
	width: 1000px;
	height: 1000px;
	padding: 0px 0px 0px 0px;
}

What it means is that you set up a separate background for your neopets inbox, which is a big image with all your pets.

[Hert123]

I copy/pasted it into my user lookup code and now I kinda understand what it does..

You have to make it an image and put it under:
#userneopets .contentModuleTable {
background: url("img url")

 

right?

 

If so: how do I make it an image? Just copy all my Neopets pictures, put it in Paint and save it?

 

EDIT

I managed to do something with paint (http://imageshack.com/a/img843/8951/lem2.png) and was lucky enough to have a white background. I took the code you gave me Xepha and edited it with my own image and edited the height/width. It's looking pretty good now!

http://www.neopets.com/userlookup.phtml?user=hert123_7_7

[Xepha]

Yup, you did perfect!

 

There are other free image editor you could use to make something fancier (GIMP, pixlr.com )

[Hert123]

Thanks for your help Xepha! I wouldn't have figured out myself :)

[marmota1512]

Hi!! I have a question regarding CSS coding... I've seen petpages with different tabs at the top (screenies, wishlist, etc..) that take you to the same petpage (/~sameurl) but it looks like you've changed tabs and you can't see the content on the tab you were before(I don't know if I'm making myself clear...) does anyone know how to put up something like this?

[Hert123]

I think you mean that when you click a link on Neopets, it's still on Neopets, but you see different things? I don't know how to code it, but I think it is a ''main page" (which loads when you first click the page) including several links, which when you click them, load a different text on the main page. At least, that's what I did when making my website with HTML.

[marmota1512]

yeah kinda like what you're saying, I've seen some that are like: /~something and then /~something#faq and the faq tab takes you lower of the main page, but what I want is hitting the tab and instead of taking me lower it takes me to another page but in the same url (/~something#faq)

[Hert123]

It didn't really took you to another page, it just showed you another page. Maybe you can Neomail the owner of the page you saw it? Maybe they can help you out :)

[Mouseykins]

Hi!! I have a question regarding CSS coding... I've seen petpages with different tabs at the top (screenies, wishlist, etc..) that take you to the same petpage (/~sameurl) but it looks like you've changed tabs and you can't see the content on the tab you were before(I don't know if I'm making myself clear...) does anyone know how to put up something like this?

What you're looking for is called page anchors. This is something I've been meaning to play around with but haven't had time.

I use this website for a resource when I'm coding and I find it to be really helpful. http://www.w3schools.com/

You could also try doing a google search.