Your Favorite Games
Incremental Lesson 3 - Blocked Layouts
About this tutorial
In lesson 2, we introduced the advantages of using CSS and divs to style content. Lesson 3 will expand on that ability, providing you with the knowledge to produce a layout separated into blocks.
We'll start by explaining the difference between IDs and Classes. An ID must only have one item on the page assigned to it. This can be used for a page title or a large collection of data (for example the main body of the page with many divs contained inside it). A class, however, can be assigned to as many elements on a page as you like, be it one or one thousand.
This provides a new level of precision in styling your pages, and is something that we will be taking advantage of today. Let's open our HTML and CSS files from the last tutorial and get ready to make some big changes. We'll start by creating a few more divs.
Create a new div inside your header with the ID "game-title" and move the text "Basic Incremental Game" inside it. The other 3 divs will be collated inside their own div. Let's give that one the ID "content". Finally, we'll add a div to surround all other divs and give that one the ID "page". Your structure should look something like the following:
If you haven't started indenting your code (Notepad++ handles this for you), then now is the time to do so. In HTML, it is generally good practice to indent each of your subsequent elements. This improves readability and makes it far easier to modify your code later on.
What we're going to do now is add a border to our page so that you can see what's going on. Head into your CSS file and add the following to your #page element.
The above will add a thin border around your page element. Save your documents and load them to see the changes.
No doubt you will notice right away that the border stretches around the outside of the page. This isn't always what we want, and for our current project, not quite what we're after. We're going to narrow the page element next. Do so by adding the following line to your page element in your CSS.
Notice what happened? Our page narrowed, but it's stuck to the left side of the page! It's done this because of how the browser prints elements to the screen. Text-align only aligns text within its parent object. That means that the text inside those objects that has been aligned to the center has only done so to the object that it is inside. If we want to center an object, the easiest way would be to align the text on the object containing the parent object, right? Well, not quite.
Text align only works on certain types of objects, and since we haven't set ours up correctly, it won't work. That's fine, though, as there is a more efficient way to ensure that the object is centered correctly. We just need to use a little CSS magic to solve this problem, and using margins is the easiest way.
Important: Margins and padding affect objects in very different ways. It is important to note that in this instance, we want to use margins.
Add the following to your page element in your CSS.
Your bordered element should now be centered in the screen. Well done! Margins work by modifying the distance from the outside of the object to the edge of its parent object. In this case, since we're applying it to the page div, its parent is the body, which by default fills the screen. By telling both the left and right to be automatic, it calculates the total space available, then puts the page element half way between.
Now, you might be wondering why this tutorial is named for blocks. Let's get into that by adding a fourth div after your buildings called upgrades. We're going to take these four blocks and align them two wide and two high inside the page div.
First things first, we need to assign them a class. Remember that classes can be assigned to more than one object, while IDs can only be assigned to one. Add the class by following the same structure as the line below:
Make sure all four of your divs have this class assigned to them. This on its own, however, is not enough to do what we want. We need to assign some CSS to the class. Open your CSS file and enter ".block" followed by your { } as normal. The . indicates that the browser should look for a class rather than an ID. Anything that is entered here will be applied to all objects with that class name assigned.
Start by adding a border, the same as the one around your page object. Notice that the border reaches to the edge of the page element? We need to fix that. First off, however, lets slim down our CSS file. Take the lines from one of your divs (stats for example) and put them inside your .block class. You can then delete the CSS for the four IDs in your css file. Save and reload. Notice how the screen didn't change? Your objects are getting the styling from the class rather than their individual styles.
So how do we tell the browser to show these objects side by site? We use a display mode, of which there are many. For our current case, though, we need to set the objects to inline blocks using the following line:
Add that to your .block class. Load the page and you will find that your four blocks are now side by side. However, we wanted two blocks wide and two blocks high. Another quick adjustment and we can make this work! Add the following to your .block style in your CSS file:
And the following to your #page styling:
You might be thinking "why are we using text-align now, but not earlier?". When we have a single object to align to the center, using automatic margins is the most efficient, and can be used on any element type. However, we're now using inline-block types that, at least in our case, are lining up side by side. We want to show more than one object in a line, so we need to center them as if they were text. Note that it only works since we have set the display mode of the objects.
If you save and load now, you'll find that the page has set the width of the four blocks and aligned them to the center of the page. Remember that aligning does so to the parent object. Notice also that we used a % to set the width. It must be remembered that using % works fine, but it uses the parent object dimensions to calculate the figure. If we'd set to 100%, our block would be the exact width of the object it is inside. Also note that borders are not calculated into these measurements, so if you use borders, always make sure that you allow for them, or you might find the page displays a little strange.
The last thing we're going to do today is play around with padding. Padding is the opposite of margins, working inside the object rather than outside it. Notice that our blocks have the text pressing against the top and bottom edge? We need to change that! Again, add the following to your .block styling:
Padding can be set the same as margins, specifying a top, right, bottom, and left, or you can use the global name and set them all at once. You can even set them individually in one line, setting the values in the order listed here. Now that we've applied the padding, our text should space out a little.
Oh no! Our width has changed and our blocks are back to displaying one per line! This is because of the padding we just added. It increases the width of the objects. Play around with the width value until you get all the blocks working as designed, two per line.