I want to start coding my pet profiles, but the tutorials on here are very confusing for me. When I try to plug in CSS codes given in the threads, the profile doesn't seem to display right (if it even displays anything at all). A lot of words start piling up on each other, the minion of my pet will overlap on my pet's name or information, her stats completely disappear, and when I manage to get things to display so that the minion is below the pet, text is to the side, and the treasure is on the bottom of the page...the minion is off center in a way that really messes with me.
What I'm trying to do: --get rid of the top bar and side bars so the page is clean (that includes the hustler thing). --Display my pet on the left of the page --Display her minion beneath her, somewhat centered if possible --Have a text box to the right of her and the minion in a middle column --Have a third column on the right of that column which displays her stats and information --Have her treasure along the bottom in a row beneath these three columns
It's really a simple, clean layout if you really think about it, I'm just having the worst time figuring out how to code it correctly. Here's a picture of what I'm trying to describe, I used mspaint to kind of draw it up real quick: https://sta.sh/0juh83sjce5
I don't have a background in mind yet. I'd rather get everything else set up first. I am looking to either commission someone to draw a background with Raiya at the bottom right corner, maybe taking a walk with Kimba or something, or else butterflies, but I haven't decided yet. If you can help give me tips on how to make this stuff happen I'd really appreciate it. It's frustrating for me because it feels like this ought to be simple but I'm having so much trouble that I just scrapped all my progress because things weren't lining up properly. I would like to be able to enter my pet Raiya in the pet spotlight but I can't enter her or any other pet of mine until I fix up her profile.
EDIT: not included in my linked pic because this is an afterthought, but it would be cool if I could have a banner above the three columns too. Raiya doesn't have any Pet Friends so I don't want the Pet Friend thing to display, either. EDIT 2: I went back in and added the little bit of code to try and at least get rid of the header/sidebar/hustler etc. and also attempted to move the minion again, but you can see why I'm having an issue. p l s h e l p
Which tutorials have you tried so far? It's been a while since I've made a pet profile, but I know that a lot of the codes have changed so it might be that the topic you're following is outdated. You can always try to experiment with some premades, to start with. SubetaLodge has a bunch of free pet profiles, but I don't know if they still work.
In regards to your questions:
{
position: absolute;
top: 0px; left: 0px; /change numbers to where you want to position it/
} {
position: absolute;
top: 420px; left: 0px; /change the numbers to where you want to position it, top-value should be at least the height of your pet's column (so column_2)/
}, {
width: 300px; /change the number to how wide you want the columns to be/
}{ width: 100%; background-position: center; background-repeat: no-repeat; }
I hope that helps you out a bit more!
That helped a lot, but when I try to edit the code like you said for getting the description in the middle, it didn't end up moving the description at all. Sometimes, even when I didn't have it below the coding that displays the text I want, it displays the coding as text instead! Here's how my coding looks so far (probably very archaic and I haven't changed the numbers you originally listed yet as I'm playing with where the images end up when I do, currently):
I left out the description coding since it wasn't working, so for now this is how the page actually displays.
Strange, it seems to work when I add this {
background: red;
position: absolute;
top: 500px; left: 0px;
}
See Hector for an example. I did have to add a closing tag for your "text" div, maybe it's that?
Ahhh, there was a misunderstanding! When I said I wanted the description to appear in the middle, I didn't mean beneath the pet and her minion! I meant for the description to appear to the right of the pet-and-minion. So the pet and minion are on the left of the page (with the minion centered beneath the pet, which is now perfect and completed), the description appears to the right of the pet in a column in the center of the page, and then to the right of the description I want the stats to appear. So far the stats appear on the right of the pet which is a good start, but the description is like beneath the stats, which I can't seem to move right. Thanks for your example because that clears up at least a bit!
I do have an example image of what I'm going for but I had to use deviantart's stash system thing to upload it because I wasn't sure how to post it on subeta: https://sta.sh/0juh83sjce5 I hope this clears up a little what I'm trying to go for.
Maybe I wasn't clear enough in my first reply, but you have to move all sections around, not just the ones I put in the code block. If you read further, you can see I mentioned which other selectors you need to move the other blocks around ;) I already saw you stash image in your first post, which is why I mentioned those.
See this , , , {
padding: 0;
}
{ background: red; width: 300px; position: absolute; top: 0; left: 300px; }
{ background: green; width: 300px; position: absolute; top: 0; left: 600px; }
{ background: blue; width: 900px; position: absolute; top: 600px; left: 0; } See Hector for a live example.
Okay, I somewhat understand. I tried out that coding too. My only questions are...why does this coding move the columns like this? It seems like column 2 refers to the minion, 1 to the pet, and 3 to stats...at least from what I'm figuring out. How do I use numbers to move things around the page? I'm sorry, I'm a real newbie to coding stuff with CSS. I really appreciate your help!
It's because those sections have those names as their ID"s. If you use your browser's element inspector (usually done by right clicking somewhere on the page and then choosing something along the lines of "inspect element"), you can see how the page is made up of different elements. The numbers don't mean anything beyond that it's their name. So using column_4 wouldn't do anything because there's no column_4 in the code.
I hope I explained that clearly, sorry if I didn't!
Ahhh, I see. It's starting to make more sense now. I think I managed to put my minion off center beneath my pet when updating the code again somehow, when I got the description in the center. I did manage to edit a youtube video player to be smaller and fit in the description column as well as a gif now, but the column is dipping down underneath her treasure box. Is there a way I can shorten the column and add a scroll bar? I was hoping for the pet+minion column to be the same size as the description column and the stats column without dipping below the treasure ^^;
I was also wondering if it's possible to make an image display beneath the stats, or if all such images will have to end up in the description column? (I would actually like to have the looping gif that's currently stuck under the treasure box, to appear beneath the stats if I can get it to do that)
Your help has been amazing so far and really helped change how her page looks. I added a background too and think it's starting to look like I had hoped it would if you would like to see the progress! Raiya's Page
Pet minion: Column_1 and column_2 need to be the same width, if you want it to centre properly. Right now it's 150px and 200px respectively, but you need to make column_2 200px wide as well.
Column with scrollbar:
Simply declare a height. Because the pet_desc doesn't have a set height, it'll just make it however long your content is. So something like this {
height: 400px;
}You'll have to adjust the height to what want, of course.
Image beneath stats
You can do that, but then you need to put the description and the image in different containers. So something like this
{
width: 200px; height: 400px;
position: absolute;
top: 0px; left: 0px;
}
{
width: 200px;
position: absolute;
top: 0px; left: 0px;
}
If you do this, you'll have to delete the pet_desc code that declares height and position.
I'll try it out; however, does that mean that I cannot set a height and position for things if I place the image under the stats bar? I am a little confused by your statement there. Thank you for your continued help!
I meant that if you use the "image beneath stats"-part, you should not use the "column with scrollbar"-part. Because if you combine both, you will be unable to move the image to the correct position. You can still have a scrollbar, just not on the pet_desc element. You'll need to put it on the box_description, but my example code already provides the scrollbar ;).
So you mean, don't use the scrollbar on the stats part, but I can use the scrollbar on the other part? Heh, ten years ago I used to be such a whiz with html, but CSS is such a new animal for me. I'll start tampering with the page again to see if it works!
EDIT: Heh, shoot, I can't seem to figure out where to place the code to make it display correctly. I'll go ahead and show what my coding currently looks like:
{ width: 200px; height: 400px; position: absolute; top: 0px; left: 0px; }
{ width: 200px; position: absolute; top: 0px; left: 0px; }
No, I mean that if you use multiple sections in the pet description, then you should put a scrollbar on each individual section that you make and not on the pet description. Because otherwise you won't be able to move those sections out of the pet description box. To set a scrollbar, you just need to make the height of the box smaller than the content of the box.
Concerning your code, you need to put all of the CSS between those style tags. Never put it in your normal code. I see you have a couple of CSS codes after you close your style tag and also a CSS tag as the contents of your box_description div. If you move all of those in between the style tags instead, it should work :)
Like this?
No, you put HTML code in your style-part, you only need to put the CSS codes in them, like in this
I tried that, but it makes the gif appear overtop of the video box instead of beneath the stats. https://subeta.net/previewpetprofile.php?pet=Raiya
I don't see any code on your pet profile? Also, yes, it probably would appear there, since you still have to adjust the values for positioning. Like with the other code I gave, the values are just 0. So you need to adjust the top and left values for box_image until it's where you want it to be.
Whoops, tha's weird. I pressed the update thing and I guess it somehow messed up. I'm not sure what happened but I'll fix it. How do I know how the numbers work? Like, do I just keep guessing until things move where I seem to want them? And how do I know if it displays right on other people's screens?
At the top of the pet description page, it says
As for the numbers, you either calculate it (based on the widths and heights you've used previously) or you preview it with the element inspector. In your browser, right click on an element and then choose "Inspect" (or some text like it). This should pop open a console at the bottom of your browser, where you can see the HTML (on the left side) and the CSS (on the right side) of your selected element. Using the HTML panel you can view the page's source code and select other elements. Using the CSS panel, you can modify CSS properties to preview them. Warning: This does not modify your CSS. So you'll still have to enter the values into your CSS file and save it.
As for other people's screens, you can use the responsive mode that's included in your browser, or ask other people how it looks. There are a ton of tools for getting previews of your page. Those (and where the responsive mode is in your browser) can be found via Google :)