Resource Div Box Chart!

[MISTER UN. 0W3N]

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

PROPERTY	DESCRIPTION	DERIVATIVES	DESCRIPTION
color	Sets the color of the text. color: hex|name; e.g. color: #000000; e.g. color: black;
font-family	Specifies 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-size	Specifies the font size of the text. font-size: value; e.g. font-size: 12px; e.g. font-size: 2em;
background-color	Sets 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-gradient	makes 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:url	Sets 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-size	Sets 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-position	Sets 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)
border	Sets 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-radius	Sets 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-shadow	Attaches 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;
width	Sets the width of an element. width: value; e.g. width: 200px;
height	Sets the height of an element. height: value; e.g. height: 200px;
min-height	the box will be that height and if the text surpasses it it will automatically expand
max-height	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)
margin	Sets 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.
padding	Sets 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-align	Aligns the element. text-align: left|right|center|justify;
text-indent	Adds 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-transform	Controls 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-overflow	Specifies 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-height	Specifies the distance between lines. line-height: value; e.g. line-height: 2em;
letter-spacing	Increases or decreases the space between characters in a text. letter-spacing: value; e.g. letter-spacing: 2px; e.g. letter-spacing: -2px;
word-spacing	Increases 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: none	Hides the element.
display: inline-block	Ensures that the content wraps nicely when the browser is resized.
overflow-x	Specifies 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-y	Specifies 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: nowrap	Prevents long words from breaking and moving on to the next line.
transform: rotate(#deg)	Rotates the element.
position	Specifies 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-style	Adds 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-weight	defines your letter thickness. For the number parameter, it runs from 100-900, with 400 being normal. font-weight: normal|bold|bolder|lighter|number;
vertical-align	sets 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.

 

[e c h o]

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.

 

[MISTER UN. 0W3N]

Thanks for letting me know!

EDIT:: And... updated.

 

[e c h o]

You're welcome! I'm creating a little table of ones that aren't as commonly used to add onto it.

 

[e c h o]

Instead of making a table for it, I'll just link the resource I go back to when I can't remember certain properties. All your CSS needs will be there. https://www.w3schools.com/cssref/

 

[ewolf20]

thank you so much.

 

[Nano]

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

 

[Fable]

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.

 

[arctic]

Thank you so much for this! also you repeated padding but it doesn't really matter ~

 

[MISTER UN. 0W3N]

And... updated.

 

[e c h o]

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

 

[astraeaaa]

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

 

[MISTER UN. 0W3N]

And... updated.

 

[astraeaaa]

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.

 

[MISTER UN. 0W3N]

And, updated.

 

[MISTER UN. 0W3N]

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;

 

[fluticasone]

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

 

[e c h o]

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.

 

[e c h o]

Oh, and for those that want to covert from hex color codes to rgba: http://hex2rgba.devoth.com/

 

[IctoraPost]

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.

 

[e c h o]

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.

 

[IctoraPost]

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.

 

[deer]

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.

 

[Nano]

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.

To get a fixed width, height, line-height, etc, you measure in px instead of percentages

 

[Fable]

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.

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.