Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll work on the center column in our layout. This column will act as the container for our HTML5 video.
[?music?]
0:00
[Master Class: Fluid Grids: CSS: Part 2]
0:02
[Nick Pettit] So far, we've added some of the basic essentials to our CSS
0:05
and we've started our fluid grid calculations.
0:10
Now we're going to move on to our center column
0:13
which will contain our HTML5 video.
0:16
First, we're going to style the div called phone,
0:20
so we'll go ahead and select that #phone {
0:24
and we need to first apply a width; however, this of course, has to be a fluid width
0:28
so we need to jump over to Photoshop to go ahead and calculate that.
0:34
So let's go ahead and switch over
0:39
and this is going to be the center column, so we need to go ahead and grab that
0:42
and it looks like the width is 310
0:48
and the context is the entire width of the page, 950,
0:52
so we can switch over to our calculator and calculate that.
0:57
310, which is our target divided by the context of 950
1:01
gives us that number there: 0.326315789473684
1:07
and we'll copy it, switch over to TextMate, paste it in, move the decimal point over,
1:10
and then make it a percentage, just like that.
1:17
And we should go ahead and put a comment on the right side
1:23
so that we know what it is we're actually calculating here.
1:27
There we go.
1:32
We'll go ahead and float this to the left because, of course, it is a column.
1:33
We'll set the background to the image that we created earlier,
1:40
which is in the images directory, so we need to jump out of the CSS directory,
1:44
go into the /images/ directory, and the image we want is called phone.png.
1:49
We'll set that to top center and no-repeat.
1:56
Next, we're going to set a background-size on this,
2:04
and of course, background-size is a CSS3 property, so we need to use vendor prefixes.
2:07
We'll start out with -webkit-background-size:.
2:13
We'll set the width to 100% and we'll set the height to auto.
2:18
So by setting a width of 100% and setting the height to auto,
2:25
the width will fill up the container
2:29
and whatever's left over will just fill up the rest,
2:32
and will maintain the aspect ratio of the image.
2:35
This is slightly different from what we've been doing previously
2:38
where we've actually been putting images inside of our markup.
2:42
By setting a background size like this, it allows us a little bit more flexibility
2:46
and allows us to actually put an HTML5 video on top of this image.
2:52
So next, we'll go ahead and do the Mozilla styling,
2:59
which is actually exactly the same as the webkit styling.
3:02
We just need to change the vendor prefix -moz.
3:05
And then finally, we'll go ahead and have a fallback
3:08
that will support browsers that actually don't need a vendor prefix.
3:13
Next, we need to set a margin-left on this column
3:19
and of course, we need to calculate the fluid grid for this,
3:23
so we'll go ahead and switch over to Photoshop,
3:27
select our marquee tool,
3:30
and the margin-left here will be everything to the left of the phone
3:33
before we hit the left column.
3:38
So it looks like we have about 40 pixels here,
3:40
and we want to calculate this against the entire width of the page,
3:44
so we'll go ahead and switch over to our calculator and say
3:48
40 divided by 950, which gives us about 4%.
3:52
We'll copy that number, switch over to TextMate, paste it in,
3:57
move the decimal point, and then make it a percentage.
4:01
We should also put the calculation in the margin,
4:06
just so we know what's going on, so we'll say 40 divided by 950.
4:12
* 40 / 950 */
4:16
And then finally, we're just going to put some margin-top,
4:17
and really, you can put whatever you want here.
4:20
I'm going to put 35px just to give it a little bit of space from the top.
4:23
Now next, we need to move on to the video container,
4:28
so let's go ahead and switch back to our markup just so we can see what's going on here.
4:31
We just styled the phone, which is basically just the center column,
4:37
and then inside of our center column, we have this video container div.
4:42
Inside the video container div, we have the actual HTML5 video.
4:47
But first, let's go ahead and style this video container.
4:52
So we're going to go ahead and switch over to our CSS
4:56
and we'll scroll down here just a little bit.
5:00
We're going to first select our #phone, which is, of course, our center column
5:03
and then we'll select the #video_container {.
5:07
We're going to set a width on this and this of course needs to be a fluid width
5:12
so we're going to go ahead and switch over to Photoshop
5:16
and we're going to open up our Layers panel here
5:19
because this phone is actually a Smart Object.
5:24
So we're going to go ahead and open that up
5:28
and we need to calculate a couple of things here.
5:31
First, we'll just start off with the width.
5:36
Now, I'm going to select everything so that we can actually see the entire width of the phone,
5:39
which appears to be 1021.
5:45
So we'll go ahead and switch over to TextMate and record some of these values.
5:49
So 1021 = width of phone,
6:00
1978 = height of phone,
6:04
and then we're going to measure the video area, and this will be where our HTML5 video
6:18
is actually contained.
6:24
So the width is 853 and the height is 1280,
6:26
so we'll go ahead and write that down.
6:29
853 = width of video area
6:33
1280 = height of video area
6:37
And now, we're ready to actually calculate the width of the video container
6:42
so we want to go ahead width: ; /*
6:47
and take our target of 853, which is the width of the video area,
6:56
and divide that into the context, which is the width of the entire phone.
7:00
So we'll go ahead and switch over to our calculator, clear out what we have,
7:05
and say 853 divided by 1021,
7:09
and we'll go ahead and copy that value from our calculator and paste it in,
7:16
move the decimal point,
7:20
set it as a percentage, and now we have our width.
7:24
We also need to calculate our margin, and to do that,
7:29
we do need to switch back to Photoshop and make a few more measurements.
7:32
Now, the video is actually going to be centered inside of this phone element
7:37
so the only margin that we need to calculate is going to be on the top and bottom.
7:42
Remember, in our fluid layout, this phone could potentially be resized,
7:47
so we need to resize the video with that and that means that our top and bottom margins
7:53
need to be percentages, so we'll go ahead and select the top margin here,
7:59
starting from the top of the video container going all the way to the top of the phone.
8:05
The height there is 352 so let's go ahead and record that value in TextMate.
8:11
So 352 = height of area above video.
8:18
And then we need to get that bottom margin
8:25
so we'll go ahead select that, and it looks like the height there is 346
8:28
so we'll go ahead and record that.
8:35
So 346 = height of area below video.
8:37
And now, we're ready to go ahead and do our calculations.
8:45
First, I'm going to calculate the top margin
8:49
which will be 352 divided into the width of the phone
8:53
Now remember, the way that margin is calculated
9:01
is into the width, so we can't actually calculate this into the height.
9:04
I know that seems a little bit strange, but just bear with me.
9:08
So we'll go ahead and copy this because we also need to do this for the bottom margin.
9:13
So that will be 346 divided by 1021,
9:22
and now we can go ahead and switch over to our calculator,
9:27
clear out what we have, and do our calculations.
9:30
So 352 divided into the width of the phone gets us that number there.
9:34
We'll go ahead and move the decimal point and set it as a percentage.
9:42
We want the top and bottom to be set to auto
9:48
so we'll go ahead and put in that value
9:52
and then, we're ready to do the bottom margin, which is 346 into 1021,
9:55
so let's go ahead and do that calculation, 346 / 1021.
10:02
We can go ahead and paste in that value,
10:11
just like that.
10:18
And we'll go ahead and move those over
10:21
just so they all line up nicely
10:25
and now we have our video container.
10:27
So let's go ahead switch over to the browser and refresh.
10:31
And now, we have our three columns, so we have our column on the left,
10:37
which is our header, our center column, which is the phone,
10:41
and our column on the right, which is miscellaneous.
10:46
And inside of the phone in our center column,
10:49
we have our HTML5 video contained inside of the phone.
10:52
Now, my browser window is just set to some arbitrary size,
10:57
but we can already see that it's working pretty well.
11:01
If we go ahead and actually resize the browser window,
11:04
you can see that the HTML5 video keeps up with the size of the phone.
11:07
In my opinion, what we just covered is the most complex portion of this entire project,
11:14
mostly because of the way top and bottom margins are calculated
11:20
when using percentages.
11:24
When using percentages for the margin width value,
11:26
the CSS2.1 box model specification under section 8.3 says
11:29
the percentage is calculated with respect to the width of the generated box's containing block.
11:35
Note that this is true for margin-top and margin-bottom as well.
11:42
The important word there is "width,"
11:46
so in other words, margin-top and margin-bottom percentages
11:49
are calculated with respect to the containing block's width and not the height,
11:52
as you might expect.
11:58
This is why in our fluid grid calculation we set our target to the top and bottom margins
12:00
but we set our context to the width.
12:05
We then divided the top and bottom margins by the width of the entire element.
12:08
You need to sign up for Treehouse in order to download course files.
Sign up