Need pet profile help! *frustrated* !
Replies
I have tried to code all my pet profiles, and I am sure I've made a right mess of it. At the moment, I am concentrating on my pet, Wilf but all my profiles have the same issue.
On my main computer, his profile is all squished up, the treasure chest overlaps the story text, and the background doesn't fully fit the screen - yet on my laptop, it all looks exactly how I want it to!
Does anyone know why this is happening? Is there a code that will them look the same no matter how they are viewed? I hope someone can help...it's driving me crazy o.o
uhhh took me half an hour to read the code xD As I don't have such an profile, I took one from FallenSamurai on subetagraphics.proboards.com and altered it
I checked it out on my tablet and everything works, as well on computer, but please check it, too
It looked a bit messy, because you defined the background through the body page part. The page part =/= html body part (the whole thing) Can't describe it the right way I guess :) The pet treasure overlaps, because you said on which position it should be placed (top:2800px; left:0px;) thus it will overlap as your text is longer than 2800 pixels ^^
- I'm so sorry, I know it's all a mess...but thank you so much for going through it all 😊
Yes it does look better, there are slight differences but the treasure chest fits the way it's supposed to!
I think I understand what you're saying about the treasure chest position, so I will see if I can fix that - thank you ❤️
You are welcome! If you want to play around with the code
<style>
/* A free Pet Profile created by FallenSamurai, avaliable at https://subetagraphics.proboards.com */
/* ------------------ Overall ------------------ */ html { margin: auto !important; width: 100%; height: 100%; background: url(http://dl3.glitter-graphics.net/pub/2854/2854833m7fndp0t6s.gif) repeat top left; background-color: ; }
body { width: 760px; height: auto; margin: 0 auto; position: relative; background: transparent; margin-top: 50px; margin-bottom: 50px; font-size: 10px; color: ; }
h2, , , , , , , , , .pet_wco_info_date { display:none; }
a:link, a:visited, a:hover { color: ; }
{ height: auto !important; background-color: ; margin-left: 0px; padding: 0px; min-width: 100%; }
{ height: auto !important; background-color: ; margin-left: 0px; padding: 0px; min-width: 100%; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius; border:7px double ; }
{ background: transparent; }
{ width: auto; padding: 25px 25px 0; }
/* ------------------ DO NOT TOUCH ------------------ / ::after { content: 'free profile by FallenSamurai @ subetagraphics.proboards.com'; font-size: 9px; margin-left: 5px; } / ------------------ END DO NOT TOUCH ------------------ */
/* ------------------ Minion ------------------ */
{ width: 200px; height: 163px; margin: 0; padding: 0; font-size: 10px; text-indent: -9999px }
/* ------------------ Pet Info ------------------ */
{ width: 290px; }
.pet_name {display:none; }
.pet_color_info { position: relative; top: -15px; }
.owner { position: relative; top: -15px; }
.pet_age_info_date { position: relative; top: -15px; }
{ width: 250px; height: 250px; margin: 0 auto; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(http://img.photobucket.com/albums/v620/chilipepper35/WilfbyAsheBatcave_zpsdaa47d5d.png); }
;){kind=link}
/* ------------------ Stats ------------------ */
{ width: 200px; padding-top: 0px; height: 325px; font-size: 10px; }
{ margin: 0px; padding: 0px; }
.statbar div.stat { background-color: ; height: 10px; } .statbar { border: 0px solid ; }
/* ------------------ Spotlight ------------------ */
.pet_spotlight { position: absolute; left: 25px; top: 176px; width: 200px; height: 163px; padding-top: 10px;
}
/* ------------------ Pet Description ------------------ */
{ padding-bottom: 20px; padding-top: 20px;
}
/* ------------------ Pet Treasure ------------------ */
{ } .treasure_item {margin-top:8px; margin-left:12px;} .treasure_item img {border: 2px dotted ;}
/* ------------------ Pet Friends ------------------ */
{display:none; }
</style>
<center><img src="http://img.photobucket.com/albums/v620/chilipepper35/WilfLogo_zps9ae4dbe9.png"></center><br>
<center><div id="navigation"> <a href="/explore.php"><font color="" size="1">Explore</a> - <a href="/news.php"><font color="" size="1">News</a> - <a href="/inventory.php"><font color="" size="1">Inventory</a></div></center></font><p>
<center><font color="" size="2">---------------------------------------<p>
YOUR TEXT HERE