coding help

Replies

Mar 13, 2021 5 years ago

made a living

I've been playing around with some different concepts from different people's codes, and I have... lost my minion somehow XD I know it has something to do with the position, because it would show back up when I switched from absolute to fixed, but now that I've added the sidebar I can't see it no matter what I do. It was also showing up with weird scroll bars when I went to absolute (which is what I want it at) so I figured it was a spacing issue, but no matter how I push it around with the top px settings, it wouldn't show back up (or the stats). Also how do I get the background to stretch across the whole page? I tried telling it 100% but it didn't change.

Phosphore


YOUR TEXT HERE
code by kimokawaii

YOUR TEXT HERE

YOUR TEXT HERE

YOUR TEXT HERE



<style>

-cover {
	background-color: !important;
	opacity: 0.9!important;
	
}


body {
	background-color: transparent!important;
	background-image: url("https://images.unsplash.com/photo-1502485019198-a625bd53ceb7?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80.png");
	background-repeat: no-repeat;
	background-size: 100%!important;
	
}

, , -ban, -ban-main, -lrc, -rrc, , -right, , , , h2,  a, , .pet_age_info_date, .pet_wco_info_date, ,  {display: none;}
, , body, , ,  {background-color: transparent;}
.field,  {visibility: hidden;}
.field:target, :target {visibility: visible;},  {visibility: hidden;} .field:friends, :friends {visibility: visible;}

{
width: 230px;
overflow: auto;
background: ;
border-radius: 20px;
z-index: 3;
position: absolute;
top: 75px;
left: 18px;
border-width: 10px;
border-style: solid;
border-color: transparent;
box-sizing: border-box}
{min-height: 100px}
{margin: auto}

{position:absolute;
left: 38px;
top: -80px;
width: 235px;
padding: 0px;
z-index: 4}

{position:absolute;
left: 38px;
top: -100px;
width: 235px;
z-index: 4;
padding: 0px}


.pet_name{height: 50px;
display: block;
position: relative;
top: -10px}

.legacy-name{position:relative;
top: -30px}
.pet_color_info, .owner{position:relative;
top: -40px}
.pet_like{position: relative;
top: -34px;
margin: 0px}
.icon.heart{font-size: 14px;
opacity: 1}
.icon.heart.red{opacity: 0.33}

.pet_spotlight{position: relative;
margin: 0px;
top: -20px;
height: 100px;
width: 235px}


 {
position: absolute;
overflow: auto;
left: 70px;
top: 300px;
}

 {
position: absolute;
overflow: none;
}

.field {
background-color: white;
width: 800px;
height: auto;
position: absolute;
margin-left: 50px;
margin-right: 50px;
margin-top: 50px;
margin-bottom: 50px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 2px;
border-radius: 25px 25px 25px 25px;}

 {
background-color: white;
position: absolute;
top: 100px;
margin-left: 50px;
width: 800px;
height: auto;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 2px;
border-radius: 25px 25px 25px 25px;
z-index: 2;}
</style>

(art by KayBit on Dappervolk)

Mar 14, 2021 5 years ago

is fashionable

What is going on? 1 pet minion: reason you can't see this no matter what is because of the combo of to be "overflow: auto;", the contents are offset and the the container too small to show contents 2 pet stats have been disabled by the code, the container is which is set to display hidden 3 background image seems to cover my screen quite well, but guessing there is white space for your height

Let talk quick fixes:

okay here is recommended/easiest way to fix/see minion again which is getting rid of the offset and having container height be sized well. So inside remove properties left and top or set values to 0px at least then set position to relative. Basically "position: relative;" sets it to be relative to it's normal position so without left and top or both set to 0px than it's positioned at it's normal location but z-index works and affects other elements so the container height () will size to fit the contents () since height is not set.

NOTE: I noticed does not have z-index which will make it be placed behind the element it's over currently. Now on the other hand the contents () does have z-index so its placed in front... the reason I bring this up is the scroll bar is behind while content is in front, just mentioning this observation since Idk if that is your intended result/look

This one is much easier, get rid of "" and " a" then all the information in stats will display again, might want to take the advice from 1 for positioning stats as well
Without knowing more one suggestion that may work is set "background-size: 100% 100%;" this sets both height and width keep in mind this will cause some stretching. Now if the content of the page is bigger than display then there will most likely be white when scrolling, now this can be prevented by adding "background-attachment: fixed;" this stops the background image from scrolling with the rest of the page.

NOTE: In the case of the property background-size when only one value is set, which makes whatever value set the width while height becomes auto.

Hope this is helpful. Also let me know if anything is unclear or need additional help or if you want to know more and when I see your message/ping I'll try rewording or explain anything as best as possible.

===============================================

If needed/desired I put some explanation of some possible values position can be set to

Some position property values explained

Setting position to absolute makes it relative to the first ancestor to be positioned that is not static if none it's based on viewport/page (also causes it to not interact with other elements this includes sizing of the container it's in [if container size is not set/responsive])

Example your profile is absolute its relative to so setting left and top to 0px will place it in the top left corner of the div Now the minion () inside is also absolute but the first ancestor is so position is relative to it, this is what causes the offset I mentioned at the start of post. [spoiler=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.

Setting position to fixed, position is based on viewport so where ever it's placed it stays there, scrolling doesn't affect it at all.
Setting position to relative, mentioned before but this positions the element is relative to it's normal placement also to keep in mind if there is a gap from moving the element from normal position, other elements won't move to fill in the white space/gap created [/spoiler]

I made a forum group for CustomCSS and more

Mar 14, 2021 5 years ago

made a living

awesome thank you for all of this! I think I have it the way I want it now - decided against including the stats in the end. Quick question: why use a z-index? I don't think I've seen that in other codes I've used. It obviously affects layers, but I had no idea of that even until you pointed that out for me haha

(art by KayBit on Dappervolk)

Mar 14, 2021 5 years ago

is fashionable

Okay so let me place this information about z-indexs below:

z-index changes the order of positioned elements (not "position: static;") appear like which one is on top of the other, elements with the same number are resolved by the order they appear in the html. (I can go into more detail/further explanation just ask)

Now there are a few uses to use z-index so for example your pet's minion needs it otherwise it'd appear behind so it'd not be visible, this is cause minion/coloumn_1 is higher up in the html than the pet_image and such which is in column_2.

Quick additional note: NO need to change this just observation but z-index on is not necessary since the parent () has z-index set (doesn't do any harm either) but knowing more is nice so children will get affected by a parent's z-index.

Fun note: negative values are possible too :)

If you ever need help again please feel free to ping/comment/smail me any questions I'd be happy to help as best as I can. (Also totally fine if you want to add me as a friend)

I made a forum group for CustomCSS and more

Mar 15, 2021 5 years ago

made a living

oh cool thanks so much! I'll do that!

(art by KayBit on Dappervolk)

Logged Out

coding help

Replies