Subeta CSS Compendium
Replies
(your comic thing makes me laugh, btw)
Well, I meant maybe have a little section explaining the concept of hover comment boxes and buttons, as while you did give the codes and the basic information about them, someone who just started and is curious about how it works might not really understand. (Like how you can either give an opacity to the comment box itself OR give an opacity to the column, depending on how your profile is set up). Because, personally, I still have no idea how to set up buttons correctly without screwing up coding D:
(Teehee c:)
Art by
intruder mode I hope you don't mind ?
well in fact there are several mistakes in your code. Like " missing, ; missing.
Like this it should work:
<style>
{position: absolute; top: -20px; left: 500px}
{background: url(http://i51.tinypic.com/288qb1y.jpg); position: absolute; top: -10px; left: -250px;}
:hover {background: url(http://i54.tinypic.com/2i03l0j.jpg) no-repeat; position: absolute; top: -10px; left: -249px;}
{position: absolute; top: 800px; left: -100px;}
{position: absolute; top: 820px; left: 150px;}
{display: none;}
{width: 250px; position: absolute; top: 30px; left: 510px;}
, -right, -top, -inner {display: none;}
-lrc, -ban, , {display: none;}
html {background-color: ; font-family: Arial;}
, , , div#footer, , {display: none;}
{position: absolute; top: 30px; left: 50px; font-family: Arial; background: transparent; overflow: visible; }
.pet_color_info {position: absolute; top: 1050px; left: -80px;}
.owner {position: absolute; top: 1070px; left: -80px;}
{ background-color: ; overflow: visible;}
.pet_age_info_date {display: none;}
.pet_wco_info_date {display: none;}
h2 {display: none;}
h1 {display: none;}
;){kind=link}
</style>
<div id="link"><a href="/" target="_blank">Home</a></div>
<div id="box"><p>The demon roared at the intruding pet, his mouth opening far wider than should have been allowed. Spittle dripped and stretched from rows of perfectly sharp fangs. A tail thick with muscle lashed violently from side to side. There were no eyes above that gaping mouth, although the demon didn't need them to protect his offspring. There was an aura that every creature gave off, and this could be seen by the demon. His own aura began to darken, drawing in power, strength from the surrounding air. If this animal didn't back off, he'd attack.</p>
<p>A second roar tore from the demon's throat as he took a step forward. It was finally then that the intruder fled, leaving nothing but an ever fading trail behind. If the demon had wanted to, he could have followed it and destroyed the other creature. But that wasn't necessary this time. There would be no threat of return. The demon felt sure of it.</p>
<p>He snorted once then turned to head back deeper in to his dwelling. The demon's lumbering steps brought him back to his child, who came bounding toward his father.</p>
<p>While less terrifying than the roar that came first, the next sounds from the demon's throat would have caused any human's ears to bleed. It wasn't a word that anyone would have recognised, the sounds created both guttural and screeching. It can only be assumed that the demon was speaking the name of his son, if he did have a name, as before the demon cub could jump on his father, he was caught up in one clawed hand and tossed in to the air.</p>
<p>The youth let out a shriek as it flew up and plummeted back down, only to be caught safely in the muscled arms of his father.</p>
<p>Still holding his spawn, the demon grunted and collapsed to the floor, creating a great cloud of dirt and bone dust to waft about the air as he landed. Though he had no eyes to close, there was a sense of relaxation settling around the demon. The smaller one, however, had no intention of napping now. He squirmed and wriggled free, stalking around the area, roaring at imaginary foes.</p>
<p>So much for quiet time.</p></div>
<div id="art"> <img src="//i53.tinypic.com/2qn6t0h.jpg" align=""><br/> <center><a href="//theladymacbeth.deviantart.com/" target="_blank">Artist</a></center> </div>
Also, if you want to have nice paragraphs, add this line in your CSS:
p {text-align:justify;text-indent:50px;}
(I love justified text with tabs... but that's just me ^^')
God I will read the rest of your post later, I just skimmed and I needed to say THANK YOU SO MUCH FOR THE JUSTIFY UGH I LOVE JUSTIFYING TEXT AND I DIDN'T KNOW HOW TO DO IT I LOVE YOU
/edit
ARGH. The rest of the code worked, too! My hover works! Is it the whole thing with the semicolons and the quotation marks, because I didn't think that was such a big deal. Or was it because I was using a lot of bbcode? Because, honestly, I don't think your code and my code look THAT different...
bird and bear and hare and fish give my love her fondest wish
As I said, there were only a few mistakes. You know, in CSS, a semicolon can make the difference between a working code and a strange result. I once spent 2 hours wondering what was wrong with a profile, only to realise I had put : instead of ; .
Also, there was an image which was too much on the right (one pixel difference but at hovering it sometimes look strange).
So yeah, really few differences.
Then the way you put paragraphs : [code] Not a paragraph<p/> <p>This is a paragraph.</p> [code]
Let's convert the word to justified text ! mwahahahaha !
See, my dumb ass was just using the /p as a double line break xD
I do actually have a different set of images that the artist made for me, since she said that the ones I have are a pixel or two off, so I'll update with that later I think.
bird and bear and hare and fish give my love her fondest wish
: What part about buttons is bothering you? Also, about that you can apply a property to whatever section you want is explained in "BASIC -- Selectors!". I'm thinking I'll have to rewrite a part of the guide if things are that unclear in it. xD Nice name change, btw! :]
: No problem, glad you could help someone while I was AFK. ^_^
: Code is rather strict like that. Any character that's out of place can break your code and cause it to malfunction. :]
I LOVE THE PROFILE SAMPLE. lovelovelovelove it!
{Edit} This is on Kiaan's pet profile -
I hid the bottom scroll bar, which worked perfectly - but the text is still overflowing, as if the scrollbar should be there. Here's the codes I have from the page {because the originally coding is from Subetalodge, I'm just drastically changing it!}
{position:absolute;top:100px;left:-20px;}
Note - the above code is for the actual column.
.text{width:230px;height:480px;overflow:auto;overflow-x: hidden;position:absolute;top:105px;left:355px;}
Note - this code is for the scroll table. Which is what's messed, I think? D:
tumblr ❤️ one on one? ❤️ Free Banners
: Overflow-x is the horizontal scrolling, so if you say overflow auto and then overflow-x hidden then it'll scroll vertically but not horizontally. To hide the vertical but not the horizontal scrolling, you need to use overflow-y: hidden. :]
Or if you just want to hide both vertical and horizontal scrollbars, just use overflow: hidden.
I've got that - overflow:auto;overflow-x: hidden
But it's not working...? The box still scrolls horizontally :(
tumblr ❤️ one on one? ❤️ Free Banners
: [edit] Just took a look and it's not overflowing for me?
Hm. o_O I'm using chrome, could be that? I'll go have a look in IE xD
/Edit
Ok that's not good, it only looks good in other browsers... I suppose I'll have to swap between them when I'm finished the layout, etc. xD Thank you anyway!
tumblr ❤️ one on one? ❤️ Free Banners
: Ah I see. xD You're welcome anyway, I guess. :]
Dear in your infinite coding wisdom...
Can you tell me how the heck to get the pet nomination link to show up on my pet's profiles? I looked through a couple pages in a couple of different threads, and I thought I'd found the way to make it show up (Including actually activating it lol) but I still cannot see it on Syth's profile.
bird and bear and hare and fish give my love her fondest wish
: You can not see the pet nomination link of your own pets if you're logged in. So you have to either log out or open up the page in a different browser. :]
Well, that is completely stupid!
Thanks very much.
/kidnaps nephew's account to look/
bird and bear and hare and fish give my love her fondest wish
It would be great if you could add how to add more text divs on pet profiles, if that's the right term lol.
Also I want to put my pet's stats on a different div is that possible? And I'm having issues with my profile. Every time I click on one of the links the page jumps down. Is there a way to keep it at the top of the page? this is the profile
<3 <3
: What do you mean by text divs exactly? Also, it is possible to put them in a different div if you copy them, but I'm not sure whether that's allowed by the rules (you'll have to check).
And the reason the page moves down is because your has been moved down. If you move that div back up to the top of the page, the problem should be solved. :]
Like can you have more than one text box on a pet profile? I've tried to put the stats on a different div but it shows up on the background like it's not on the div. I'll set top to 0 and see if that fixes it.
<3 <3
- Maybe I can help? What exactly are you trying to do with your stats that you want them in a separate div? You can move your stats separately from the other pet info where-ever you want them, add background, border, etc.
You can add as many text boxes as you want. You just need to name the divs different things and code for each one. Like text1, text2...
: You can have as many boxes as you want on a pet profile, but they will always be contained in the div.
Could you perhaps show me screenshot of what you mean? I'm not sure what the problem is that you're describing. Also, have you checked whether this is in accordance to the rules?