Pet lookup coding help?

For discussion of the Subeta pet site, including new colours and other features.
Post Reply
Wingsrising
Posts: 2682
Joined: 18 Jan 2006 09:31 pm
Gender: Female
Human Avatar: 157670
Location: Iowa, USA, trying to stay warm

Pet lookup coding help?

Post by Wingsrising »

So, the item revamps inspired me to work on my pet treasures, which led me to notice that my pet descriptions had all been deleted. So I thought I should replace them. (It was pretty much all text and I had them saved in a text file, so not that hard.) Then I thought, hey, I should make an overlay to make my former Bloodred Aerie -- repainted Twilight because I hate the new Bloodred Aerie -- look Bloodred again. Then as long as I was messing with CSS... why not fancy things up a little. A very little. I'm not exactly good with the CSS!

So I set up a few of my profiles like this:
http://www.subeta.net/pets/Windborne
(Yay! I made an overlay! Go, me!)

Cool! But then I realized that as you make the browser window smaller, the descriptions end up under the pictures. Not cool.

So I stuck in this:

Code: Select all

#pet_desc{margin-top:20px;margin-bottom:30px;position:absolute;left:250px;}
#pet_treasure{margin-top:20px;margin-bottom:30px;position:absolute;left:250px;}
#pet_friends{margin-top:20px;margin-bottom:30px;position:absolute;left:250px;}
But now everything ends up on top of each other, that is:
http://www.subeta.net/pets/Duskfeather

I could absolutely position everything, but then I'd have to tweak it separately for every single profile, as the descriptions are different lengths. And for pets with friends, I'd have to mess with stuff again as my treasure got larger. Is there any way to tell the description/treasure/friends just to come one after the other so I don't have to do that -- but still to keep them to the right of the pet and minion as the browser window is re-sized?

Small words preferred. I used HTML back in college (over 10 years ago now... eek!) but know almost nothing about CSS! :-)
Image
Jessi
Posts: 3412
Joined: 09 Mar 2006 06:29 pm
Human Avatar: 155904
Location: Seattle, Washington
Contact:

Re: Pet lookup coding help?

Post by Jessi »

Wings, I am absolutely awful at CSS too, so I don't have any suggestions for you (and someone here might), but I CAN tell you that if you message Asmodeus on Subeta, he will GLADLY help you. He absolutely adores coding and loves helping people with their code questions, and Ty and I can vouch for him that he is one of the nicest people on the entire site. If I see him on later tonight I'll ask him for help, but I'm sure someone else here will have a suggestion XD Just... not me. Everything I know about CSS coding profiles I learned from someone else xD
Foghawk
Posts: 369
Joined: 03 Jun 2007 08:58 pm
Human Avatar: 254768
Location: a narrow dusty room
Contact:

Re: Pet lookup coding help?

Post by Foghawk »

I think this should do it. I know Subeta tries to be CSS-friendly, but frankly, the layout is horribly inflexible.
Spoiler: open/close

Code: Select all

<style type = 'text/css'>
#pet_image { background-image: url(http://i274.photobucket.com/albums/jj260/Wingsrising/BloodredOverlay1.png); }

#pet_info { width: 100%; }

#column_2 { float: left; margin-top: 30px;  margin-left: -210px; }
#column_1 { float: left; margin-top: 330px; width: 200px; }
#column_3 { display: none; } 

.treasure_item { margin-top:5px; margin-left:5px; }

#pet_desc, #pet_treasure, #pet_friends { margin-top: 20px; margin-bottom: 30px; margin-left: 5px; }

#column_1 h2 { display: none; }
#column_3 + br { clear: none !important; }

</style>
Absolute positioning tends to lead to those kinds of collisions if you want to do anything at all that isn't fixed-width - but other elements will wrap around a float. :D
Image
Wingsrising
Posts: 2682
Joined: 18 Jan 2006 09:31 pm
Gender: Female
Human Avatar: 157670
Location: Iowa, USA, trying to stay warm

Re: Pet lookup coding help?

Post by Wingsrising »

That does work! Thank you so much!

I'm afraid this leads to question two:

Now Windborne's treasure and friends wrap around after they get to the bottom of the minion. Is there a way to do this and still keep them all nicely square -- that is, so it's like the pet and minion are one column and the treasure and friends are another column? Maybe make the minion info longer?

Phew. I don't see how people manage to make those fancy beautiful pet lookups... just this is confusing enough! :-) Everything's changed so much since I was making websites, back before CSS. (We had to code our websites in a blizzard, typing uphill BOTH WAYS!!!)
Image
Post Reply

Who is online

Users browsing this forum: No registered users and 33 guests