User profile coding help
Replies
So I want to make a tabbed user profile using the "div inside divs" trick, but my divs keep appearing in my columns
Is there anyway to make them appear without being attached to the "profile" section in the columns?
I want the links to the different divs to be in a different area than the actual information, similar to how has theirs
I hope this made sense, and sorry if this question has been asked and answered before!
; You need to code each section you have in your to where you want it to go. In order for Raichu's profile to work the way it does, she's actually using two columns. Her Profile and Options section are in her first column. Her buttons and comment box are all in either her second or third column, or split between the two.
The coding for a profile like hers is slightly more complex when you're still learning to code. It's not as easy as tossing all your content in one column and positioning the entire column where you want it to go. It's very simple after you've made many profiles though, as it sort of gets stuck in your head and is hard to forget. Like riding a bike.
Her buttons are all in a Blank Section, and each button has a Div ID created for it, and in the CSS is where they're positioned. The comment box itself is actually positioned individually than the column it sits in.
So I should make a blank section in a separate column for the links? o: I think an even closer example to what I'm planning is , since they have actual links instead of fancy buttons
so like blank section for a div then I position the blank section instead of the div?
Thank you so much for responding! Sorry I'm kind of a derp at coding
; Okay, so, Kip's profile doesn't have a scrolling column, so all his links are in the same section as the rest of his info. He's using the second column for his comment box. I've also noticed that he's using tabs for his other information. That's where the code gets a bit more complex than just moving individual sections around. I've only used tabbed sections in one pet profile, so I can't go into very much detail on how they work. I'm also terrible at trying to explain why things work the way they do. They just work, lol.
So really, I can't answer your question until you tell if you want those tabbed sections at the top of his column, or the links on the left side of his column. :p
I'd like to have the ones that he has at the top c:
I plan on putting them on both sides of the word "0rk" on my profile
I plan on removing all the sections I have in my column right now, so I'm going to put a link for mailing and friending in my information box o:
; Okay. Well, this is where I can't really help you that much, as I haven't had enough experience with coding tabbed sections. I will do my best to help you and explain how to do this, but I can't promise that you'll be able to understand me very well LOL.
Take a look at this pet's profile. I made it a while ago, and I really struggled with those tabs. I assume that the code for the pet profile's tabs isn't much different than what you would use in a user profile, if they're different at all.
You can see three links, which when you click on them, you get different sections in the story, just like Kip's profile. In a pet profile, these sections are all a different div. And those three divs all need to be inside another div, which I named 'Container.' I'll paste the code
{
position: absolute;
width: 305px;
height: 202px;
top: 70px;
left: -470px;
overflow: hidden;
}
, , {
display: block;
width: 305px;
height: 202px;
top: 70px;
left: -470px;
overflow: auto;
}
The is what the three divs, , , and are inside. Now, in order to navigate to those sections, you have to have a link for them. The link can simply be text, but in my case, I used images. They're still coded the same.
{
position: absolute;
width: 15px;
height: 64px;
top: 66px;
left: -158px;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
:hover {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
{
position: absolute;
width: 15px;
height: 64px;
top: 131px;
left: -158px;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
:hover {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
{
position: absolute;
width: 15px;
height: 64px;
top: 195px;
left: -158px;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
:hover {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
FORGOT TO EXPLAIN THIS PART
After you've got your CSS all set to go for your tabs, you'll need to link them up. This can be done before or after you create the div sections you need, and it's done using HTML, so the code goes after the < /style > tag.
The content you want can be added using HTML. In the case of the pet profile, I didn't use the pet_desc div, I used my own (). After the < /style > tag is where you put HTML. Here's the code for the tabbed content.
TEXT HERE
Because there is a group of divs inside a div, there is an extra < /div > element. This is required because all elements need an ending tag.
Before I continue, does any of this make sense to you?
EDIT Sorry # Adam! Didn't mean to ping your group!
Yes c: I've made tabbed things before one neo, but it's just weird on user profiles :c
Thank you so much for helping me step by step c:
; The codes you normally use on Neopets are much different on Subeta. I don't play on that site anymore (haven't for a super long time) but I do know that the coding works differently over there. Which is annoying. I think coding on Subeta is easier. :P
You're quite welcome! I hope this makes sense to you, because I'm not at all good at explaining things or teaching people, haha.
But I just realized that I have forgotten to explain to you how I linked the images, so I will edit that post for you. Check it in about 10 minutes. It's important, otherwise your code won't work.
So was I right about putting the divs in a blank section and positioning that? o: That's the part I have the problem understanding >.<
; Well, on a user profile it's a little different. Kip has put everything besides his comment box in his first column, so and he hasn't used any blank sections. So essentially, he's done the same as you would for a tabbed story in a pet profile. The best way to code your profile in a similar way to his is to do it through here, and have your profile open in a new tab so you can refresh it after each update to make sure it looks the way you want. You want to stray away from using the Edit Profile link in the Personal tab and from viewing your profile. It makes it more difficult to code.
I've also updated my post to include how you'd create your links.