• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Div Box Chart!

MISTER UN. 0W3N

schaden f r e u d e
Hello hello! Mayhem here to bring you an awesome table of coding for Div Boxes! All thanks goes to FieryCold at Iwaku Roleplaying in letting me use their awesome table here! This table will be updated/changed up to fit the needs and function of RPNation. Feel free to post up information and questions in this thread in regards to Div Boxes! Happy coding, Users!

UPDATE 1: Thansk to e c h o e c h o to linking more resources for Div Boxes! W3S SCHOOLS
UPDATE 2: Thanks to Nano Nano for helping with updating the font-family area. Thanks to Fable Fable for adding extra ways to approach colored backgrounds. Thanks to astraeaaa astraeaaa for adding min and max heights AND gradient backgrounds.
UPDATE 3: Thanks to fluticasone fluticasone for the extended info on positions, pointer-events, font-style, font-weight, and vertical-align. Thanks IctoraPost IctoraPost and @@caii™ for extended resources for colors. Thanks Nano Nano , Fable Fable , and fluticasone fluticasone for lending a hand in the thread to answer questions


PROPERTYDESCRIPTIONDERIVATIVESDESCRIPTION
colorSets the color of the text.
  • color: hex|name;
  • e.g. color: #000000;
  • e.g. color: black;
font-familySpecifies the font family for the text.
  • font-family: fontname;
  • e.g. font-family: Times New Roman;
UPDATE: They kinda work for Google Fonts. But, don't expect users to have the font downloaded on to their computer already.
font-sizeSpecifies the font size of the text.
  • font-size: value;
  • e.g. font-size: 12px;
  • e.g. font-size: 2em;
background-colorSets the background color of an element.
  • background-color: hex|name;
  • e.g. background-color: #000000;
  • e.g. background-color: black;
  • e.g. background-color: rgba(44,151,222, 0.5);
background:linear-gradientmakes the background a gradient. you can put more than two colours and transparent as well.
  • background:linear-gradient(to right/left, hex/name, hex/name);
background:urlSets an image as the background of an element.
  • background:url(url here);
background:url(url here) repeat center fixed;Fixes the image so that it doesn't scroll with the page.
background:url(url here) no-repeat;Prevents the background image from repeating.
background:url(url here) repeat-x;Repeats the image along the x-axis (horizontal).
background:url(url here) repeat-y;Repeats the image along the y-axis (vertical).
background-sizeSets the dimensions of the background image. Width first, then height.
  • background-size: value value;
  • e.g. background-size: 400px 200px;
  • e.g. background-size: 100% 50%;
background-positionSets the starting position of the background image. This is used with the background:url property, which sets the image. The first value specifies the horizontal position whereas the second value specifies the vertical position.
  • background-position: value value;
  • e.g. background-position: 0% 0%; (top left corner)
  • e.g. background-position; 100% 100%; (bottom right corner)
borderSets the style, color and thickness of the edge or boundary of an element.
  • border: value style color;
  • e.g. border: 1px dotted #000000;
border-left: value style color; border-right: value style color; border-top: value style color; border-bottom: value style color;Sets properties of SPECIFIC borders; side-specific.
border-style (e.g. border-style: dotted solid dashed double)Another way of coding the style for each border side. Follows the TRBL rule. From the example on the left:
  • top border is dotted
  • right border is solid
  • bottom border is dashed
  • left border is double
There are also groove, ridge, inset, outset.
border-radiusSets the roundness of the border corners.
  • border-radius: value;
  • e.g. border-radius: 14px;
border-top-left-radius: value; border-top-right-radius: value; border-bottom-left-radius: value; border-bottom-right-radius: value;Sets roundness of SPECIFIC border corners.
box-shadowAttaches one or more shadows to an element. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.
  • box-shadow: h-shadow v-shadow blur spread color;
  • box-shadow: 1px 1px 1px #000000;
widthSets the width of an element.
  • width: value;
  • e.g. width: 200px;
heightSets the height of an element.
  • height: value;
  • e.g. height: 200px;
min-heightthe box will be that height and if the text surpasses it it will automatically expand
max-heightthe box will be that height and if the text surpasses it it will automatically turn into a scrollie (therefore you must add overflow:auto with it)
marginSets the distance between the element and other elements.
  • margin: value;
  • e.g. margin: 20px;
margin-left: value; margin-right: value; margin-top: value; margin-bottom: value;Sets the left/right/top/bottom margin of an element respectively.
margin-left: auto; margin-right: auto; OR just margin: auto;Centers the element.
paddingSets the distance between the element and the border.
  • padding: value;
  • e.g. padding: 20px;
padding-left: value; padding-right: value; padding-top: value; padding-bottom: value;Sets the left/right/top/bottom padding of an element respectively.
text-alignAligns the element.
  • text-align: left|right|center|justify;
text-indentAdds indentation to the first line in a text block.
  • text-indent: value;
  • e.g. text-indent: 20px;
text-shadow Adds shadow to the text.
  • text-shadow: h-shadow v-shadow blur-radius color;
  • e.g. text-shadow: 2px 2x 3px #000000;
text-transformControls the capitalization of the text.text-transform: uppercase;Transforms all characters to uppercase.
text-transform: lowercase;Transforms all characters to lowercase.
text-transform: capitalize;Capitalizes the first character of each word.
text-overflowSpecifies how overflowed content that is not displayed should be signaled to the user.text-overflow: clipped;Overflowed content is clipped.
text-overflow: ellipsis;Overflowed content is represented by an ellipsis.
line-heightSpecifies the distance between lines.
  • line-height: value;
  • e.g. line-height: 2em;
letter-spacingIncreases or decreases the space between characters in a text.
  • letter-spacing: value;
  • e.g. letter-spacing: 2px;
  • e.g. letter-spacing: -2px;
word-spacingIncreases or decreases the space between words in a text.
  • word-spacing: value;
  • e.g. word-spacing: 10px;
  • e.g. word-spacing: -10px;
opacity Sets the transparency of an element, with 0.0 being fully transparent and 1.0 being fully opaque.
  • opacity: value;
  • e.g. opacity: 0.5;
display: noneHides the element.
display: inline-blockEnsures that the content wraps nicely when the browser is resized.
overflow-xSpecifies what happens if content overflows an element box along the x-axis (horizontally).overflow-x: hidden;Hides the overflowing content.
overflow-x: scroll;Displays overflowing text along a particular direction (x-axis, horizontal).
overflow-ySpecifies what happens if content overflows an element box along the y-axis (vertically).overflow-y: hidden;Hides the overflowing content.
overflow-y: scroll;Displays the overflowing text along a particular direction (y-axis, vertical).
white-space: nowrapPrevents long words from breaking and moving on to the next line.
transform: rotate(#deg)Rotates the element.
positionSpecifies the type of positioning method used for an element (static, relative, absolute or fixed).
  • position: static|absolute|fixed|relative|initial|inherit;
  • static: Default value. Elements render in order, as they appear in the document flow
  • absolute: The element is positioned relative to its first positioned (not static) ancestor element
  • fixed: The element is positioned relative to the browser window
  • relative: The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
  • initial: Sets this property to its default value
  • inherit: inherits this property from its parent element
pointer-events: none;most useful for disabling the "click to view at full size" thing on images
font-styleAdds a "style" to your font. Oblique skews your letters (8 to 12 degrees usually) while italic is an actual italic font style (especially valid for Serif typefaces like Times New Roman)
  • font-style: normal|oblique|italic;
font-weightdefines your letter thickness. For the number parameter, it runs from 100-900, with 400 being normal.
  • font-weight: normal|bold|bolder|lighter|number;
vertical-alignsets the vertical alignment of an element; its use is especially apparent when using two inline-blocks next to each other. For more info, go here.
 
Last edited:
The font-family does work with Google Fonts.

Edit: I thought it did, but it was probably just because I have them installed on my computer.
 
Last edited:
You an use fonts from google fonts for font-family. You just have to import them. If you go on google fonts and select one, two, or however many fonts you want, theyre's this one tab which will give you the link to import them. It's easier to just use the font bbcode though. xP
 
I suggest an addition of using RGBA colors since it'll allow for opacity as well. Doesn't show well on this white BG, so showing both.

With rgba(44,151,222, 0.5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus rutrum lacus, id suscipit augue. Quisque tempus finibus justo, non cursus leo finibus consectetur. Ut tempor elit sit amet sapien sodales, non rutrum risus blandit. Aliquam lacinia est id fermentum blandit. Curabitur urna justo, lacinia at turpis sit amet, iaculis porta turpis. Suspendisse eget interdum diam, eu sodales justo. Praesent vel sagittis nisi, pretium finibus quam. Praesent condimentum condimentum vulputate. Aliquam erat volutpat. Sed auctor sed odio et pharetra. Proin non finibus turpis. Etiam sagittis scelerisque mauris, pretium viverra tortor semper nec.

With rgba(44,151,222, 1.0)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus rutrum lacus, id suscipit augue. Quisque tempus finibus justo, non cursus leo finibus consectetur. Ut tempor elit sit amet sapien sodales, non rutrum risus blandit. Aliquam lacinia est id fermentum blandit. Curabitur urna justo, lacinia at turpis sit amet, iaculis porta turpis. Suspendisse eget interdum diam, eu sodales justo. Praesent vel sagittis nisi, pretium finibus quam. Praesent condimentum condimentum vulputate. Aliquam erat volutpat. Sed auctor sed odio et pharetra. Proin non finibus turpis. Etiam sagittis scelerisque mauris, pretium viverra tortor semper nec.
 
You an use fonts from google fonts for font-family. You just have to import them. If you go on google fonts and select one, two, or however many fonts you want, theyre's this one tab which will give you the link to import them. It's easier to just use the font bbcode though. xP
Yeah, that's what I thought, I just figured it would be easier not to say anything about importing since it's just easier to use BBCode for it. cx
 
tysm for this!

for height you can add min-height and max-height:
min-height means that the box will be that height and if the text surpasses it it will automatically expand
max-height means that the box will be that height and if the text surpasses it it will automatically turn into a scrollie (therefore you must add overflow:auto with it)

i did a load of coding over on another rp site so imma try to remember all the other cool tricks u can do to add to this cx
 
aaand another cx
background:linear-gradient(to right/left, colour, colour)
basically makes the background a gradient. you can put more than two colours and transparent as well.
 
Oh yeah! I should add the box shadow feature on here... xD When I'm not hands deep in coding. Just as a snippet:
box-shadow: 1px 1px 1px 1px #080004;
 
position: relative
I've only used relative so far, as it's the most applicable for inline-styling, which is what we're using here on RPN
it adjusts your div box's position based on what its original position was

pointer-events: none;
most useful for disabling the "click to view at full size" thing on images

it's also worth adding "display: block"
it automatically places anything after it underneath it, which is useful in some instances

font-style: normal/oblique/italic
pretty self explanatory. Oblique skews your letters (8 to 12 degrees usually) while italic is an actual italic font style (especially valid for Serif typefaces like Times New Roman)

font-weight: normal / bold / bolder / lighter / number
defines your letter thickness
for the number parameter, it runs from 100-900, with 400 being normal.

vertical-align: top / middle / bottom
its use is especially apparent when using two inline-blocks next to each other

edit:
oh yeah in box-shadow, you can set it as "inset" and it'll put the shadow inside the div box
 
Last edited:
Position: absolute works too, though only correctly when the parent is set with position: relative, since it'll be positioned relative to it's ancestor element. It helps for being able to position elements better with top, left, right and bottom.

Never make an element with the absolute position unless it's inside a different element, such as a box or something with position: relative.
 
There's also hsl for picking colors. It's a lot more intuitive than hex or rgb and you can change colors pretty easily with it.
Mhm, I was mostly posting that for people who edit pictures with Photoshop and want to use colors from the photos captured with the eyedropper tool. In case they want to change opacity and all of that.
 
Mhm, I was mostly posting that for people who edit pictures with Photoshop and want to use colors from the photos captured with the eyedropper tool. In case they want to change opacity and all of that.

And I was posting that for people who may want an alternative system.
 
Hello! I have a question, is there a specific code or way to have codes fit nicely in any monitor screen? (( I know mobile screen resolution vs. monitor do not)).
For example, on my ASUS laptop, the code is perfectly aligned to how I want it. But on this "gaming" monitor that I''m using at my cousin's stretches the whole screen solution wider and taller than an average pc / laptop monitor.
I was just wondering if there was a fixed width, height, etc. alignment since I'm still new at coding and it'll be wonderful to know if there was a way! Thank you for reading this<3.
 
Hello! I have a question, is there a specific code or way to have codes fit nicely in any monitor screen? (( I know mobile screen resolution vs. monitor do not)).
For example, on my ASUS laptop, the code is perfectly aligned to how I want it. But on this "gaming" monitor that I''m using at my cousin's stretches the whole screen solution wider and taller than an average pc / laptop monitor.
I was just wondering if there was a fixed width, height, etc. alignment since I'm still new at coding and it'll be wonderful to know if there was a way! Thank you for reading this<3.
To get a fixed width, height, line-height, etc, you measure in px instead of percentages
 
Hello! I have a question, is there a specific code or way to have codes fit nicely in any monitor screen? (( I know mobile screen resolution vs. monitor do not)).
For example, on my ASUS laptop, the code is perfectly aligned to how I want it. But on this "gaming" monitor that I''m using at my cousin's stretches the whole screen solution wider and taller than an average pc / laptop monitor.
I was just wondering if there was a fixed width, height, etc. alignment since I'm still new at coding and it'll be wonderful to know if there was a way! Thank you for reading this<3.
There is coding that is meant for adjusting to a devices resolution, however that never worked on RPN back on CSS/HTML and it probably won't work now. It's got a bit more to it that a single line of coding. Here is what you can do;

Do not set the width. Setting a width such as - width:800px - means it'll be 800px on all devices. You can set a min and max width. So, min width means it'll only go as small as X pixels and max width will only go as wide as X pixels.
 

Users who are viewing this thread

Back
Top