1 00:00:00,000 --> 00:00:02,000 [?music?] 2 00:00:02,000 --> 00:00:05,000 [Master Class: Fluid Grids: CSS: Part 2] 3 00:00:05,000 --> 00:00:10,000 [Nick Pettit] So far, we've added some of the basic essentials to our CSS 4 00:00:10,000 --> 00:00:13,000 and we've started our fluid grid calculations. 5 00:00:13,000 --> 00:00:16,000 Now we're going to move on to our center column 6 00:00:16,000 --> 00:00:20,000 which will contain our HTML5 video. 7 00:00:20,000 --> 00:00:24,000 First, we're going to style the div called phone, 8 00:00:24,000 --> 00:00:28,000 so we'll go ahead and select that #phone { 9 00:00:28,000 --> 00:00:34,000 and we need to first apply a width; however, this of course, has to be a fluid width 10 00:00:34,000 --> 00:00:39,000 so we need to jump over to Photoshop to go ahead and calculate that. 11 00:00:39,000 --> 00:00:42,000 So let's go ahead and switch over 12 00:00:42,000 --> 00:00:48,000 and this is going to be the center column, so we need to go ahead and grab that 13 00:00:48,000 --> 00:00:52,000 and it looks like the width is 310 14 00:00:52,000 --> 00:00:57,000 and the context is the entire width of the page, 950, 15 00:00:57,000 --> 00:01:01,000 so we can switch over to our calculator and calculate that. 16 00:01:01,000 --> 00:01:07,000 310, which is our target divided by the context of 950 17 00:01:07,000 --> 00:01:10,000 gives us that number there: 0.326315789473684 18 00:01:10,000 --> 00:01:17,000 and we'll copy it, switch over to TextMate, paste it in, move the decimal point over, 19 00:01:17,000 --> 00:01:23,000 and then make it a percentage, just like that. 20 00:01:23,000 --> 00:01:27,000 And we should go ahead and put a comment on the right side 21 00:01:27,000 --> 00:01:32,000 so that we know what it is we're actually calculating here. 22 00:01:32,000 --> 00:01:33,000 There we go. 23 00:01:33,000 --> 00:01:40,000 We'll go ahead and float this to the left because, of course, it is a column. 24 00:01:40,000 --> 00:01:44,000 We'll set the background to the image that we created earlier, 25 00:01:44,000 --> 00:01:49,000 which is in the images directory, so we need to jump out of the CSS directory, 26 00:01:49,000 --> 00:01:56,000 go into the /images/ directory, and the image we want is called phone.png. 27 00:01:56,000 --> 00:02:04,000 We'll set that to top center and no-repeat. 28 00:02:04,000 --> 00:02:07,000 Next, we're going to set a background-size on this, 29 00:02:07,000 --> 00:02:13,000 and of course, background-size is a CSS3 property, so we need to use vendor prefixes. 30 00:02:13,000 --> 00:02:18,000 We'll start out with -webkit-background-size:. 31 00:02:18,000 --> 00:02:25,000 We'll set the width to 100% and we'll set the height to auto. 32 00:02:25,000 --> 00:02:29,000 So by setting a width of 100% and setting the height to auto, 33 00:02:29,000 --> 00:02:32,000 the width will fill up the container 34 00:02:32,000 --> 00:02:35,000 and whatever's left over will just fill up the rest, 35 00:02:35,000 --> 00:02:38,000 and will maintain the aspect ratio of the image. 36 00:02:38,000 --> 00:02:42,000 This is slightly different from what we've been doing previously 37 00:02:42,000 --> 00:02:46,000 where we've actually been putting images inside of our markup. 38 00:02:46,000 --> 00:02:52,000 By setting a background size like this, it allows us a little bit more flexibility 39 00:02:52,000 --> 00:02:59,000 and allows us to actually put an HTML5 video on top of this image. 40 00:02:59,000 --> 00:03:02,000 So next, we'll go ahead and do the Mozilla styling, 41 00:03:02,000 --> 00:03:05,000 which is actually exactly the same as the webkit styling. 42 00:03:05,000 --> 00:03:08,000 We just need to change the vendor prefix -moz. 43 00:03:08,000 --> 00:03:13,000 And then finally, we'll go ahead and have a fallback 44 00:03:13,000 --> 00:03:19,000 that will support browsers that actually don't need a vendor prefix. 45 00:03:19,000 --> 00:03:23,000 Next, we need to set a margin-left on this column 46 00:03:23,000 --> 00:03:27,000 and of course, we need to calculate the fluid grid for this, 47 00:03:27,000 --> 00:03:30,000 so we'll go ahead and switch over to Photoshop, 48 00:03:30,000 --> 00:03:33,000 select our marquee tool, 49 00:03:33,000 --> 00:03:38,000 and the margin-left here will be everything to the left of the phone 50 00:03:38,000 --> 00:03:40,000 before we hit the left column. 51 00:03:40,000 --> 00:03:44,000 So it looks like we have about 40 pixels here, 52 00:03:44,000 --> 00:03:48,000 and we want to calculate this against the entire width of the page, 53 00:03:48,000 --> 00:03:52,000 so we'll go ahead and switch over to our calculator and say 54 00:03:52,000 --> 00:03:57,000 40 divided by 950, which gives us about 4%. 55 00:03:57,000 --> 00:04:01,000 We'll copy that number, switch over to TextMate, paste it in, 56 00:04:01,000 --> 00:04:06,000 move the decimal point, and then make it a percentage. 57 00:04:06,000 --> 00:04:12,000 We should also put the calculation in the margin, 58 00:04:12,000 --> 00:04:16,000 just so we know what's going on, so we'll say 40 divided by 950. 59 00:04:16,000 --> 00:04:17,000 * 40 / 950 */ 60 00:04:17,000 --> 00:04:20,000 And then finally, we're just going to put some margin-top, 61 00:04:20,000 --> 00:04:23,000 and really, you can put whatever you want here. 62 00:04:23,000 --> 00:04:28,000 I'm going to put 35px just to give it a little bit of space from the top. 63 00:04:28,000 --> 00:04:31,000 Now next, we need to move on to the video container, 64 00:04:31,000 --> 00:04:37,000 so let's go ahead and switch back to our markup just so we can see what's going on here. 65 00:04:37,000 --> 00:04:42,000 We just styled the phone, which is basically just the center column, 66 00:04:42,000 --> 00:04:47,000 and then inside of our center column, we have this video container div. 67 00:04:47,000 --> 00:04:52,000 Inside the video container div, we have the actual HTML5 video. 68 00:04:52,000 --> 00:04:56,000 But first, let's go ahead and style this video container. 69 00:04:56,000 --> 00:05:00,000 So we're going to go ahead and switch over to our CSS 70 00:05:00,000 --> 00:05:03,000 and we'll scroll down here just a little bit. 71 00:05:03,000 --> 00:05:07,000 We're going to first select our #phone, which is, of course, our center column 72 00:05:07,000 --> 00:05:12,000 and then we'll select the #video_container {. 73 00:05:12,000 --> 00:05:16,000 We're going to set a width on this and this of course needs to be a fluid width 74 00:05:16,000 --> 00:05:19,000 so we're going to go ahead and switch over to Photoshop 75 00:05:19,000 --> 00:05:24,000 and we're going to open up our Layers panel here 76 00:05:24,000 --> 00:05:28,000 because this phone is actually a Smart Object. 77 00:05:28,000 --> 00:05:31,000 So we're going to go ahead and open that up 78 00:05:31,000 --> 00:05:36,000 and we need to calculate a couple of things here. 79 00:05:36,000 --> 00:05:39,000 First, we'll just start off with the width. 80 00:05:39,000 --> 00:05:45,000 Now, I'm going to select everything so that we can actually see the entire width of the phone, 81 00:05:45,000 --> 00:05:49,000 which appears to be 1021. 82 00:05:49,000 --> 00:06:00,000 So we'll go ahead and switch over to TextMate and record some of these values. 83 00:06:00,000 --> 00:06:04,000 So 1021 = width of phone, 84 00:06:04,000 --> 00:06:18,000 1978 = height of phone, 85 00:06:18,000 --> 00:06:24,000 and then we're going to measure the video area, and this will be where our HTML5 video 86 00:06:24,000 --> 00:06:26,000 is actually contained. 87 00:06:26,000 --> 00:06:29,000 So the width is 853 and the height is 1280, 88 00:06:29,000 --> 00:06:33,000 so we'll go ahead and write that down. 89 00:06:33,000 --> 00:06:37,000 853 = width of video area 90 00:06:37,000 --> 00:06:42,000 1280 = height of video area 91 00:06:42,000 --> 00:06:47,000 And now, we're ready to actually calculate the width of the video container 92 00:06:47,000 --> 00:06:56,000 so we want to go ahead width: ; /* 93 00:06:56,000 --> 00:07:00,000 and take our target of 853, which is the width of the video area, 94 00:07:00,000 --> 00:07:05,000 and divide that into the context, which is the width of the entire phone. 95 00:07:05,000 --> 00:07:09,000 So we'll go ahead and switch over to our calculator, clear out what we have, 96 00:07:09,000 --> 00:07:16,000 and say 853 divided by 1021, 97 00:07:16,000 --> 00:07:20,000 and we'll go ahead and copy that value from our calculator and paste it in, 98 00:07:20,000 --> 00:07:24,000 move the decimal point, 99 00:07:24,000 --> 00:07:29,000 set it as a percentage, and now we have our width. 100 00:07:29,000 --> 00:07:32,000 We also need to calculate our margin, and to do that, 101 00:07:32,000 --> 00:07:37,000 we do need to switch back to Photoshop and make a few more measurements. 102 00:07:37,000 --> 00:07:42,000 Now, the video is actually going to be centered inside of this phone element 103 00:07:42,000 --> 00:07:47,000 so the only margin that we need to calculate is going to be on the top and bottom. 104 00:07:47,000 --> 00:07:53,000 Remember, in our fluid layout, this phone could potentially be resized, 105 00:07:53,000 --> 00:07:59,000 so we need to resize the video with that and that means that our top and bottom margins 106 00:07:59,000 --> 00:08:05,000 need to be percentages, so we'll go ahead and select the top margin here, 107 00:08:05,000 --> 00:08:11,000 starting from the top of the video container going all the way to the top of the phone. 108 00:08:11,000 --> 00:08:18,000 The height there is 352 so let's go ahead and record that value in TextMate. 109 00:08:18,000 --> 00:08:25,000 So 352 = height of area above video. 110 00:08:25,000 --> 00:08:28,000 And then we need to get that bottom margin 111 00:08:28,000 --> 00:08:35,000 so we'll go ahead select that, and it looks like the height there is 346 112 00:08:35,000 --> 00:08:37,000 so we'll go ahead and record that. 113 00:08:37,000 --> 00:08:45,000 So 346 = height of area below video. 114 00:08:45,000 --> 00:08:49,000 And now, we're ready to go ahead and do our calculations. 115 00:08:49,000 --> 00:08:53,000 First, I'm going to calculate the top margin 116 00:08:53,000 --> 00:09:01,000 which will be 352 divided into the width of the phone 117 00:09:01,000 --> 00:09:04,000 Now remember, the way that margin is calculated 118 00:09:04,000 --> 00:09:08,000 is into the width, so we can't actually calculate this into the height. 119 00:09:08,000 --> 00:09:13,000 I know that seems a little bit strange, but just bear with me. 120 00:09:13,000 --> 00:09:22,000 So we'll go ahead and copy this because we also need to do this for the bottom margin. 121 00:09:22,000 --> 00:09:27,000 So that will be 346 divided by 1021, 122 00:09:27,000 --> 00:09:30,000 and now we can go ahead and switch over to our calculator, 123 00:09:30,000 --> 00:09:34,000 clear out what we have, and do our calculations. 124 00:09:34,000 --> 00:09:42,000 So 352 divided into the width of the phone gets us that number there. 125 00:09:42,000 --> 00:09:48,000 We'll go ahead and move the decimal point and set it as a percentage. 126 00:09:48,000 --> 00:09:52,000 We want the top and bottom to be set to auto 127 00:09:52,000 --> 00:09:55,000 so we'll go ahead and put in that value 128 00:09:55,000 --> 00:10:02,000 and then, we're ready to do the bottom margin, which is 346 into 1021, 129 00:10:02,000 --> 00:10:11,000 so let's go ahead and do that calculation, 346 / 1021. 130 00:10:11,000 --> 00:10:18,000 We can go ahead and paste in that value, 131 00:10:18,000 --> 00:10:21,000 just like that. 132 00:10:21,000 --> 00:10:25,000 And we'll go ahead and move those over 133 00:10:25,000 --> 00:10:27,000 just so they all line up nicely 134 00:10:27,000 --> 00:10:31,000 and now we have our video container. 135 00:10:31,000 --> 00:10:37,000 So let's go ahead switch over to the browser and refresh. 136 00:10:37,000 --> 00:10:41,000 And now, we have our three columns, so we have our column on the left, 137 00:10:41,000 --> 00:10:46,000 which is our header, our center column, which is the phone, 138 00:10:46,000 --> 00:10:49,000 and our column on the right, which is miscellaneous. 139 00:10:49,000 --> 00:10:52,000 And inside of the phone in our center column, 140 00:10:52,000 --> 00:10:57,000 we have our HTML5 video contained inside of the phone. 141 00:10:57,000 --> 00:11:01,000 Now, my browser window is just set to some arbitrary size, 142 00:11:01,000 --> 00:11:04,000 but we can already see that it's working pretty well. 143 00:11:04,000 --> 00:11:07,000 If we go ahead and actually resize the browser window, 144 00:11:07,000 --> 00:11:14,000 you can see that the HTML5 video keeps up with the size of the phone. 145 00:11:14,000 --> 00:11:20,000 In my opinion, what we just covered is the most complex portion of this entire project, 146 00:11:20,000 --> 00:11:24,000 mostly because of the way top and bottom margins are calculated 147 00:11:24,000 --> 00:11:26,000 when using percentages. 148 00:11:26,000 --> 00:11:29,000 When using percentages for the margin width value, 149 00:11:29,000 --> 00:11:35,000 the CSS2.1 box model specification under section 8.3 says 150 00:11:35,000 --> 00:11:42,000 the percentage is calculated with respect to the width of the generated box's containing block. 151 00:11:42,000 --> 00:11:46,000 Note that this is true for margin-top and margin-bottom as well. 152 00:11:46,000 --> 00:11:49,000 The important word there is "width," 153 00:11:49,000 --> 00:11:52,000 so in other words, margin-top and margin-bottom percentages 154 00:11:52,000 --> 00:11:58,000 are calculated with respect to the containing block's width and not the height, 155 00:11:58,000 --> 00:12:00,000 as you might expect. 156 00:12:00,000 --> 00:12:05,000 This is why in our fluid grid calculation we set our target to the top and bottom margins 157 00:12:05,000 --> 00:12:08,000 but we set our context to the width. 158 00:12:08,000 --> 00:12:15,000 We then divided the top and bottom margins by the width of the entire element.