Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
If you are going to create a grid-based design, it's important that all page elements relate to the grid in some way. This will help your design achieve a more balanced composition and help you create consistent layouts from page to page, which is especially important for fixed layouts. To illustrate this, we will work with the addition of assets to our page and make sure that they follow the layout guides laid down by our initial grid. And to that end, I have a document here, the fixed_planning_elements, which is just a modified version of our earlier planning document. You can find the finished version of this in the Assets folder, directly in your exercise files.
Again, it's not important that you have this open. We're just sort of going over some concepts here. This is another thing that I do when I plan sites. In addition to planning out the columns, I also plan out any type of assets that might go into my content and how it relates to that grid by creating some default measurements for it. As you can see in the left column here, I have several default sizes for assets, including assets that might go side by side. You are free to kind of play around with these and experiment with different sizes and sort of compare how they might relate to each other. For example, I could certainly work with the height of these, make a couple of them perhaps a little bit more vertical, but what I am doing is I am making sure that each one of these adheres to the grid in some way.
So you can see they are all divisible by 16. They all fit specifically into the grid itself. Now, I've set other policies in place too. For example, in the right-hand column, the only way I want assets to display in the right-hand column is all by themselves and sort of floating in the middle of the column, so I developed a default size to do that. Whereas in the left-hand column, I have to really think about these assets and how they are going to relate to the content. Will the content flow around them? Will the content be on a line all by itself? Will it sit aligned left, or will it float in the middle of the layout? Those are all things that I have to consider, but I can use this to sort of gain some measurements.
If I have two elements that are going to sit side by side like this, for example, I now know what their width is going to be, what the gap between them is going to be, that sort of thing. So this is something I want to plan out beforehand. These don't have to be just image assets. These could be any elements that you use in your page. They could be pull quotes. They could be asides within an article. So there are all sorts of different things that these could be. They could be video. So you start planning out where those assets are going to go and how they are going to adhere to the grid. So now I am going to go back into our code, and I have opened up the grid.htm file from the 05_05 directory.
Now, you are going to notice if you look in the exercise files that there's also an images folder in that directory, and you can see we have several images here. Those images were sized based on the measurements that we determined within the planning documents. So the names of the images correspond to their widths and heights. If I go through the code of my document, I can see that those images have been added to the page so that we can see how they relate to the content and how they fit within the grid. Now, if I scroll through my code, I can also see that we have two brand-new sections right here within the main column, with the class of news, that we are going to have to style in order to fit within our layout grid as well.
Now, if I go ahead and preview this page in our browser, I can see the images look more or less harmonious with the layout and with the grid, but of course, stylistically right now, they are not interacting with the content at all. So I am going to have to work on their styling. And if I scroll down, those two sections really aren't doing anything to differentiate themselves from the content, so we are going to need to work on the styling of those as well. So I am going to go back into my code, and I am just going to add these right here underneath the footer in our layout styles. So about line 53 or so, I am just going to create some empty space here.
So the first thing I want to address is how my content is going to interact with images. So I am just going to go ahead and write a selector for my images on the page, and I am just going to float the images to the left. And I am going to set their margin to 0 for top, 1em for right-- and what that will do is it will just sort of hold the text off of the right edge of the image--0 for bottom and 0 for left. So just setting some images there. Now, if I save this and refresh my browser and go up, I can see now, for these images, the text is floating around it, and it's looking okay. But remember, we wanted this image in the right-hand column to be centered and sort of all by itself so that the text isn't wrapping around it.
For this larger image, I don't think having a text around it is very advantageous either. I think, obviously, that's hard to read. It can be very confusing. People are going to wonder if that's a caption or if there was a mistake made there. So for both of these we really need those images to sort of stand alone and by themselves within the layout. So to do that, we are going to apply a class to them. So I am going to go ahead and write the class selector, and we'll just call it largeImg. So just large image, .largeImg. And then for the properties, we'll go ahead and set the display property to block.
We'll turn floating off, so we'll say float: none, so it doesn't float. And then for margin, what we'll do for margin is we'll do 1em top and bottom, and then we'll auto-margin the left and right sides, and as we know, that's going to center that content within those columns. Well, that's only part of it. We've got to go down to those images and we've actually got to apply that. So what I am looking for is down on Line around 101, we'll find this 448_400 image, so we are going to go ahead and grab that, and I'll go ahead and apply that class to that, the largeImg class. And then scroll down a little bit further, find the 256_256 image, which is in the side, and we'll go ahead and apply the largeImg class to that as well.
So we'll go ahead and save that. Now, if I go back into the browser and refresh this, you can see what that does to the image in the sidebar. It's now sort of on its own line, the text is not floating around it, and it's centered within the column. If we go down to our larger image, it's taking up its own space, it's centered within that column, and it's interacting with the layout in a much pleasing fashion. Then the last thing we need to do here is we are going to style these two elements so that they are sitting side by side each other. In our planning document we're able to sort of sit these side by side so we know exactly how much space we need between them, and we know what their width is going be.
In this case, the width is going to be around 240 pixels based on our fixed layout. So I am going to go back into my code. I am going to scroll up to our CSS, and I'll stick with the layout styles. And what I am going to do is create a news selector, because you may have noticed the class attribute on both of those sections is news. We are going to go ahead and give it a width of 208. Remember, total width and width are not the same thing. So if I set some padding on this, I'll set 16 pixels' worth of padding, so 16 on one side, 16 on another side equals 32, add that to the 208, and then we get our 240 pixels' worth of width.
For font-size, I am going to go to 90%, which is going to just decrease the font-size inside those discreet sections just a little bit. For line-height, I am going to go to 1.8 to give a lot of space in lines, and that's just personal preference. And then for background, we are going to go ahead and give this a background color as well. I am going to do rgb (237, 226, 197), and don't forget your semicolon. And then finally, I have to handle the spacing and the positioning of these, so the margin-right for this is going to be 32 pixels, and then finally, we are also going to float them to the left.
We are almost done. I know that seems like a lot, but it's really not too much styling on these. Remember, we are floating them side by side. The margin-right is going to give us 32 pixels' worth of space between them, and then we've just sort of qualified the dimensions of the elements as well. However, remember, we only want that spacing on one side, so I am going to come in here and write another selector. I am going to say, hey, anytime you find a news section following immediately after another news section, set its margin-right to 0. So I am going to go ahead and save that, and we are going to go back into our browser.
I'll refresh the page, and you can see now we've got those two elements. The space in between them is even. And because they are based off our grid, they relate to the rest of the layout quite well. Now, if we wanted to, we can certainly polish this layout up a little bit, but the overall organization and structure of the layout is quite sound, thanks to the underlying grid that we are using. Now, I use some sort of grid on almost all my layouts, regardless of what type of layout it is. To help underscore the importance of grids in design, I want to give you some excellent resources on designing with grids, and we are going to do that in our next movie before we move on to the lab.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.