• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Forum moderator applications are now open! Click here for details.
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

CSS within PC: Lesson 2, "Positioning and Padding"

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years

Good morning class!

Welcome to your official class on CSS within PC. This is my first time actually really teaching so bear with me! First things first, let's have that register!


Spoiler: Rolecall!
Archy said:
Lornami said:
Quajutsu said:
Urugamosu said:

What Actually is CSS?
This box was made using CSS
CSS stands for Cascading Style Sheets and is a simple way to add styles to web documents and pages. On PC, CSS is used to improve the appearance of threads, posts, signatures, profiles, blogs and even usertitles to some extent. CSS instructs your web browser how it should display various elements on your screen. What colours, fonts, positions and images should be displayed and how. For example the box to the right of this text block here was made using CSS telling your browser to display a box with a background color of #EEEEEE and a black border right of this text, with text inside it.


So where should we begin?
Well, the beginning is usually the best. But in this case, what constitutes the beginning? There's no real 'entry point' when it comes to CSS, but there are definitely ways to make your life easier when it comes to learning it. First things first you need to understand the codes you'll be using, before you implement them. I'm going to give you all a few codes to learn and get your heads around. If you don't understand how these work after I've explained, don't hesitate to message me or ask here for more help. CSS is quite a complicated subject.
Here are some codes to start off with:

- 'background-color:' - this sets the colour that will fill the box, behind everything else within the box. Normally colours used will be in Hexadecimal format, which is the format using an octothorpe followed by six digits, from 0-9 and a-f. For example, the colour white would be #FFFFFF. I wont go into the details of hexadecimal colours, since that's a different subject entirely. You can look up colours and their hexadecimal codes very easily mind you, so it's not something you need to know.
- 'width:' and 'height:' - these two values will set how large your box is. The values used can be 'auto' which decides a value based on defaults for the code your browser has, a value in px which tells the browser how many pixels wide and high to display the box or a value in % which takes up that percentage of width/height from your screen's resolution.
- 'border:' - this code controls the border that can surround the box you are creating. This code is used when grouping multiple specifications for the border into one. For example, a border code could look like this: border: 2px solid #000000; which would create a border two pixels thick, that is a solid line and is the colour black. Solid can be changed for dashed, dotted, inset and outset to produce different border styles.
- 'font-size:' - this is used, quite obviously, to control the size of the text inside the box. The sizes can be arranged in px, or in em where 1em = 16px. This is especially handy when dealing with large headers.
- 'background-image:' - this can be swapped with background-color to have an image as your background instead.
- 'color:' - this will colour your text using the hexadecimal colours.
How to begin using these codes
Firstly you should know of the two vBulletin codes that PC uses to signify the use of a CSS code. They are [cd=][/cd] and [div=""][/div]. Both are acceptable, however out of personal preference, I always use [cd=][/cd] due to the convenience of not needing "" to surround the code. After the = you would then place a chain of codes, separated by a semicolon ; indicating the start of the next code. A colon : indicates the start of a value for the current code. Values will relate to the code used, and only certain values will work, while anything else will break the code you used. For the codes I listed earlier, I will now put a list of values to go with them.

- 'background-color:' - #000000 - #FFFFFF
- 'width:' and 'height:' - auto, 0-999999px, 0-100%
- 'border:' - this has three values. 1st: 0-999999px (designating the thickness of the border); 2nd: solid, dashed, dotted, inset, outset (designating the style of the border); 3rd: #000000 - #FFFFFF (designating the colour of the border). Leave a blank space between each value.
- 'font-size:' - 0-999999px. Bear in mind the font size I am using is 14px for regular text.
- 'background-image:' - url('<url>'), none, initial, inherit. Most of the time, you'll be using the url value, and if not then you simply will not use 'background-image:'
- 'color:' - #000000 - #FFFFFF.

For example, to create a black box with an exclamation mark in, we could use this code:

[cd= width:50px;height:50px;background-color:#000000;]![/cd]

which would result in

!


Of course this can be tweaked around with many more codes to look much better, for example placing the exclamation mark in the center of the box. But we'll come to that in due time. To start off with, pixel widths and heights are easier to learn, because percentage widths sometimes can behave unexpectedly when put with certain other codes. Pixel widths rarely pose any issues. I almost always set heights to 'auto' unless I am using an overflow code, which we will cover later on.​

Homework!

Because what class would be complete without it? For now, I'd like you to post the code you think would make a box filled with black, with a white 2px border. This box would be 200px x 200px and would contain white text, which says 'homework'. You should not actually post the finished product, just the code.

If you don't know how to do this, type out your code then put [noparse][/noparse] around the entire code. Your code should be your own, and I will correct any mistakes, and build upon them in the next lesson!
 
Last edited:
2,413
Posts
16
Years
Spoiler:
 

Urugamosu

Happy, and Searching.
588
Posts
15
Years
Is this alright?

Spoiler:
 

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years
Spoiler:

Is this alright?

Spoiler:

Both have done a very good job! Both codes would work just fine :) Just waiting on the other two now!
 

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years
EDIT BIG TIME: Right, I missed a couple of things (that I am now aware of)

This is fine?

[cd= width:200px;height:200px;colour:#ffffff;background colour:#000000;border:2px solid #FFFFFF;]Homework![/cd]

The problem with your code Archy, very sorry I didn't notice this, is that you have used colour with a u. It should be without, spelt color. Also, you have put background colour without a dash. It should look like this: background-color. If you forget the dash, the code will not work, and nothing will happen. I don't know how I missed this, but I did. Anyway, there you go.
 
Last edited:

Wicked3DS

[b]Until the very end.[/b]
4,592
Posts
10
Years
Spoiler:
 

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years

Positioning is tricky!

So you all correctly managed your homework, with only one or two mistakes, which I'll address more after the register. Your lesson today will be on positioning, and covering the finer points that come with positioning and what can mess your code up!


Spoiler: Rolecall!
Archy said:
Lornami said:
Quajutsu said:
Urugamosu said:

Homework Recap
Yeah, so the homework was mostly good. You must remember that CSS will always use American spells; omit the "u" from colour! Also, any code you insert must be as one whole "word" and so two words will be joined with a "-" to make codes like "background-color" and not "background color" which will not work. Make sure to bear this in mind. The correct code appears as such:

[cd= width:200px;height:200px;border:2px solid #FFFFFF;background-color:#000000;color:#FFFFFF]Homework[/cd]

Positioning
Positioning is achieved mostly in just one way, but there are various "styles" to positioning. The important thing to remember is even fine adjustments can greatly affect how your coding will appear. You must also bear in mind that on different screens adjustments using percentages and fixed widths will appear differently, and behave differently. As such, it's a good idea to constantly keep your screen's resolution in mind, and the average resolution of screens around PC. As a measure, my resolution I use is 1920x1080, but the average I always presume to be between this and 1280x768. I often make sure that codes don't use positions and widths/heights exceeding 1366x768.
Here are the codes we will need to know to use positioning:

- 'position:static;/absolute;/fixed;/relative;/initial;' - static will place the element and all consequential elements as it would appear naturally, had you not entered positioning codes at all. Absolute will position the element relative to the first containing (ancestor) element that is not static. Fixed will position the element relative to your web browser's window. Relative will position the element relative to its normal position. 'left:13px;' will add 13px to the element's left. And finally initial will set the position value to the default, which is "static". Always use the 'absolute;' value when working with percentage positioning values.
- 'top:auto;/?px;/?%/;initial;' - top will add a certain value to the element's top side (shifts it down). 'auto' will let the browser determine the amount the element is shifted. '?px' will add a pixel value to the element's top side. '?%' will add a length to the element's topside, pertaining to the percentage size of the containing element. 'initial;' will set the value to the default, which is 'auto'.
- 'bottom:auto;/?px;/?%;/initial;/' - bottom will add a certain value to the element's bottom side (shifts it up). The values behave the same as top.
- 'left:auto;/?px;/?%;/initial;/' - left will add a certain value to the element's left side (shifts it right). The values behave the same as top
- 'right:auto;/?px;/?%;/initial;/' - right will add a certain value to the element's right side (shifts it left). The values behave the same as top.
Padding
Padding will create a 'border' within the element to give a distance between the edge of the element and any child elements within the element. Padding is fairly straight forward, and is often used to make elements look a little cleaner.

The code(s) are as follows:

- 'padding:?px ?px ?px ?px;/?px ?px ?px;/?px ?px;/?px;' - this is a shorthand way of applying padding to an element. With four values entered, the top, right, bottom and left sides are adjusted respective to the order of the values. '5px 10px 15px 5px;' would result in a top padding of 5px, right padding of 10px, bottom padding of 15px and a left padding of 5px. With three values, top, left and right, then bottom paddings are adjusted, respective to the order. '5px 10px 15px;' would result in a top padding of 5px, left and right padding of 10px and a bottom padding of 15px. With two values the top and bottom, then left and right paddings are adjust respective to the order of values. '5px 10px;' would result in a top and bottom padding of 5px, and a left and right padding of 10px. And one value makes all four paddings the same value. The values can also be in percentages.
- 'padding-top:/right:/bottom:/left:?px;' - this individually adjusts the padding for each top, right, bottom and left. The values can also be in percent.

Homework!

I would like you to the element you created last lesson, and build on this. Within this element I would like a square size 50x50px that is white. This square should have a padding of 10px top and bottom, and 3px left and right and should contain the word "done". As like last time, place [noparse][/noparse] around your code, and do try not to test it. Good luck!
 
2,413
Posts
16
Years
Spoiler:


Not gonna lie this may have gone over my head.
 

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years
Spoiler:


Not gonna lie this may have gone over my head.

It's good... But I need to be able see the text haha. The way you have it right now, that's not gonna go too great :P
 
2,413
Posts
16
Years
It's good... But I need to be able see the text haha. The way you have it right now, that's not gonna go too great :P

ooooooohhh I get what you mean

Spoiler:


wait also did you mean literally work on the element last time or do a new one with the same principles?
 

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years
Just so everyone knows, since I'm on holiday, I shant be updating the class, however I still want homeworks and stuff haha :33

Anyway, next week I shall be continuing the class, with some new entrants too ^^
 
271
Posts
8
Years
When I read your "I need to be able see the text" post, my head made: Your homework description doesn't say so, it say's "should contain" and the box does contain the word.
At that point I'm also done with not testing, because I would expect that word to be visible and that means I have a wrong expactation about the interaction of the code.
So here's what I did:

Spoiler:

Is there way to have the word "done" in the forums standart color while everything in the surrounding black box is written in white?

Also will there be a homework for the positioning part of your last lesson? I totally don't get how this is used. I wanted to try and it took me some time to even realize what to type and it absolutly didn't behave the way i expected.
I wanted to try to move the white square a bit to the right, so there's a few pixels of the black square visible left of it. I guess this is better done with padding? But is it possible with positioning? What would you use positioning for? I totally don't have any idea.

Well, take your time answering... this is my usual not short post.
 

Wicked3DS

[b]Until the very end.[/b]
4,592
Posts
10
Years
Spoiler:
 

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years
Spoiler:

Perfect, good job :)

Okay, let's see if this works

Spoiler:

Just one thing, don't leave a line between codes, because it can cause your codes not to be positioned properly. Otherwise it works fine!

When I read your "I need to be able see the text" post, my head made: Your homework description doesn't say so, it say's "should contain" and the box does contain the word.
At that point I'm also done with not testing, because I would expect that word to be visible and that means I have a wrong expectation about the interaction of the code.
So here's what I did:

Spoiler:

Is there way to have the word "done" in the forums standart color while everything in the surrounding black box is written in white?

You did it in your last code. Using the "initial" value for "color" will set everything in that body to the standard colour of the forum. I didn't include it because 99% of the time it wont be used, but it is an option should you want it, so good job on finding that out!

Also will there be a homework for the positioning part of your last lesson? I totally don't get how this is used. I wanted to try and it took me some time to even realize what to type and it absolutly didn't behave the way i expected.

Yep, that's coming up!

I wanted to try to move the white square a bit to the right, so there's a few pixels of the black square visible left of it. I guess this is better done with padding? But is it possible with positioning? What would you use positioning for? I totally don't have any idea.

Well, take your time answering... this is my usual not short post.

Yep, padding is used to 'push' subsequent child bodies within a parent body away from the edge of the parent body. This can be used to force a contained body to a certain position, but more often than not positioning is used to place a body where you want it to go. I'll explain this in detail in a moment.

ooooooohhh I get what you mean

Spoiler:


wait also did you mean literally work on the element last time or do a new one with the same principles?

I did mean work on the same element as last time, but it doesn't matter much. However your code has an issue where the color isn't black inside your white box. The reason for this is that your color code reads as such: "color;#000000;"
Notice the error? You must be careful to use a : after commands and not a ;
Otherwise this would have been totally fine, but you just gotta be careful when it comes to typing out your code. a single ; instead of a : or a missing " will break your code, and these can be tricky to spot.
 

Circuit

[cd=font-weight: bold; font-style: italic; backgro
4,815
Posts
16
Years
Foreword: Please excuse the lack of any formatting in this post. I'm tired, fed up, and have literally 0 patience for code right now (irony at its finest) so yeah, just bare with how plain this post is.

Positioning

Right, so you learnt about padding, but what about positioning? Well, positioning is used in situations where padding wont do the job right. Padding affects all things inside a text box, whether it be text, images or further text boxes. Positioning is used to place one object where you want it, without affecting the placement of other objects on your screen. For example:

http://www.pokecommunity.com/showpost.php?p=8828955&postcount=1

Each text box within this post is placed using the "position" code. The reason for this is that inside the main box, each text box requires its own unique placement, which padding can't do.

For your homework, since you already have the codes needed for position, I would like to you create four red squares (#ff0000) and place them in the four corners of your original black box (remove the white one now). That's all you need to do :)

P.S. Message/Quote me if you need extra information to help you, it can be very tricky, so try your best. I'll allow you to preview your codes for this homework, and you no longer have to add [noparse][/noparse] to your codes. Just post your working code in a spoiler :)
 
271
Posts
8
Years
Here's my homework:
Spoiler:


If you don't mind, here's some notes by myself for myself...
Spoiler:


PS: You might wanna do a rolecall so people actually notice there's something new here ^^
 
Last edited:
2,413
Posts
16
Years
YO I FORGOT
uhhh I forgot everything we were learning let's try

Spoiler:




oh MY GOD I think I got it, if I couldn't have previewed it that would have been a mess. Though I wonder if I did it in a more round about way, not sure, it's kind of hard to get my head wrapped around it.
 
Last edited:
Back
Top