• Before posting a question, please check our Frequently Asked Questions page as well as previous threads here. Odds are you aren't the first to ask, and you may find the answer without having to post!

Coding questions

Your image URL does not seem to link to an actual image.  That may be your problem.  It should work otherwise in this context:


<p style="background-color: #e6d250; background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");">lorem ipsum</p>
 
All of your coding looks really great so far.  If you have any further questions, feel free to PM me. :)
 
At the very top of your code (before the <style> tag and everything), you have to put some text in order for the CSS to work on rpn. A lot of people have been using <p style="display: none;">random message here</p> to get it done. You can also just use empty <p> tags.


Edit:


@IctoraPost


Call me stupid, but it never occurred to me that I could download a separate html tester. :O


That and I don't use javascript/jquery, since I only learned html for rpn, so I thought an online tester would suffice. Do you have any downloadable ones that you suggest?


Sometimes, when I post a code on rpn, it screws with the margins I set? I always use px instead of percent, so it isn't the width being screwy. The issue is most noticeable when you view the code on different themes, although it's not always an issue. I don't have this problem when going from html tester to html tester, so I think it just has to do with the fact that I'm pasting code into a post rather than a whole site page?



Sublime Text and Brackets are the best I've found. They have a lot of features that online editors don't have.


Not sure about the margins, but padding and wide borders are pretty screwed up here because the site defults to box-sizing:border-box;, which makes the element include padding and borders in its width and height.
 
on second thought. i figured it out 


how do you apply a gradient into a background?
 
Last edited by a moderator:
thank you but without turning up blank?



#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}


Linear Gradient - Top to Bottom



This linear gradient starts at the top. It starts red, transitioning to yellow:


 

Note: Internet Explorer 9 and earlier versions do not support gradients.
 
Last edited by a moderator:
i did it.


bump.


hi does anyone know how to customize the scrollbar without screwing with the site? 


here's the code I

<div style="border:9px double #049400  ;width:490px;height:500px;margin:auto;background-color:#B0FF31;overflow:auto">
    <div data-role="contentPage">
        <div data-role="contentPage">
            <p style="text-align: center;">
                &nbsp;
            </p>


            <div data-role="contentPage">
                <p style="text-align: center;">
                    <img alt="kaiego.png" src="https://www.rpnation.com/uploads/monthly_2017_01/large.kaiego.png.9b2807c2e8ff60cd82298d2288d4a8dd.png">
                </p>
            </div>


            <hr style="border:5px double #049400  ;">
            <p style="text-align: center;">
                originally, this uses to be an old role play called guardians of nature. However, it didn&#39;t get off the ground as I hoped and it went up and died. So, I&#39;ve come to the decision to raise it from its grave and fix a few bugs.
            </p>


            <p style="text-align: center;">
                &nbsp;
            </p>


            <p style="text-align: center;">
                you and a select few have been chosen by Gaia&nbsp;herself to fend off the encroaching&nbsp;threat of an infectious hive-mind. they seek to only consume&nbsp;and expand as their queen comes to your world as a new colony.
            </p>


            <p style="text-align: center;">
                &nbsp;
            </p>


            <p style="text-align: center;">
                this is where you come in. this rp, like the last one, has limited slots. so, do bear in mind that when that slot is full, we might not be able to accept you in unless something happens.
            </p>
        </div>
    </div>
</div>


<p>
    &nbsp;
</p>






5



<style type="text/css">
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 31px;
  height: 31px;
}
::-webkit-scrollbar-thumb {
  background: #c2e941;
  border: 12px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #72450e;
  border: 23px none #ffffff;
  border-radius: 17px;
}
::-webkit-scrollbar-track:hover {
  background: #00cc05;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
</style>






 
 
You have to set a class onto the div then select that class before your scrollbar selectors. So:

Code:
<style>
  
.scrolly::-webkit-scrollbar {

}
  
</style>

<div class="scrolly">
	content
</div>
 
and it's blank. i hate it when coders aren't clear


can anyone show me an example that was done in the source code with the code so i can analyzeit? 
 
Last edited by a moderator:
...@IctoraPost post essentially did explain it. You use CSS instead of inline and you format it just as he/she had shown. Honestly I literally googled "scrollbar customization css" and there're hundreds upon hundreds of sites explaining it quite clearly. With HTML/CSS, 'just google it' is the most viable option rather than shading people who're trying to help. There's a common concept called 'independent studying' that I will highly recommend. If your main faucet in learning HTML/CSS is relying on bombarding individuals with questions whilst lowkey putting them down...I don't even know at this point.


If you need examples to analyze, with W3Schools they provide an example for everything they're attempting to teach you. http://www.w3schools.com/
 
Last edited by a moderator:
...@IctoraPost post essentially did explain it. You use CSS instead of inline and you format it just as he/she had shown. Honestly I literally googled "scrollbar customization css" and there're hundreds upon hundreds of sites explaining it quite clearly. With HTML/CSS, 'just google it' is the most viable option rather than shading people who're trying to help. There's a common concept called 'independent studying' that I will highly recommend. If your main faucet in learning HTML/CSS is relying on bombarding individuals with questions whilst lowkey putting them down...I don't even know at this point.


If you need examples to analyze, with W3Schools they provide an example for everything they're attempting to teach you. http://www.w3schools.com/

Thank you. 
 
I'm quite frankly sorry for that. I didn't mean to come off as some guy (I'm actually female) trying weasel people to doing the stuff for me. It's just that I'm not sure if it even applies with the source editor since you need to declare the document first with something rather than <!doctype>. you think that would be easier until that stuff doesn't seem to work.


I guess how I sort of learn best is by using references and looking at things on a visual level. this method might not help, however, since it might need javascript to work. with that said, I'm really sorry for acting like some shady person, but it just doesn't help someone like me with a different way of learning. that and well, last time I checked, I haven't seen a youtube video that does something within a source editor. I've just hadn't. not even books cover that.


this feature right here is something I've seen as a unique. only but a select few have it. so it makes sense that in some cases, not much has been explored. maybe I'm either just lazy or out of luck, but to be blunt, it's just not working for me. this is a craft that out of all the things I've done, is out of reach.


I'm sorry, but I'll just stick to div boxes until something comes along...in 2019, that is.


tl;dr: I'm sorry being such a weasel since I'm too lazy to actually figure it out. please don't hurt me.


note: please accept my apology. i felt bad honestly and I mean it. 

12 hours ago, Pyosimros said:



...@IctoraPost post essentially did explain it. You use CSS instead of inline and you format it just as he/she had shown. Honestly I literally googled "scrollbar customization css" and there're hundreds upon hundreds of sites explaining it quite clearly. With HTML/CSS, 'just google it' is the most viable option rather than shading people who're trying to help. There's a common concept called 'independent studying' that I will highly recommend. If your main faucet in learning HTML/CSS is relying on bombarding individuals with questions whilst lowkey putting them down...I don't even know at this point.


If you need examples to analyze, with W3Schools they provide an example for everything they're attempting to teach you. http://www.w3schools.com/




 






 

if you read that post, that meant that i didn't know anybody. we all have lives and i can see why people don't share their secrets most of the time.


ps, i know overflow, i'm just trying to figure out a way to apply changes to the scroll bar.
 
I'm quite frankly sorry for that. I didn't mean to come off as some guy (I'm actually female) trying weasel people to doing the stuff for me. It's just that I'm not sure if it even applies with the source editor since you need to declare the document first with something rather than <!doctype>. you think that would be easier until that stuff doesn't seem to work.


I guess how I sort of learn best is by using references and looking at things on a visual level. this method might not help, however, since it might need javascript to work. with that said, I'm really sorry for acting like some shady person, but it just doesn't help someone like me with a different way of learning. that and well, last time I checked, I haven't seen a youtube video that does something within a source editor. I've just hadn't. not even books cover that.


this feature right here is something I've seen as a unique. only but a select few have it. so it makes sense that in some cases, not much has been explored. maybe I'm either just lazy or out of luck, but to be blunt, it's just not working for me. this is a craft that out of all the things I've done, is out of reach.


I'm sorry, but I'll just stick to div boxes until something comes along...in 2019, that is.


tl;dr: I'm sorry being such a weasel since I'm too lazy to actually figure it out. please don't hurt me.


note: please accept my apology. i felt bad honestly and I mean it. 


if you read that post, that meant that i didn't know anybody. we all have lives and i can see why people don't share their secrets most of the time.


ps, i know overflow, i'm just trying to figure out a way to apply changes to the scroll bar.

just like other elements, you can apply webkit scrollbar to just the div class/id.
 
i made a well thought out post, and i get this....I'm kidding. thank you. a bit vague but thank you.

Sorry.  I wrote that on my way out the door, and realized about 5 seconds later it wasn't enough info for a beginner.  Web design is my (future) job, so I tend to forget detail is important lol.


Look into child elements.  It will show you how to style certain elements with others.  It'll work for a scrollbar the same way it'll work for a link or list.  Something along the lines of "child element css" should do it.
 
Just now, fattiest fat cat said:



Sorry.  I wrote that on my way out the door, and realized about 5 seconds later it wasn't enough info for a beginner.  Web design is my (future) job, so I tend to forget detail is important lol.


Look into child elements.  It will show you how to style certain elements with others.  It'll work for a scrollbar the same way it'll work for a link or list.  Something along the lines of "child element css" should do it.




 

thank you very much.
 
Anyone know how to put borders on the inside of a div tag? I'm assuming it has to do with the padding of the border but I'm not sure how to go about writing it...
 
46 minutes ago, StoneWolf18 said:



Anyone know how to put borders on the inside of a div tag? I'm assuming it has to do with the padding of the border but I'm not sure how to go about writing it...




 



<div style="border:1px solid #0f0f0f;">lorem ipsum</div>


1px may be replaced with any positive integer.  Ex: 3px.


solid may be replaced with dotted, dashed, etc (look up HTML border property for more information)


#0f0f0f may be replaced with any hex value.
 
<div style="border:1px solid #0f0f0f;">lorem ipsum</div>


1px may be replaced with any positive integer.  Ex: 3px.


solid may be replaced with dotted, dashed, etc (look up HTML border property for more information)


#0f0f0f may be replaced with any hex value.



Oh yes I'm aware of how to use the border tag and it's properties, just how to get it on the inside of a div tag instead of as the border is what I was wondering. ^^
 
2 minutes ago, StoneWolf18 said:





Oh yes I'm aware of how to use the border tag and it's properties, just how to get it on the inside of a div tag instead of as the border is what I was wondering. ^^




 



Hmm, I'm a little confused as to what you mean, but I think this may be what you're looking for?


<div style="width:100%;"><p style="border:1px solid #0f0f0f;">lorem ipsum</p></div>
 
No worries, @Ambela helped me out!

Code:
<style type="text/css">
.stonecode1{
margin:auto;
background-color:#e6ccff;
height:500px;
width:1000px;
overflow:hidden;
padding:10px;}

.stoneborder{
border:white double 2px;
height:480px;}</style>
<div class="stonecode1">
	<div class="stoneborder">
		<div style="color: white; font-family: &quot;Brush Script MT&quot;, cursive; font-size: 48px; text-align: center;">
			Character Name Here
		</div>
	</div>
</div>
 
hey, is it possible to do text effects?




.rainbow {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}

Such as? :3 (I just learned this today and am in love...)
 

Users who are viewing this thread

Back
Top