Need Help with Coding my Pet's Page
Replies
So I am having issues trying to figure out how to make the pet description turn into a scroll box so the text doesn't cover everything :(
Another thing is I want my background not to repeat. Then have a background color instead to fill out the rest of the page but it doesn't work. It just keeps making the whole page go white if I attempt to code that.
Here is an example of my code:
<style>
, , -ban, -ban-main, -lrc, -rrc {display:none;} , -right, , , , h2, a, {display:none;} , , body, , , {background-color:transparent;}
body {background:url(http://img08.deviantart.net/6aad/i/2017/158/1/b/vibriipetpage1_by_nyanamo-dbbvmp2.png);}
{background-repeat:no-repeat;}
{position:absolute; top:425px; right:85px;}
{position:absolute; top:80px; right:80px; }
{ height:500px; overflow:auto; position:absolute; left:250px;top:600px;}
{position:absolute; left:390px; top:80px; height:500px; overflow:auto;}
body,html,div,a,tr,td,font {color: }
li#stat_level, li#stat_strength, li#stat_defense, li#stat_speed, li#stat_health, li#stat_hp, li#stat_intelligence, li#stat_books_read, li#stat_food_eaten, li#pet_employment {display: none;}
</style>
and a link to my pet Vibrii's Page Here's his page! Forgot to link. so you get an idea of what im trying to do. ^^; I just want to know how to make my BG image not tile and fill out the rest of the page with a background color. And make the text a scrollbox.
what cease looks like now is what i got, hopefully someone with more know-how can pop in and make corrections if necessary. my eyedrop tool wouldn't pick up the right background color, so at the very least that needs changing p: (tho i would just make a larger background instead of using a background color since yours has that cute texture)
i moved # bookmarks to display:none;, i removed the extra body, html from your font color choice, and i put the two background bits together (you had one just floating by itself). your description wasn't scrolling because it had no width assigned (your pet treasure doesn't have one either, but i don't know if you want one so i left that alone). i added in a floating item code and a thing for the hustler alert at the top, but those are just personal preference things and you can take them out if you want
I was wondering. If I wanted to add a graphic with a transparent background right above my treasures ( This One! ), Is this line of code correct for that?
div.image {
content:url(LINK);
position:absolute;
top:VALUEpx;
right:VALUEpx;
}
@ Sorem next time, pls ping! i wouldn't have realized you changed your post if i hadn't checked back to make sure i didn't miss any errors in mine. unfortunately, i haven't tried using additional divs myself so i can't answer that one :c
[edit]
i remembered what was bothering me! your links weren't all the same color, try this instead
div, tr, td, font {color: ;}
a, a:link, a:active, a:visited {color: ;}
a:hover {color: ; text-transform:uppercase;}
if you don't want to change how your links look when hovering over them, you can take it off or put it with the rest of the link styling (i think subeta defaults to underlining the link no matter what?)
One last thing (sorry about not pinging you last time haha)
If I want to make a little popup in the description that the user can interact with, I tried to do this but it doesn't work right. Do I have to put this within the <style> tags or in the description itself? Thank you!
What are you waiting for?
fadeIn { from {opacity: 0;} to {opacity:1 ;} }
np! ok so i haven't done this either, but
- i'm assuming it doesn't work bc if you leave the script outside of the style tags you can see it as part of the description (minus anything in angle brackets, of course), and if it's in the style tag nothing changes.
this... ALMOST works. It's a way to do with without javascripting it. So I have this in the <style> tags:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 75px auto;
padding: 20px;
background: ;
border: 1px solid ;
width: 300px;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
position: relative;
} .close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: ;
}
and finally, this in the description:
Potion Seller. Sell me a Potion!
So it makes a link that I can click on, but no popup. Kinda made me excited for a bit once I saw a clickable link in the description, but my heart died when the popup didnt work DX;
btw wow thank you so much for all of your input.
@ Sorem
thank you for asking! learning to do this stuff is neat, it's like a bunch of little puzzles 8) i made it work with illya!! i used this site; it looks like we might've found the same example c:
you want to keep your divs and your links out of your style tag, but otherwise you're on the right track --
<style>
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 75px auto;
padding: 20px;
background: ;
border: 1px solid ;
width: 300px;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
position: relative;
}
.close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: ;
}
</style>
"Who is this man, and what is his function?"
i think you can name the div anything you want so long as the div and the link hashtag(?) match, the example used popup1 but that's boring, so i changed it p:
e/ removed last line (
), not sure why that was there, doesn't appear to do anything?? lol it was a mistaken copy-paste from while i was going through the instructions good job me
;){kind=link}
