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.
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.
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.
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.