Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Controlling positioning is an incredibly important part of CSS layouts, but perhaps not in the way that all new web designers think. Rather than controlling the bulk of the page layout, positioning is typically used to control specific elements within it or to build complex interface components that other positioning methods really aren't well suited for. With that in mind, in this lab we are going to be focusing on tweaking a couple of areas on our desolved.org layout. Go ahead and go into the 04_07 directory, open up the index.htm file from that, and go inside the _css folder and open up main.css.
Those are the files that we are going to be working on. So I only have two things in this lab that I need you to do. But before you go, oh wow, only two things, this is going to be a really quick lab, there are two things that are going to take a little bit of time on your part to think through and decide exactly how you want to solve the problems. So it may take a while, even though there are only two tasks. So before we get into the specifics of them, I am going to switch over to my browser, and I'm going to look at the page as it is now and then compare that to the finished version. So currently right now, if I scroll down a little bit, our banner does not look the way that it should.
This paragraph which should be over here on the right-hand side is down below the banner, overlapping it in a weird way. So this is what it should look like. If I go over to desolve.org, in this layout you can see the paragraph is over on this hand side. It's overlaying the image, the height matches, and it's in a place where it lines up with the column below it. So that's one thing that you're going to need to take care of. The second thing, some of you have probably already noticed it. Look at this little bird over here, isn't that cool? As I scroll through the page, the bird stays right there, and of course, that is a link which allows people to follow me on Twitter. So if you want to follow me on Twitter at jameswillweb, you can simply click that link and follow me on Twitter.
It's fun stuff. But it's right down there in position, and you will notice that always stays in exactly the same place. In the current version of the layout, if I go all the way down to the footer, the bird is right there, so we need to move that as well. So going into the specifics of what we need to do, let's go into the main.css and at the very top of the style sheet, I have got the Lab steps here for you. So the first step, in the banner styles section, which is around line 276, you need to modify the styles for the banner and banner paragraph so that its height now that will be the height of the paragraph, matches the banner, and its width matches that of the aside column, so you are going to need to look at those styles and figure out exactly how wide that is.
Now remember to take their current padding into account when you are trying to match up widths. Then use positioning to line up the paragraph with the right edge of the banner so that it appears to line up with the aside column below it. Finally, ensure that the content is not allowed to flow outside of the banner div tags. So there is a couple of things we need to do here. It might be second nature to you after the floats chapter to look at the finished version of this and say to yourself, well, I'll just float this over here. But in this case, instead of floating, positioning is a little bit better suited for this task, and I want you to tackle it using positioning.
Now the second task for you is to go down to the footer, locating the Twitter link. Now using the class attribute, write a selector at around line 691. So you are going to have to go into the HTML code, locate the Twitter link, and look at the class attribute. So using that, you are going to write a selector that fixes the position of the Twitter icon to always be 20% away from the bottom edge of the screen, and snug up against the left edge of the screen. Now, okay, so yeah, that's only two things, but trust me, you've got a lot to think about.
Now determining how to size and positioning the banner paragraph may take a little while, and if you are having trouble with it, don't get frustrated. Just keep trying and feel free to sneak a peak at the finished files if you need a little help. And once you are finished, be sure to check out the solutions movie so that you can compare your code to mine and hear me discuss the solution in a little bit more detail.
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.