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.
One of the things that I've always found interesting about web design is that even though we are all given the exact same set of tools and the same set of properties that we can control, all of that, we all still find ways to create such amazingly different content from one another. It's really a testament to everybody's creativity and originality as they are designing their sites. Now in this movie we are going to experiment with some creative ways to use the border property in the hopes that it will inspire you to start thinking about new and creative ways that you can use in CSS.
So I have the borders.htm file open from the 08_02, and I want to preview the finished file for you first so you know what it is that we are going to be creating. So the first thing that we are going to do is we are going to create a rule between two columns that acts as sort of a space divider between them. You don't always want to use background colors for columns, but sometimes it's very helpful to let the reader know that their content is separate and distinct from each other. You can use a border to do that by creating a column rule. And we are going to talk about some of the different things that you need to think about if you're going to plan and style a column rule on multicolumn layouts.
The next thing we are going to do is we are going to create some styled inset borders. You can see here we have this menu, and it gives a nice little beveled look for those elements within that background, so I kind of like that. And then the last one that we are going to do is this nice shadowbox effect that we are able to do by just using a single element and some border properties. Okay, so I am going to go back into my CSS, and we are going to work on those one at a time. If I take a look at the structure of the page, we are going to focus on the columns for first, so forgive me for scrolling really fast there.
Notice that we have a section down here with the classic of columnRule, and then we have our col1, and we have our col2. So I am going to go up into my styles, and I can see that I've got different sections here. So the inset borders styles has a section. The column rule styles has a section, and a lot of the formatting is kind of already in place for us. In the column rule styles you will notice we have a two-column layout there. We have the first column floated to the left, second column floated to the right. Now look at the spacing and the width of these. So the left column, 460 pixels wide. We have 20 pixels on either side, so that gives us a total width of 500 pixels. And then the right column is 260 pixels wide, again with 20 pixels' worth of padding on both sides.
So there we are getting a total width of 300 pixels. So when you think about something like this, in terms of like putting a border that's just going to show up kind of right in the middle of both of them, at first glance it sounds really simple. You're like, well, you just put a border on one of the edges. The problem there is the spacing. In terms of getting it into the middle of the two of them, it can be kind of tricky. So what I am going to do here is I am going to take col1 and I'm going to change its padding-right from 20 pixels to 19 pixels, because we don't want our 1-pixel border to break the layout. And you kind of have to decide which side you want that to be on.
Now when you're dealing with columns that are on the left-hand side, you typically have some type of rag over there. Now I have the text-align set to justify, but if you had left-aligned, for example, you would have a ragged text on the left-hand side. And because of that, the spacing always looks a little greater on that side than the side that has the text that is aligned next to it. So if you're going to take space away from one side versus the other, that really ought to be the side that you try to focus on. Now the next thing I am going to do is go down to the line right after that and I am just going to ahead and add a border to the right, 1 pixel solid, and we will just do $ccc for color, which is a light gray.
I am going to save that, and now I am going to preview this one in our browser, and you can see there is our column rule. Now one more thing that you need to consider here-- I want to mention this before we move on-- is that you also need to consider which column is going to be the tallest column. You don't want to do this in the shortest column. Or if you do, you need to be aware of the fact, for example, that had we done this on the right-hand column that the border would only be as tall as the column itself, so it would end about right here. So if you're going for that effect, that's fine. Just keep that in mind when you're planning out which side to place that type of a column rule on.
All right, so we are going to move on down to our next section, and we are going to create these inset rules right there in our menu. So I am going to go back to my code. I am going to go down to our inset border styles. Now there is a lot of styling going on here, but really all this is is an unordered list, and in the unordered list we've set a specific width. We've stripped all the padding out. We've thrown a padding-right of 20 pixels, and it's just so that the text won't be right up against the edge of the menu. And then we are telling it a list-style of none. And then we have some styling placed on our links and the hover. So simple for the most part.
Now right here in the inset ul li selector, that's targeting any list item inside the unordered list which is inside the inset area, here is where we are going to write our styles. So what I am going to do here is I am going to do a border-top. The top order for this is going to be 1 pixel solid, and then for color I am going to do rgb(20,20, 20). So it's a fairly dark color, very neutral, almost black. I am going to go down to the next line and I am going to do border-bottom, and for the border-bottom here we are going to do 1 pixel solid. And for the rgb value here I am going to use (55,55,55).
Now the trick to this technique is there are no margins between our list items, so they are budding right up against each other. So essentially what this is going to do is it's going to put a solid dark line at the top of the list items, which is going to be sitting right underneath, because of the border- bottom, that 1-pixel lighter line. So those two lines are going to be nestled right up against each other. Now you will also notice that I've got some styles here already where the first child, which is the first item I see, no border on the top, and then the last child which is the last item in the list, no border on the bottom.
And that's going to keep a lone border from appearing up top and a lone border appearing at bottom, which would sort of ruin the illusion. Now the other thing that I want to point out here is that color is really, really important. You will notice, for example, that the background of the inset area is a neutral gray, and at (35,35,35), that's a fairly dark neutral gray. But take a look at these offset colors. So the darker line is the darkest of all of the colors, but not by much. The lighter line is the lightest of all the colors, but not by much. When you start getting large swings and lightness values and in hue, then the illusion of that inset just falls apart.
So when you're reproducing this on your own, if you are going to try to make it something other than monochromatic, just keep the hues in a similar fashion and keep the brightness values very close to each other as well. Now I want to do one more little thing here. In the inset ul, I am going to do a border-right here of 1 pixel solid, and I am going to do the same color as the lighter line, (55,55,55). And when I save that, go back into my browser, and refresh, you can see it gives me this little separator over here on this side, and then I have those two lines stacked right one on top of each other.
So we're going to tackle our last element, which is a shadow box effect, and you can see the default styling for this element is just to have this sort of desaturated maroon background. I am going to go back into my code. I am going to scroll down into the shadow box styles. These styles are going to be a little bit more complex. So I am going to go through what's happening here kind of in a step-by-step fashion. First off, the box itself has a position of relative. Now it's going to be important in just a moment, and it has a z-index of 1. Now relative elements, remember, they are still in normal document flow, so z-index really isn't going to do a lot to them.
However, because they have positioning, by placing a z-index on this, we have what is known as a new stacking context. If you remember from earlier in the title when we talked about z-indexes, that sort of index of items stacking one on top of each other starts with a new stacking context. So now anything that we stack on top of each other or behind each other stacks within this group, rather than, say, to the body tag or the html tag. So that's the importance of that. Okay, so we have quite a few styles to write here in this box after, so let's go ahead and get started on this.
Now this is generated content. And if you're wondering about the structure of this--let me scroll down-- we have a section right here with the class of box applied to it. So if you're wondering who we are styling, it's not a paragraph. It's not a heading. It's a section. So this generated content basically says that after all of the other content within the tag, I want you to make some new content. And the content property allows us to say what this is. It could be some text. It could be anything we wanted it to be. At this point I am just going to do empty quotation marks, because I don't really want any physical content. I just want an element to style.
So I am going to do empty quotation marks after content. Then I am going to do position, and I am going to do a position of absolute. Now remember, we have the box, which is this new element that we are generating. Its parent element is positioned relative. That means that this box is going to be positioned relative to the box container. After that, I am going to do a z-index value, and the z-index value I am going to do is -1. Now again, if you remember from our z- index movie, what this is going to do is this is going to paint the background of this underneath the content of the box, and the content of the box is the text that's inside of that.
It doesn't paint it underneath the background of the stacking context. So if you can think in layers for just a moment, the first thing that we are going to paint is the background of the box itself. The second thing that we are going to paint is the background of this new generated element that we are making right now. And then the third thing that's going to paint on top of it is the text inside of the box. And again, that's -1 z, and the x value is doing that for us. The next thing I am going to do is a left offset of 10. Then I'm going to do a top offset of 10--and that should be pixels.
Then I am going to do a bottom offset of 10 pixels, and then I'm going to do a right offset of 10 pixels. Okay, so what am I doing here? Well, I don't know the width and I don't know the height of the box. Okay, I do know the width, but I don't know the height. In situations where you're not really sure what that's going to be or the box might grow, for example, because content gets placed inside of it, when you're generating something and you're trying to make it 10 pixels smaller than its parent element, this is a great way to do it. So since it's an absolute-positioned element, we can say, hey, I want your left side to be 10 pixels over from the left side of the parent.
I want the top to be 10 pixels down. I want the bottom to be 10 pixels up, and I want the right to be 10 pixels over. So essentially it's allowing us to create a box that is 10 pixels smaller than the parent box, and centered inside of it. So we are building a frame basically. And the next thing I am going to do is I'm going to do a background color, so let's do background. And I am going to give it a background of rgb(39,34,34). And we have one more step to do, but before we do that step, I am going to save this and I want to preview it in the browser so you can see what it is that we are actually doing.
So you could see we are generating a new element. The new element is 10 pixels shorter on each side than the parent. And the other thing that it's doing for us is it's making sure that this background is painted behind the textual content, and that's the -1 z-index that's doing it for us. Okay so now we want to apply a slight bevel to this inner element, and the easiest way to do that is just use borders. So I am going to go in on my borders here, and we are just going to do borders in all different directions, because I want the offsets to be a little different.
So I am going to do border-top, and the value there is going to be 1 pixel solid, rgb, and the rgb value for this is going to be (32,27,27). And if you're paying attention to the background colors for our two elements here, you're going to see that they're very close in hue and they're very close in brightness value. So again we are carrying over the example of our last lesson, which is, if you're going to create bevels or those type of thing, you want to keep them very close in hue and you want to keep them very close in brightness value.
Next I am going to do border-left 1, pixel there. We will do solid rgb. And the value for the border-left will be (32,27,27). So the same color on the border there for the top and the left. That means that the bottom and the right are going to get a lighter value. So we are going go border-bottom, 1 pixel, solid. Again we are going to do rgb. And if you're smarter than me, you can copy and paste these values and just change the border.
So the rgb value for border-bottom is going to be (82,72,81). And I am going to take my own advice and I am going to copy this and I am going to paste it. And I am going to change border-bottom to border-right. So I am going to save that, go back into my browser and refresh, and there is our nice little 1-pixel all the way around, giving us that nice little beveled look. Again, it's the closeness of the hue and the closeness of the brightness setting that's really making the bevel look convincing. If we were too far off in hue, we were too far off in brightness values that wouldn't work at all.
So there is our shadow box. I think it's a really cool way of creating a really complicated effect with just a single element. Now one of the great things about really understanding how CSS properties work is that it gives you the ability to think about how you might use it in really creative ways, and maybe even combine it with other properties to achieve really unexpected results. So as you begin to create your layouts, really take some time, experiment. Think about how you can use things like borders, as we did in this lesson, to create your own stunning visual effects.
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.