Learning pet profiles...help? (I may be hopeless)
Replies
Okay so I am trying to figure stuff out and so am just winging it...which is why the code in the spoiler is such a mess. I've never done this before. I've fiddled and I understand a bit about html, but css is very hard for me to wrap my mind around.
Here's what I'm trying to figure out:
- How do I make colored boxes around my columns? Is that a div thing? I'm thinking of something like how this looks with the stats and minion and pet image contained on the left side, without the buttons and such. I just want the pet image, the stats, and the minion to be in that kind of...box. If that makes sense. I've seen other people do this too and I can't figure it out.
- I'm having this weird problem where even though I've set the background color to this dark grey, it only changes the colors of the margins? I cannot figure out how I did that.
- I know there's a way to show the names of the tc items, does anyone know what code that is?
- I've hidden all my headers -- is there a way to create alternate headings for sections?
I'm sure I'll add more questions as time passes.
I know I need to add some boarders and stuff to make sense of it, and I'm def working on that.
Here's where my monstrosity lives: [pet not found]
Here's the code I have put together (it is a mess! sorry! I'm learning!)
SPOILER (click to toggle)
<style>
/stuff that is hidden code from CSS Compendium/
, , , , , , {display: none;}
h2 {display: none}
.pet_wco_info_date, , , , , , , , , , , , {display: none}
/font/
/background and colors/ body {background-color: ;}
/positioning/
{position: absolute; top: 200px; left: 170px}
.pet_name {position: absolute; top: -50px; left: 70px}
{position: absolute; top: 800px; left: 170px}
{position: absolute; left: 400px; top: 200px}
{position: absolute; left: 500px; top: 700px}
{position: absolute; top: 500px; left: 40px; height 94px; width 210px;}
</style>
I am testing coding on this page -- hopefully building a custom pet profile. We'll see.
art by
terrible coding by
I'm interested in building a pet profile from scratch -- even if the code is stupid messy -- so that I understand how all of it works....I know I have a long way to go but I'd love some feedback!
Edit: I've continued fiddling here [pet not found] but all I've done is mess with some fonts and successfully get the image into it's own div so it stopped doing whacky stuff.
1- Okay, If you're talking about the grey box then this is accomplished by creating a div then positioning it and sizing it with the required "white space" to place/position the elements to look like their inside but they aren't
for white space in their case they used padding-top and width also in their case for positioning properties "position", "left", and "top" are used
2- For the background colour you need to also target the div with id content (), since it uses the property
3- so to show TC item names add the following inside your style tags:
.treasure_item_name {
display: initial;
}
This causes the value that is set by a different style sheet [display: none;] to be overridden.
4- to get alternate headers is to fake them, like the first point just position them to the correct spot (some cases probably need "white space" to be added)
An Example to desmonstrate (NOTE: Would need work for everything to look nice)
To see this code best to use on your pet [pet not found] since I used her profile to create the below styling/code. So you could replace what you have in your style tags with everything in the style tags below or append everything after the unedited chunk at the end of the css you have, results are the same either way also add the html, no need to remove the html you have.
[spoiler=Code]<style>
/* ---------------- unedited chunk from Sedna ------------------------ */
/stuff that is hidden code from CSS Compendium/
, , , , , , {display: none;}
h2 {display: none}
.pet_wco_info_date, , , , , , , , , , , , {display: none}
/background and colors/ body {background-color: ;}
.pet_name {position: absolute; top: -50px; left: 70px} {position: absolute; left: 400px; top: 200px} {position: absolute; left: 500px; top: 700px}
/* ---------------- end of unedited chunk from Sedna ------------------------ */ { width: 250px; height: 925px; background-color: darkgrey; position: absolute; top: -200px; left: -250px; z-index: 0; border-radius: 0px 0px 15px 15px; }
, , { z-index: 1; border-radius: 3%; background-color: snow; position: absolute; width: 210px; left: 165px; padding-top: 0px; }
{ top: 710px; }
{ top: 70px; }
{ top: 430px; }
/* -------- for point 4 ----- */ .newHeader { z-index: 3; position: absolute; left: -230px; width: 210px; text-align: center; }
.stats { top: 220px;; }
.minion { top: 500px; }
{ padding-top: 15px; }
/* ----- for points 2 & 3 ---- */ {background-color: ;}
.treasure_item_name { display: initial; } </style>
NEW header 1
NEW header 2
Quick Explanation of some properties: - Setting position to absolute makes it relative to the first ancestor to be positioned. (example: column_1's first ancestor would be in this case)Quick Ancestor term explanation for html context (just in case)
I'll use the id to refer to each div. So div 2 is the parent of div 3 and div 1 is the grandparent of div 3 (can have more layers). so div 2 and 1 are considered ancestors to div 3.
-
Now setting top and right will move the selected element around (example: if .pet_name was set top: 0px; left 0px; it'd be in the top left corner of column_2 in this case since it's position is relative to ) also negative numbers makes it 'overflow'
-
z-index changes the placement order of positioned elements [Not: "position: static;" though], so in this case it makes the columns that normally be placed under the added div be placed above instead and the added headers to be placed above columns [NOTE: normally elements are placed in the order they appear in html, so same numbers (ties) are resolved by order they appear in html]
-border-radius rounds corners of elements, "border-radius: TOP-LEFT, TOP-RIGHT, BOTTOM-LEFT, BOTTOM-RIGHT"
-To keep in mind (very easy to fix though) is positioned relative to so moving will also move
NOTE: in .newHeader i put width to help me position the headers easier [/spoiler]
Please let me know if anything wasn't clear or if you want further explanation of anything or if you have any further questions.
Oh man! This is fantastic, thank you so much for the help and the walkthrough! I will play around with this, and definitely shoot you anymore questions (if that's okay)!
yeah that's totally fine