Subeta - Solved ty - Pet Profile Coding help

Replies

Dec 9, 2022 3 years ago

is a sun worshipper

Hiya. I've been trying to fix the layout of

Kivuli's profile... My plan was to have it so the description is up a bit higher and that lil image by Popuri can nestle into that blank space to the right of the color, name, etc. Unfortunately what I've written makes the description box block most of those lower links (the pet spotlight, pet like, and my username are currently unclickable). I also wanted to add more to the description about her, but that causes the image to become smaller and warps the size of the table. This may be a simple fix of just putting the description and that side image into their own little boxes and placing them in those spots, but I'm not the best at coming up with coding...

code inside

<style>
h2, , , , , , , , , .pet_age_info_date, .pet_wco_info_date,  br + a, , , ,  {display:none;}
::after {content: 'Overlay by Folara // Layout Coding help from FallenSamurai // Background from lovetextures.com';
font-size: 10px;  margin-left:15px;}
html {margin: auto !important; width: 100%; height: 100%;
background: url(https://i.pinimg.com/originals/d5/4b/d6/d54bd60cda8b3fa652784bd02574a824.jpg) no-repeat center fixed;
-webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;
background-color: black;}
body {width: 725px;  height: auto;  margin: 0 auto;  position: relative;  background: transparent;  margin-top: 50px;  margin-bottom: 50px;  font-size: 10px;}
,  {height: auto !important;  background-color: ;  margin-left: 0px;  margin-bottom: 50px; padding: 0px;  min-width: 100%;}
 {background: transparent;}
 {position:relative; top:-25px;}
 {position:relative; top:-85px;}
 {background-image:url(https://i.imgur.com/p33hmi8.png); width:400px; height:400px;}
 {width: auto;  padding: 0px 55px;}
.pet_like {position:relative; left:50px; top:-60px;}
.legacy-name {position: relative; top: 53px;}
 {position:relative; left:-392px; top:110px;}
, li {line-height: 15px !important;}
.statbar {border: solid 1px ;}
.stat {background: black !important;}
 {position:relative; top:-205px; height: 125px;}
 {position:relative; left: -50px; width:708px;}
.pet_spotlight {position:relative; left:-188px; top:-5px;}
h1 {font-family:Garamond; font-size:45px; color:; letter-spacing:1px; text-align:center; line-height:0px;}
</style>






Kivuli = Swahili for "Shadow" ; Kivu, aka Fluffybutt


December 1st, 2014 - October 29th, 2016


... Some real life refs ...


My lovely teddy bear hamster who was a secret pet while I was at college.

 


Lovely art by

It seems the pet_desc code is the main issue here but I'm a bit lost as to what to change it to ...

pet_desc code

{position:relative; top:-205px; height: 125px;}

Thank you thank you thank you, for any help you can provide. I may not respond right away, but I will definitely be around to check back!

Dec 9, 2022 3 years ago

is a PUNKin

Hey hey , Ignoring the pet name and owner here (I pasted your code into a pet of my own so I could play with it a little), is this kind of what you have in mind?

screenshot inside

Rather than using a table, I opted to put the text and the image into their own containers, side by side.

I'm more than happy to explain the process or lend further help, but thought I'd refrain from going on at length for now and just share the code. I hope this helps!

code inside

<style>
h2, , , , , , , , , .pet_age_info_date, .pet_wco_info_date,  br + a, , , ,  {display:none;}
::after {content: 'Overlay by Folara // Layout Coding help from FallenSamurai // Background from lovetextures.com';
font-size: 10px;  margin-left:15px;}
html {margin: auto !important; width: 100%; height: 100%;
background: url(https://i.pinimg.com/originals/d5/4b/d6/d54bd60cda8b3fa652784bd02574a824.jpg) no-repeat center fixed;
-webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;
background-color: black;}
body {width: 725px;  height: auto;  margin: 0 auto;  position: relative;  background: transparent;  margin-top: 50px;  margin-bottom: 50px;  font-size: 10px;}
,  {height: auto !important;  background-color: ;  margin-left: 0px;  margin-bottom: 50px; padding: 0px;  min-width: 100%;}
 {background: transparent;}
 {position:relative; top:-25px;}
 {position:relative; top:-85px;}
 {background-image:url(https://i.imgur.com/p33hmi8.png); width:400px; height:400px;}
 {width: auto;  padding: 0px 55px;}
.pet_like {position:relative; left:80px; top:-90px;}
i.icon{font-size:1.5em;}
.legacy-name {position: relative; top: 66px;}
 {position:relative; left:-392px; top:110px;}
, li {line-height: 15px !important;}
.statbar {border: solid 1px ;}
.stat {background: black !important;}
 {position:relative; top:-205px; width:100%; height: 125px;}
 {position:relative; left: -50px; width:708px;}
.pet_spotlight {position:relative; left:-188px; top:-5px;}
h1 {font-family:Garamond; font-size:45px; color:; letter-spacing:1px; text-align:center; line-height:0px;}
.art{position:relative; top:-70px; float:right; font-size:10px; text-align:center;}
.text{position:absolute; top:130px; width:50%; text-align:center;}
</style>

Kivuli = Swahili for "Shadow" ; Kivu, aka Fluffybutt


December 1st, 2014 - October 29th, 2016


... Some real life refs ...


My lovely teddy bear hamster who was a secret pet while I was at college.
 

Lovely art by

[box=#509b91]

Ping, sMail or comment me, I'll craft anything!

Looking for a guide to alchemy? Please visit:

Trajan

[/box]

Dec 10, 2022 3 years ago

is a sun worshipper

Ahhh yes, that's perfect! Thank you so much! I'm running out to get ready for work right now and had to come check Melody for today, but I definitely owe you something! I'll come back soon and find something for you. Thank you!