CSS: Page Layouts
Illustration by John Hersey

Enhancing page design: Solution


CSS: Page Layouts

with James Williamson

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Enhancing page design: Solution

I hope you enjoyed the lab on enhancing page designs. It represents the part of CSS that I really love, and that's the ability to combine properties in new ways to create compelling visual design. Let's get right into the finished files and take a look at the solutions to our lab. So I have the main.css file opened from the finished_files directory, and of course that's found in _css directory within finished_files, which is also inside 08_08. I could open up the index and the Philadelphia file, but I have already had them previewed in the browser and we didn't change those at all; we only changed the CSS.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 16s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 4s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 22s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 26s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 36s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

please wait ...
Watch the Online Video Course CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

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.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
James Williamson

Enhancing page design: Solution

I hope you enjoyed the lab on enhancing page designs. It represents the part of CSS that I really love, and that's the ability to combine properties in new ways to create compelling visual design. Let's get right into the finished files and take a look at the solutions to our lab. So I have the main.css file opened from the finished_files directory, and of course that's found in _css directory within finished_files, which is also inside 08_08. I could open up the index and the Philadelphia file, but I have already had them previewed in the browser and we didn't change those at all; we only changed the CSS.

So feel free to open those up and preview them along with me. But for the most part, we're just messing with the CSS here anyway. The first step that you guys were working on were the CSS sprites up in the menu, and of course that's for every page in the site. So I am going to scroll down to about line 1069 or so, so we can check out that code. There we go! So for each one of these, I did a separate background declaration. Now, if you went up and actually on the link tag itself, did a background declaration, and then came in here and did background positioning, that's fine.

There's absolutely nothing wrong with doing it that way. To be honest with you, that way is probably a little bit more efficient. Either way is fine. For the offsets, let's see if you guys got the same offset that I did. I did about a 3-pixel offset, but because I wasn't entirely happy with the way that a straight 3-pixel offset was giving me, you'll notice that the gear has a 2-pixel offset simply because of the way that icon is drawn. It's a little top-heavy. Also, probably I'm guessing if anything threw you guys, it was probably the horizontal offsets. One of the things that you have to deal with when you're dealing with text that is center aligned is that your padding isn't always going to be equal on every single one of those, in terms of how you deal with your images.

So you probably had, like me, to do a good bit of work there on those offsets to get them lined up. If your code doesn't match mine precisely, it's not that big of a deal. If you're happy with the spacing that you're getting with those icons, then it's absolutely fine. Now, the other thing that might have thrown you throughout the entire lab is the references to the actual images themselves. In our previous exercises, because the CSS that we've been dealing with is directly in the HTML file, we haven't had to do any convoluted folder structures to find our images. But remember, this CSS file is in the _css directory.

So in order for us to get to the images folder, we have to go up a directory, which is the ../. Then we can go into the images, then we can give the name of the image file. So if you are having trouble with that aspect of any of the steps where we're using background graphics, that's the issue you're running into there. So I am going to go back up, and the second step that I asked you guys to do was to handle the alpha transparency on the paragraph on about line 1102. And I'm pretty confident that most of you were able to get this with little or no problem.

It's the banner p selector. And we just took the color that was applied there, which was RGB, and we just added the alpha declaration. So rgba, and then we did 80%. Remember, that leaves the text totally opaque, but it just changes the background color to be semi-transparent. If you did it another away, using the opacity property for example, then the text itself would also be semi-transparent. If you use HSLA, congratulations, but you probably had to do a little bit of work to calculate how the color values were going to translate to HSLA. So I'm guessing most of you got the same solution that I did.

Our next task--I am just going to scroll down directly to the code--was it around 1163 or so. I wanted you to change the New York City preview graphic into being the feature graphic, and I did that through multiple background declarations. So you'll notice that in front of the existing declarations, which is going out and getting the banner graphics themselves, I have another background image declaration separated by a comma. And in this case, I am going out and finding the featured.png, and then I'm doing a little bit of an offset there vertically.

0 offset horizontally because I wanted it lined up against the left edge, and then 50 pixels vertically so that it comes down a little bit. So there again, I am just doing multiple image declarations there. The featured.png is a PNG that supports alpha transparency, so those two background images are now blended together just fine. Just for a second, I want to talk about that technique. Being able to do something like that is just huge, because in the past, before browsers supported those multiple image declarations, you would have to create one graphic for your banner and then if it was the featured, or you had a special one or something like that, you'd have to create a separate graphic.

So this way, anytime I want to apply that featured to a monthly gallery, all I have to do is add that to the declaration. I don't have to go out and create a separate graphic for that. And I can just swap out different banners or different bullets or anything I want by doing those multiple declarations. So that property is really, really powerful. Okay, the next thing I am going to do is turn my attention to the Philadelphia page and the steps that I wanted you to do on that page. So if I go down to line 1177, I can see the code that I got for the intro and the photos area, and it's exactly the same because those columns needed to be exactly the same, which was two columns, and one em between them.

The difference between your code and mine might be the vendor prefixes. If you have them in a different order, it doesn't matter, up to a point. But anytime you're using vendor prefixes, when you do the default syntax, which is down here on the bottom, the default syntax should come last. Remember, CSS is applied in the order that it's found. So if Firefox that supports, say, this syntax encounters your code is going to encounter this syntax first, and it's going to say hey, I know that syntax, and I will apply it, but then it runs into this one and says oh, but I know that syntax too, so I am going to go ahead and override it.

If it were backwards and the vendor prefix was last, then it would go ahead and apply the vendor prefix. That's not normally a problem, but remember, the browser implementations change over time, and a lot of times those vendor prefixes are supporting older syntax or older implementations. So in order to ensure that you have the most current implementation, make sure you do the generic declarations last. I want to just for a second go out to the browser and show you what that does for us for our text and our images. For text, this is no big deal. I'm sure this is exactly the way you were expecting.

But for the images, I took off the width and height values on the images, and I set the width to 100%. Then by going in and setting the columns to 2 columns, what that does is it forces the image to be the width of the column. That's really important, because if you use column count like this to display images, if your image is a fixed size and it doesn't fit within the column, then it will actually crop that image. It will just clip some of it off. So by going to 100% and filling that column, not only do I ensure that the image isn't going to be trimmed off, but I get images that flex and respond to the column's sizes changing and responding as well.

So that's a really nice technique, and that's something that you should think about in terms of when you place content other than text inside of multiple columns like that. Now, the very last step I asked you to do was a doozy, and that was a text shadow on the actual heading 1, so right up here in 1168, the gallery h1 selector. And you can see how I did that. I did text-shadow declaration, and I did two text-shadows. So you can see they're separated here by the comma. The first text-shadow does 0 for horizontal offset and then a negative offset vertically.

Then it applies a small blur to it, and it gives it sort of that red color at a 60% opacity, so it would be kind of faded. And then the second text-shadow, again horizontal offset of 0, positive offset of 1, so it's going to push it down a little bit, same blur, different color in this case. It's going to be blue, but still at 60%. And again, you've seen the effect that that gives us. That gives us this sort of nice dual, sort of blurred-looking text. And if any of you guys went in there and experimented with them, I hope you came up with some really cool stuff.

One of the things that I have done with this exercise in the past is to use a JavaScript library called Lettering.js which allows you to apply styles to individual letters, and then just sort of spaced all the letters different spaces apart from each other with these blurs too to make it look like they were all sort of coming together at the very end of it. So there are all sorts of really cool things that you can do with this. In terms of your code, don't get too upset if it doesn't match mine. The idea here is for you to start thinking about ways that you can use CSS to express your own individual creativity. Now, to that end, I want you to take what you've learned here in this chapter, and really all throughout the title, and just experiment with them.

And keep pushing your designs and try to combine properties in new and creative ways. You will be amazed at how much you learn in the process and how much easier it becomes to design pages the way that you envision them.

There are currently no FAQs about CSS: Page Layouts.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.