0
1
00:00:00,420 --> 00: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

2
00:00:07,390 --> 00:00:13,830
that we learnt about positioning in order to make this web site look the way that we want it to.
2

3
00:00:13,920 --> 00: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

4
00:00:20,610 --> 00:00:26,310
mountain image, as well as the text here in the h1, and also the subtitle.
4

5
00:00:26,700 --> 00:00:36,060
So the easiest way of centering elements is by tapping into a property called text align and that property
5

6
00:00:36,060 --> 00:00:39,620
has to be set inside the parent container,
6

7
00:00:39,630 --> 00:00:44,220
so in this case either in the top container or inside the body.
7

8
00:00:44,220 --> 00:00:50,760
So I'm just going to go ahead and center everything on screen by tapping into the body selector and
8

9
00:00:50,760 --> 00:00:53,680
saying text-align center.
9

10
00:00:53,880 --> 00: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

11
00:01:02,760 --> 00:01:05,960
and our paragraph is now centered.
11

12
00:01:06,030 --> 00: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

13
00:01:13,860 --> 00: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

14
00:01:22,270 --> 00: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

15
00:01:29,660 --> 00:01:31,660
say 10 percent,
15

16
00:01:32,310 --> 00:01:38,940
then you'll notice that it's no longer being center aligned despite the fact that it's still inside
16

17
00:01:38,940 --> 00:01:43,130
the body which is asking for text align to be center.
17

18
00:01:43,380 --> 00:01:45,620
So what do we do in this case?
18

19
00:01:46,380 --> 00:01:52,540
Well the other way of centering an element is by using the margin.
19

20
00:01:52,770 --> 00:02:02,520
So there is a value called auto which when applied will center the element either vertically or horizontally.
20

21
00:02:02,820 --> 00: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

22
00:02:10,260 --> 00:02:12,640
the margin right is auto,
22

23
00:02:13,020 --> 00:02:19,540
the margin at the bottom is also 0 and the margin on the left is again auto.
23

24
00:02:19,650 --> 00:02:24,020
So I'm going to delete this margin top here and hit save.
24

25
00:02:24,240 --> 00: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

26
00:02:32,220 --> 00:02:36,460
is now centered in the middle of our web page.
26

27
00:02:36,600 --> 00: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

28
00:02:43,560 --> 00: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

29
00:02:50,610 --> 00:02:51,900
in the center.
29

30
00:02:51,900 --> 00:02:57,810
So very often when you find yourself trying to center elements you'll probably end up using one of these
30

31
00:02:57,810 --> 00:02:58,870
methods.
31

32
00:02:58,890 --> 00:03:07,560
So just to recap, text-align center inside the container, or the parent element, will center everything
32

33
00:03:07,590 --> 00:03:11,640
inside that doesn't have a width set.
33

34
00:03:11,640 --> 00: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

35
00:03:17,940 --> 00:03:20,980
auto value in the margin.
35

36
00:03:21,510 --> 00: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

37
00:03:28,260 --> 00:03:30,390
left and right needs to be auto.
37

38
00:03:30,750 --> 00:03:33,090
And that will not change this at all.
38

39
00:03:33,120 --> 00:03:38,460
And this is just one of those circle shorthands that you will begin to learn.
39

40
00:03:38,490 --> 00:03:43,860
And if you've forgotten how that worked or if you're interested in learning more then you can always
40

41
00:03:43,860 --> 00: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

42
00:03:49,530 --> 00:03:52,950
have a single value of the margin then that's all four sides,
42

43
00:03:52,950 --> 00:03:57,570
if you have two then that's top and bottom and left and right,
43

44
00:03:57,810 --> 00: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

45
00:04:05,010 --> 00:04:07,920
all four sides in a clockwise direction.
45

46
00:04:07,920 --> 00:04:12,750
So if you get confused or if you forgot how that works then have a look over there.
46

47
00:04:12,810 --> 00: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

48
00:04:20,700 --> 00:04:25,250
being centered and you'll see that this is what it will now look like.
48

49
00:04:25,290 --> 00: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

50
00:04:32,910 --> 00:04:39,620
and the cloud, because it's in the flow of the HTML file, is affecting the layout of the mountain.
50

51
00:04:39,630 --> 00: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

52
00:04:44,800 --> 00:04:46,520
the right by that cloud.
52

53
00:04:46,530 --> 00: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

54
00:04:52,230 --> 00:04:55,390
then the mountain will go back to being centered.
54

55
00:04:55,680 --> 00:05:02,030
So can you remember how we can take an element out of the HTML flow by changing one particular CSS
55

56
00:05:02,070 --> 00:05:07,580
property? That is of course the position property that we're going to change.
56

57
00:05:07,650 --> 00: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

58
00:05:14,910 --> 00:05:16,790
going to remove it from the HTML flow.
58

59
00:05:17,010 --> 00: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

60
00:05:25,020 --> 00:05:27,250
it bottom-cloud.
60

61
00:05:27,780 --> 00: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

62
00:05:35,100 --> 00:05:43,650
over to all styles.css, and we're going to target that bottom-cloud, and I'm going to set
62

63
00:05:43,650 --> 00:05:46,350
its position to absolute.
63

64
00:05:46,410 --> 00: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

65
00:05:52,830 --> 00:05:55,740
placed more or less randomly on the screen.
65

66
00:05:55,740 --> 00:06:01,700
But more importantly our mountain is now bang in the middle of the file,
66

67
00:06:01,950 --> 00:06:05,100
and this is exactly the layout that I want for it.
67

68
00:06:06,240 --> 00: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

69
00:06:12,510 --> 00:06:14,370
challenge successfully.
69

70
00:06:14,370 --> 00: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

71
00:06:21,540 --> 00: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

72
00:06:29,790 --> 00:06:32,200
of the flow of the HTML document.
72

73
00:06:32,250 --> 00:06:37,620
So pause the video and give that a go now. Now how did that go?
73

74
00:06:37,960 --> 00:06:42,460
Firstly, our bottom cloud at the moment has an absolute position.
74

75
00:06:42,600 --> 00:06:50,610
Now in order to position it relative to something, one of its parents has to have its position set as
75

76
00:06:50,610 --> 00:06:51,380
relative.
76

77
00:06:51,570 --> 00:06:55,450
And if we don't then it will be relative to the body.
77

78
00:06:55,770 --> 00: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

79
00:07:04,200 --> 00:07:09,800
So I'm going to set the position of our top container to relative.
79

80
00:07:10,110 --> 00: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

81
00:07:16,830 --> 00: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

82
00:07:23,550 --> 00: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

83
00:07:34,400 --> 00:07:40,490
everything down a little bit, and then I'm going to add our top cloud as well.
83

84
00:07:40,700 --> 00:07:47,450
And I'm also going to take it out of the flow by changing its position to absolute as well.
84

85
00:07:47,450 --> 00: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

86
00:07:54,230 --> 00:07:56,310
So now let's position them properly.
86

87
00:07:56,600 --> 00: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

88
00:08:07,730 --> 00:08:12,620
a top margin of 50 pixels.
88

89
00:08:12,980 --> 00: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

90
00:08:26,310 --> 00:08:31,740
pixels from the bottom of its parent which is of course the top container.
90

91
00:08:31,920 --> 00:08:34,260
So it will be from this line.
91

92
00:08:34,260 --> 00:08:39,780
And if we hit save and refresh then this is what we will end up with.
92

93
00:08:39,840 --> 00:08:46,800
Now before we do any further positional tweaking we should really format the text because by changing
93

94
00:08:46,810 --> 00:08:53,660
the font, the font size etc., we’re going to affect the positioning of our elements as well.
94

95
00:08:53,670 --> 00:08:59,760
So in the next lesson we're going to look at how we can style our text using CSS.
95

96
00:08:59,970 --> 00:09:02,760
So for all of that and more, I’ll see you on the next lesson.