WEBVTT 0 00:00.420 --> 00:07.390 Now let's take a look back at what we've got on our web site and see how we can use some of the knowledge 1 00:07.390 --> 00:13.830 that we learnt about positioning in order to make this web site look the way that we want it to. 2 00:13.920 --> 00:20.610 Now the first thing that we want to achieve is we want to center all of these elements, the image, the 3 00:20.610 --> 00:26.310 mountain image, as well as the text here in the h1, and also the subtitle. 4 00:26.700 --> 00:36.060 So the easiest way of centering elements is by tapping into a property called text align and that property 5 00:36.060 --> 00:39.620 has to be set inside the parent container, 6 00:39.630 --> 00:44.220 so in this case either in the top container or inside the body. 7 00:44.220 --> 00:50.760 So I'm just going to go ahead and center everything on screen by tapping into the body selector and 8 00:50.760 --> 00:53.680 saying text-align center. 9 00:53.880 --> 01:02.460 If we hit save and we head back and we hit refresh then you'll notice that all of our images, our h1 10 01:02.760 --> 01:05.960 and our paragraph is now centered. 11 01:06.030 --> 01:13.740 Now this works as long as we've got an inline block element such as our images or if we've got these 12 01:13.860 --> 01:22.270 full width block elements like our h1 and our p tag, which are going from left edge to the right edge. 13 01:22.270 --> 01:29.650 Now if I go into my code and I change the h1 to change its width to say only, I don't know, let's 14 01:29.660 --> 01:31.660 say 10 percent, 15 01:32.310 --> 01:38.940 then you'll notice that it's no longer being center aligned despite the fact that it's still inside 16 01:38.940 --> 01:43.130 the body which is asking for text align to be center. 17 01:43.380 --> 01:45.620 So what do we do in this case? 18 01:46.380 --> 01:52.540 Well the other way of centering an element is by using the margin. 19 01:52.770 --> 02:02.520 So there is a value called auto which when applied will center the element either vertically or horizontally. 20 02:02.820 --> 02:09.910 So in this case if we're looking for horizontal centering then we can say that the margin top is 0, 21 02:10.260 --> 02:12.640 the margin right is auto, 22 02:13.020 --> 02:19.540 the margin at the bottom is also 0 and the margin on the left is again auto. 23 02:19.650 --> 02:24.020 So I'm going to delete this margin top here and hit save. 24 02:24.240 --> 02:32.130 And if I refresh you'll see that our element despite being only 10 percent of the width of the screen 25 02:32.220 --> 02:36.460 is now centered in the middle of our web page. 26 02:36.600 --> 02:43.110 And when you look at the box model you can see that the top and bottom margins were set to be 0 by us 27 02:43.560 --> 02:50.550 and the left and the right are set automatically to whatever amount it needs to be in order to keep it 28 02:50.610 --> 02:51.900 in the center. 29 02:51.900 --> 02:57.810 So very often when you find yourself trying to center elements you'll probably end up using one of these 30 02:57.810 --> 02:58.870 methods. 31 02:58.890 --> 03:07.560 So just to recap, text-align center inside the container, or the parent element, will center everything 32 03:07.590 --> 03:11.640 inside that doesn't have a width set. 33 03:11.640 --> 03:17.730 Now if it is a block element and it has a width set, then you're going to have to center it using this 34 03:17.940 --> 03:20.980 auto value in the margin. 35 03:21.510 --> 03:28.260 So in this case we can also shorten this by saying that the top and bottom needs to be zero and the 36 03:28.260 --> 03:30.390 left and right needs to be auto. 37 03:30.750 --> 03:33.090 And that will not change this at all. 38 03:33.120 --> 03:38.460 And this is just one of those circle shorthands that you will begin to learn. 39 03:38.490 --> 03:43.860 And if you've forgotten how that worked or if you're interested in learning more then you can always 40 03:43.860 --> 03:49.530 check out the CSS Docs on MDN for the margin, where they go through each of these, where if you only 41 03:49.530 --> 03:52.950 have a single value of the margin then that's all four sides, 42 03:52.950 --> 03:57.570 if you have two then that's top and bottom and left and right, 43 03:57.810 --> 04:04.950 if you have three then it's the top left and right and bottom, and if you have all four then that's just 44 04:05.010 --> 04:07.920 all four sides in a clockwise direction. 45 04:07.920 --> 04:12.750 So if you get confused or if you forgot how that works then have a look over there. 46 04:12.810 --> 04:20.640 Now I'm actually going to undo and I'm going to revert back to margin-top being 0 and text-align 47 04:20.700 --> 04:25.250 being centered and you'll see that this is what it will now look like. 48 04:25.290 --> 04:32.430 Now the next problem we need to tackle is that these two images are acting as if they are inline blocks, 49 04:32.910 --> 04:39.620 and the cloud, because it's in the flow of the HTML file, is affecting the layout of the mountain. 50 04:39.630 --> 04:44.800 More specifically, I want this mountain to be right in the middle, and at the moment it’s being pushed to 51 04:44.800 --> 04:46.520 the right by that cloud. 52 04:46.530 --> 04:52.170 So in order to fix this we have to take this cloud out of the HTML flow, and once we've done that 53 04:52.230 --> 04:55.390 then the mountain will go back to being centered. 54 04:55.680 --> 05:02.030 So can you remember how we can take an element out of the HTML flow by changing one particular CSS 55 05:02.070 --> 05:07.580 property? That is of course the position property that we're going to change. 56 05:07.650 --> 05:14.910 And we're going to change it from its current value which is static to absolute and that is how we're 57 05:14.910 --> 05:16.790 going to remove it from the HTML flow. 58 05:17.010 --> 05:25.020 So inside our index.html I'm going to give a class to our bottom cloud and I'm going to call 59 05:25.020 --> 05:27.250 it bottom-cloud. 60 05:27.780 --> 05:35.040 And while I'm here I'm going to give a class to our top cloud and I'm going to hit save and I’m going to head back 61 05:35.100 --> 05:43.650 over to all styles.css, and we're going to target that bottom-cloud, and I'm going to set 62 05:43.650 --> 05:46.350 its position to absolute. 63 05:46.410 --> 05:52.830 Now if I hit refresh you can see that that cloud has been taken out of the flow and it's kind of being 64 05:52.830 --> 05:55.740 placed more or less randomly on the screen. 65 05:55.740 --> 06:01.700 But more importantly our mountain is now bang in the middle of the file, 66 06:01.950 --> 06:05.100 and this is exactly the layout that I want for it. 67 06:06.240 --> 06:12.510 So the next part is a challenge and this is what you want to end up with if you manage to complete the 68 06:12.510 --> 06:14.370 challenge successfully. 69 06:14.370 --> 06:21.540 We've got our top cloud that's on the right and a little bit above the h1, and we've got our bottom 70 06:21.540 --> 06:29.790 cloud that's on the left and just between the text and the mountain image, and they are both taken out 71 06:29.790 --> 06:32.200 of the flow of the HTML document. 72 06:32.250 --> 06:37.620 So pause the video and give that a go now. Now how did that go? 73 06:37.960 --> 06:42.460 Firstly, our bottom cloud at the moment has an absolute position. 74 06:42.600 --> 06:50.610 Now in order to position it relative to something, one of its parents has to have its position set as 75 06:50.610 --> 06:51.380 relative. 76 06:51.570 --> 06:55.450 And if we don't then it will be relative to the body. 77 06:55.770 --> 07:04.010 So in our case I want us to be able to position our bottom cloud relative to this entire top container. 78 07:04.200 --> 07:09.800 So I'm going to set the position of our top container to relative. 79 07:10.110 --> 07:16.830 And I'm going to start off by giving our top container just a little bit of padding at the top so that 80 07:16.830 --> 07:23.550 we can push down this cloud and all of these contents just down by a little bit so that it's not all 81 07:23.550 --> 07:34.400 stuck at the top of the page. So to do that we can add a padding top of 100 pixels, and that just pushes 82 07:34.400 --> 07:40.490 everything down a little bit, and then I'm going to add our top cloud as well. 83 07:40.700 --> 07:47.450 And I'm also going to take it out of the flow by changing its position to absolute as well. 84 07:47.450 --> 07:54.210 Now if we hit refresh you can see our two clouds are kind of just floating around without doing very much. 85 07:54.230 --> 07:56.310 So now let's position them properly. 86 07:56.600 --> 08:07.640 So relative to our top container here I want the top cloud to have a right margin of 300 pixels and 87 08:07.730 --> 08:12.620 a top margin of 50 pixels. 88 08:12.980 --> 08:26.300 And I want our bottom cloud to have a position left margin of 300 pixels and and a bottom margin of 300 89 08:26.310 --> 08:31.740 pixels from the bottom of its parent which is of course the top container. 90 08:31.920 --> 08:34.260 So it will be from this line. 91 08:34.260 --> 08:39.780 And if we hit save and refresh then this is what we will end up with. 92 08:39.840 --> 08:46.800 Now before we do any further positional tweaking we should really format the text because by changing 93 08:46.810 --> 08:53.660 the font, the font size etc., we’re going to affect the positioning of our elements as well. 94 08:53.670 --> 08:59.760 So in the next lesson we're going to look at how we can style our text using CSS. 95 08:59.970 --> 09:02.760 So for all of that and more, I’ll see you on the next lesson.