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.
Hopefully, you were able to complete the positioning elements lab without too much trouble, and without getting too mad at me. Now, if you did get stuck, don't feel bad. It takes a while to fully understand how positioning works. So let's take a look at the finished files and how I coded those elements. So again, I have the index.htm and the main.css files open. Now, this time I went into the 04_07 folder and into the finished_file folder, so I'm opening from there. For the banner, I'm going to scroll down to about line 270 or so, and we go there.
There is my banner style. And again, I'm previewing this in the browser, so we can sort of visualize kind of the solution that's happening here. Okay, now the banner paragraph is the one that I'm having to position. Now, I had to go ahead and take in the account of the padding of this when I set the width and the height values. So, taking the padding into account, I've set a height value that's equal to the height of the banner above it, and then I set the width value that again, along with the padding, gave it the same width as the aside below it. Now, in terms of positioning it, I'm using absolute positioning and I'm giving it a top and a right offset of 0 and 0.
So, rather than trying to figure out exactly where the left or top-left offset would be, I just went ahead and gave it a top-right offset and what that's going to do is it's going to align the top right-hand edge of this paragraph up with the top right-hand edge of the banner, and then if the width is correct, then the position is going to be correct. Now, the next thing I needed to remember to do was to go up to banner and set its position to relative, and that is a step that a lot of people may have skipped or may have forgotten about.
Remember, if you don't set the containing element's position to relative, what an absolutely positional element does is it positions itself relative to the nearest positioned ancestor. And in case of this file, it would probably be the HTML element. I also went ahead and set the overflow on banner to hidden so that if there was any overflow content it'd go ahead and trim that off. It is worth pointing out and noting that since banner p, the paragraph itself, is absolutely positioned it's still kind of above and outside of the banner. It's just using it as a point of origin.
So, if I expanded the size of the banner paragraph or made it bigger, that overflow property is not going to affect it at all. So, it's more to make sure that other content within the banner doesn't flow outside of it, not so much the banner paragraph. Now, I'm going to scroll all the way down towards the bottom of my styles, to about line 691 or so, and I'm going to take a look at the twitter selector that I wrote. So, this one was actually pretty simple once you got down to it. We're just going to set position to fixed. We know that that sets its position relative to the viewport and not any other containing elements. And then I set the top value to 80% and the left value to 0.
Now, I'm sure that some of you went ahead and set the bottom to 20%. That's very similar to setting the top to 80%, but essentially, it's not exactly the same. That's based of where the offset is. Remember, the bottom offset would set the bottom of the element to 20%, whereas the top 80% is lining the top of it with 20% as well. So, there're a couple of ways that you could've approached it and gotten the same results. In the end, as long as you're happy with it, it doesn't really matter if your code matches mine or not. So, again, if I look at this in the browser, there's the twitter icon, scrolling down the page.
Because it's positioned- fixed, it remains in place. So again, remember, there's always more than one way to accomplish something in CSS. So if your styles didn't exactly match mine, it's not a problem, as long as they still work and you got the desired results. However, if our styles are different, take a moment, examine the rules, and think about which method is more efficient, easier to update, and maybe easier to maintain over the long run. As always, those should be very important goals for your sites.
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.