HTML stuff

[AzileQueen]

Soo, I'm a noob at HTML/CSS. Maybe not a total noob, but a noob. I guess RpN is slightly different in coding or something, because when I try to copy-paste this code into the source(button), it turns up weird. I put <style> tags between the CSS, but it's not working. Or perhaps RpN just isn't that advanced yet? Idk. Can a pro please help me out..?

 

[Dusky]

Can you explain how it's turning up weird?

 

[AzileQueen]

[message removed due to improper coding]
[Please do not target page elements such as body!]

 

[welian]

What on earth did your code do to this page?

 

[AzileQueen]

What on earth did your code do to this page?

I have no idea, sorry. D8

 

[Mitsuko]

body {max-width:600px;margin:0 auto;}

- this line of code made the page 600px wide, just remove the max-width: 600px and the page width will go back to normal!  

Hold on, i'll try to debug this one in a minute~ Would be awesome if someone has a solution for this one

 

[Dragon Slayer Arcos]

html on this site is inline. you don't need classes or i.d. for things unless you are using them for organization only.


so you would <div style="border:something; background: something; something-else:something;">Content of something here</div>


Obviously you can include multiple div's and such

 

[Mitsuko]

Okay, I think I got it. 

The code itself works spot on when you implement a div with the id slidebox (#slidebox) as a wrapper around the HTML elements.

The reason your code didn't work is because that element itself was missing (the div with the id of #slidebox). On the jsfiddle the id is located in the body tag and isn't visible in the HTML code.

So, in short, the event was being fired, but the target didn't exist. I managed to make it work on my local machine, here is the code in the attachment. Just to point out that I changed a couple of selectors (while testing). I can send you the code in a PM or post it here if you like.

 

 

[Mitsuko]

Also, don't use the body{max-width:600px} (or any major HTML elements) while posting on rpnation - it will break the styling.  xD  

 

[Fable]

Also, don't use the body{max-width:600px} (or any major HTML elements) while posting on rpnation - it will break the styling.  xD  

@labyrinthecho as they said it "breaks the style" I want to throw in there that doing this (purposefully) is against the site's rules. :3

 

[Lady Warlock]

body {max-width:600px;margin:0 auto;}
p {padding:14px 40px;}


These two elements within the code cannot be used. You cannot affect the body of a post (use a divider instead and give the divider a class) and you cannot affect "p" with CSS either. That will change every single paragraph on the page rather than just the paragraphs in your post and is against the rules. Give the paragraphs you want to change a class and then use that class in the CSS. 

 

[Dusky]

You can, however, place a div with a class that wouldn't likely be used by someone else (so not "wrapper" or whatever, but maybe your username).


And then, instead of "body" you could target .username and instead of p, you can target .username p.

 

[Mitsuko]

You can, however, place a div with a class that wouldn't likely be used by someone else (so not "wrapper" or whatever, but maybe your username).


And then, instead of "body" you could target .username and instead of p, you can target .username p.





 






 






 






 






 

A creative solution. Just a quick question, how do JavaScripts work on the forum? (Does it support the jQuery library?) @Anomaly

If it does there is a much better solution for the 'Push me" action which I have sent a PM to 'labyrinthecho'. Avoiding the whole :target selector with the anchor tag (which points to the top id using the href="#something") and doing some basic jQuery, toggling a class over the selected element which in turn affects the child element of the selected parent. Sorry for the pretty 'dumb' question, I haven't yet unlocked the 'HTML' stuff in my posts hehe. xD  

 

[IctoraPost]

A creative solution. Just a quick question, how do JavaScripts work on the forum? (Does it support the jQuery library?) @Anomaly

If it does there is a much better solution for the 'Push me" action which I have sent a PM to 'labyrinthecho'. Avoiding the whole :target selector with the anchor tag (which points to the top id using the href="#something") and doing some basic jQuery, toggling a class over the selected element which in turn affects the child element of the selected parent. Sorry for the pretty 'dumb' question, I haven't yet unlocked the 'HTML' stuff in my posts hehe. xD  

JavaScript doesn't work here, or so I've heard (I havn't unlocked the stuff yet either). Another way to do it in CSS is to use the "checkbox hack", when you put in a checkbox, hide it, stylize the label, then modfy stuff using the :checked selector.

 

[Mitsuko]

JavaScript doesn't work here, or so I've heard (I havn't unlocked the stuff yet either). Another way to do it in CSS is to use the "checkbox hack", when you put in a checkbox, hide it, then modfy stuff using the :checked selector.





 

Hmm, that sounds like a cool workaround. Thanks for the creative idea! @IctoraPost

 

[Dusky]

Basically, what Ictora said! You use input:checked + div to make tabs and accordions and such work. ^-^


:hover is also a good solution that is simpler than using checkboxes but doesn't have as much capacity for customization.