(Solved)Need help with pet profile things moving around

Replies

Oct 29, 2023 2 years ago

has pride

I've been trying to learn CSS and I managed to get a pet profile for

Athene Glaukopis that I was happy with but when resizing the browser window things moved around or were hidden (mainly the image, navigation buttons and column 2), just generally not remaining consistent. I've tried using set widths and changing the position value and nothing seems to have helped.

Help!

SPOILER (click to toggle)

<style type="text/css">
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ CSS SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 url('https://bug.bz/subeta/css/reset/pet.css?');
 url('https://fonts.googleapis.com/css?family=Nunito');
 url('https://fonts.googleapis.com/css?family=Bad+Script');
/* ~~~~~~~~~~~~~ Fonts and Links ~~~~~~~~~~~~~ */
 {color: ; font-family: 'Nunito';}   /* ~~ Main Font ~~ /
a {color:  !important;}  / ~~ Links ~~ */
h1 {font-family: 'Bad Script'; color: ; padding-bottom: 15px;} /* ~~ Heading 1 ~~ /
h2 {font-family: 'Nunito'; color: ; font-weight: bold; font-size: 16px;} / ~~ Heading 2 ~~ */
/* ~~~~~~~~~~~~~ Scrollbar ~~~~~~~~~~~~~ */

{ scrollbar-width: thin; scrollbar-color: }  /* Firefox */

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar { width: 10px;}
::-webkit-scrollbar-thumb { background-color: ;} / Set the color of the thumb */
::-webkit-scrollbar-track { background-color: ;} / Set the color of the track */
/* ~~~~~~~~~~~~~ Page - Content - Background ~~~~~~~~~~~~~ */
 {
margin: 0px !important;
padding: 0px !important;
width: 100% !important;
}
 {
background-image: url(https://www.sarzastore.com/cdn/shop/files/Olive-Branch-Green-by-Robyn-Valerie-1.jpg?v=1688632688);
background-size: contain;
background-color: ;
padding-top: 50px;
width: 100vw !important;
height: 100vh !important;
position: relative;
top: 0;
padding-bottom: 40px;
}
/* ~~~~~~~~~~~~~ Image ~~~~~~~~~~~~~ */
div#image {
background-image: url(https://i.pinimg.com/564x/73/41/51/73415129098c12dab2dc94e4e4f7d5fb.jpg);
background-size: cover;
background-position: center center;
position: fixed;
margin: auto;
border-color: gold;
border-style: ridge;
border-radius: 8px;
height: 550px;
width: 300px;
right: 1100px;
left: 0px;
bottom: 190px;
}
/* ~~~~~~~~~~~~~ Pet_Info Box ~~~~~~~~~~~~~ */
, ,  {display:none}
div#pet_info {
background-color: ;
border-color: ;
width: 1000px;
min-width: unset !important;
height: 450px !important;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto auto;
box-sizing: content-box;
}
 {
background-color: ;
border-color: ;
padding: 15px;
overflow: hidden !important;
border-radius: 8px;
border-width: 8px 8px 8px 275px;
border-style: solid;
}
div#column_2, .d_box,  {
background-color:   !important;
border-color: transparent;
}
/* ~~~~~~~~~~~~~ Navigation ~~~~~~~~~~~~~ */
div#nav {

position: fixed;
margin: auto !important;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 48px;
width: 80px;
z-index: 99;
top: 50px;
right: 820px;
left: 0px;
bottom: 0px;
border: 0px solid;
border-radius: 0px;
padding: 0px;
box-sizing: border-box;
}
/~~~ Links ~~~/
div#nav a {
background-color: ;
color:  !important;
outline: 2px solid ;
width: 60px;
height: 45px;
margin: 0 4px 0 0;
overflow: hidden;
border-radius: 50%;
display: inline-flex;
font-size: 10px;
justify-content: center;
align-items: center;
text-decoration: none;
}
.nav_link {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 8px;
}
/* ~~~~~~~~~~~~~ Column 2 ~~~~~~~~~~~~~ /
/= Hidden =*/
 h1 span.legacy-name{display:none}
 .pet_age_info_date {display:none}
 .pet_wco_info_date {display:none}
 br {display:none}
 {padding: 0px !important; margin: 0px !important;}
div#column_2 {
justify-items: center;
align-items: center;
box-sizing: border-box !important;
border-radius: 10px;
border-width: 1px;
border-style: solid;
position: fixed;
height: 480px;
width: 230px !important;
top: 222px;
bottom: 0px;
left: 1379px;
z-index: 99;
right: 0px;
margin: 0px !important;
padding: 0px !important;
}
 {
position: absolute;
top: 0px;
left: 0px;
}
 h1 .pet_name {
display: block;
margin-top: 20px;
}
.pet_color_info, .owner{
display: block;
font-size: 12px;
line-height: 24px;
}
 {
width: 204px;
height: 204px;
overflow: hidden;
border-color: gold; border-style: ridge; border-radius: 8px;
background-repeat: no-repeat;
background-position: center center;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
/* == Pet Name == */
 h1 .pet_name {
font-family: 'Bad Script';
color:  !important;
}
/* == Pet Likes == /
a i.icon.heart {color: ;}
p.pet_like {
padding: 0px !important;
margin: 0px !important;
line-height: 33px;
}
/ ~~~~~~~~~~~~~ Description ~~~~~~~~~~~~~ */
div#d_container {
position: absolute;
top: 0px;
left: 0px;
width: 800px;
display: inline-block;
}
.d_box {
width: 100%;
height: 612px;
overflow: auto;
text-align: justify;
font-size: .8em;
font-weight: 400;
padding: 8px;
margin: 100 0 100px 0;
box-sizing: border-box;
border-radius: 10px;
border-width: 0px;
border-style: solid;
}
/* ~~~~~~~~~~~~~ Treasure ~~~~~~~~~~~~~ */
 {
width: 240px;
height: 90px;
overflow: auto;
padding: 0px !important;
margin: 0px !important;
box-sizing: border-box;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
border-radius: 10px;
border-width: 1px;
border-style: solid;
position: fixed;
top: 580px;
right: 301px;
z-index: 99;
}

h2 { display: none;} .treasure_item { width: 64px; height: 64px; float: none; text-align: center; display: inline-flex; justify-self: center; align-self: center; padding: 2px; border-color: gold; border-style: double; border-radius: 1px; margin: 6px; } </style>

[color=#ab274f]Elly 🌿 🔮 🌿

Oct 29, 2023 2 years ago

is a PUNKin

Hey! This is looking great so far! I'm gonna take some time working with it, but first (in case you happen to be about VERY late or VERY early and see this in the meantime, haha) I'm going to tell you the most immediate solution to your positioning problem: Set [tt]pet_info[/tt] to relative positioning, and then elements within ([tt]column_2[/tt], et al.) to absolute positioning, and those interior elements will be positioned based on [tt]pet_info[/tt], and wayward no more.

[edit] I made some adjustments to positioning (mostly switching things to absolute positioning as necessary, and then shifting their placement on the page to what I interpreted your intention to be (there may be some discrepancies) In order to get the image on the left to sit on top, I adjusted the overflow setting on [tt]pet_info[/tt], and then made a slight adjustment to the visibility & targeting behavior of your "two" and "three" panels. (I'm absolutely happy to explain anything, and continue helping as you work on this!)

Oh! I also changed the left-side image to be linked in HTML as opposed to being the background image of its element. In your HTML portion, where you currently have:

You would update to: I made this adjustment partly to facilitate its behavior, but also for purposes of accessibility. Writing it this way enables you to provide text for visitors using screen readers ([tt]alt="whatever"[/tt]), and you can optionally add hover text as well ([tt]title="whatever"[/tt]).

Try this on for size-- (and note "user not found" incorrectly gets pulled in on those import links on the very top, so omit that if you paste in)

updated code


<style type="text/css">
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ CSS SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
   url('https://bug.bz/subeta/css/reset/pet.css?');
   url('https://fonts.googleapis.com/css?family=Nunito');
   url('https://fonts.googleapis.com/css?family=Bad+Script');

  /* ~~~~~~~~~~~~~ Fonts and Links ~~~~~~~~~~~~~ */

 {color: ; font-family: 'Nunito';}   /* ~~ Main Font ~~ */
a {color:  !important;}  /* ~~ Links ~~ */

h1 {font-family: 'Bad Script'; color: ; padding-bottom: 15px;} /* ~~ Heading 1 ~~ */
h2 {font-family: 'Nunito'; color: ; font-weight: bold; font-size: 16px;} /* ~~ Heading 2 ~~ */

  /* ~~~~~~~~~~~~~ Scrollbar ~~~~~~~~~~~~~ */

* { scrollbar-width: thin; scrollbar-color: }  /* Firefox */

 /* Chrome, Edge, and Safari */
*::-webkit-scrollbar { width: 10px;}
*::-webkit-scrollbar-thumb { background-color: ;} /* Set the color of the thumb */
*::-webkit-scrollbar-track { background-color: ;} /* Set the color of the track */

  /* ~~~~~~~~~~~~~ Page - Content - Background ~~~~~~~~~~~~~ */
html,body{
  background-image: url(https://www.sarzastore.com/cdn/shop/files/Olive-Branch-Green-by-Robyn-Valerie-1.jpg?v=1688632688);
  background-size: contain;
  background-color: ; 
}

 {
  margin: 0px !important;
  padding: 0px !important;
  width: 100% !important;
}

 {
  padding-top: 50px; 
  width: 100vw !important;
  height: 100vh !important;
  position: relative; 
  top: 0; 
  padding-bottom: 40px;
}

  /* ~~~~~~~~~~~~~ Image ~~~~~~~~~~~~~ */

div#image {
  position: absolute;
  margin: auto;
  border-color: gold; 
  border-style: ridge; 
  border-radius: 8px;
  height: 550px;
  width: 300px;
  top: -36px;
  left: -310px;
  overflow:hidden;
  background:;
}

 img{position:relative; left:-41px; width:390px; max-width:none!important; height:550px; scale:1.1; overflow:hidden;}

  /* ~~~~~~~~~~~~~ Pet_Info Box ~~~~~~~~~~~~~ */
, ,  {display:none}

div#pet_info {
  background-color: ;
  border-color: ;
  width: 1275px; 
  min-width: unset !important;
  height: 450px !important;
  position: relative;
  top: 20vh;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto auto;
  box-sizing: content-box;
}

 { 
  background-color: ; 
  border-color: ; 
  padding: 15px; 
  border-radius: 8px;
  border-width: 8px;
  border-style: solid;
}

div#column_2, .d_box,  {
  background-color:   !important;
  border-color: transparent;
}

  /* ~~~~~~~~~~~~~ Navigation ~~~~~~~~~~~~~ */

div#nav {  
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  height: 48px;
  width: 80px;
  z-index: 99;
  top: 250px;
  left: -65px;
  border: 0px solid;
  border-radius: 0px;
  padding: 0px;
  box-sizing: border-box;
}

  /*~~~ Links ~~~*/
div#nav a {
  background-color: ;
  color:  !important;
  outline: 2px solid ;
  width: 60px;
  height: 45px;
  margin: 0 4px 0 0;
  overflow: hidden;
  border-radius: 50%;
  display: inline-flex;
  font-size: 10px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.nav_link {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 8px;
}

  /* ~~~~~~~~~~~~~ Column 2 ~~~~~~~~~~~~~ */
/*= Hidden =*/
 h1 span.legacy-name{display:none}
 .pet_age_info_date {display:none}
 .pet_wco_info_date {display:none}
 br {display:none}

 {padding: 0px !important; margin: 0px !important;}

div#column_2 {
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  position: absolute;
  height: 480px;
  width: 230px !important;
  top: 0;
  right: 0px;
}

 h1 .pet_name {
  display: block;
  margin-top: 20px;
}

.pet_color_info, .owner{
  display: block;
  font-size: 12px;
  line-height: 24px;
}

 {
  width: 204px;
  height: 204px;
  overflow: hidden;
  border-color: gold; border-style: ridge; border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

  /* == Pet Name == */
 h1 .pet_name {
  font-family: 'Bad Script';
  color:  !important;
}

  /* == Pet Likes == */
a i.icon.heart {color: ;}
p.pet_like {
  padding: 0px !important;
  margin: 0px !important;
  line-height: 33px;
}
  /* ~~~~~~~~~~~~~ Description ~~~~~~~~~~~~~ */

{position:absolute; top:1px; left:260px; width:800px; height:480px;}

div#d_container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  display: inline-block;
}

.d_box {
  width: 100%;
  height: 480px;
  overflow: auto;
  text-align: justify;
  font-size: .8em;
  font-weight: 400;
  padding: 8px;
  border-radius: 10px;
  border-width: 0px;
  border-style: solid;
}

, , {position:absolute;}
, {visibility:hidden;}
:target, :target{visibility:visible;}

  /* ~~~~~~~~~~~~~ Treasure ~~~~~~~~~~~~~ */
 {
  width: 230px;
  height: 115px;
  overflow: auto;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  position: absolute;
  bottom:10px;
  right: -245px;
  z-index: 99;
}

 h2 {  display: none;}
.treasure_item {
  width: 64px;
  height: 64px;
  float: none;
  text-align: center;
  display: inline-flex;
  justify-self: center;
  align-self: center;
  padding: 2px;
  border-color: gold; 
  border-style: double; 
  border-radius: 1px;
  margin: 6px;
}
</style>

[box=#509b91]

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

Looking for a guide to alchemy? Please visit:

Trajan

[/box]

Oct 29, 2023 2 years ago

has pride

Thank you so much!! I knew it had to be a simple fix that I just wasn't seeing! I've been mostly learning from available free codes, playing around, and a bit from online sites and didn't really understand positioning very well. It's exactly how I want it now, thank you very much again for your help and time!

[color=#ab274f]Elly 🌿 🔮 🌿

Oct 29, 2023 2 years ago

is a PUNKin

It's a good way to learn :D You're doing good!

[box=#509b91]

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

Looking for a guide to alchemy? Please visit:

Trajan

[/box]

Logged Out

(Solved)Need help with pet profile things moving around

Replies