1
00:00:02,380 --> 00:00:05,510
How can we now change the style

2
00:00:05,510 --> 00:00:07,750
of our element here?

3
00:00:07,750 --> 00:00:10,820
Well, first what we can do besides top 0,

4
00:00:10,820 --> 00:00:14,110
we can also add left 0 to align it

5
00:00:14,110 --> 00:00:18,570
to the left of our HTML element in this case,

6
00:00:18,570 --> 00:00:19,900
which looks all right.

7
00:00:19,900 --> 00:00:21,370
But now as a second step,

8
00:00:21,370 --> 00:00:24,870
we need to take the entire width of the page, again,

9
00:00:24,870 --> 00:00:27,030
of the HTML element in our case,

10
00:00:27,030 --> 00:00:29,140
to bring it to the right.

11
00:00:29,140 --> 00:00:31,410
We could, of course, use the width property here

12
00:00:31,410 --> 00:00:34,390
and set a width of 150 pixels, for example,

13
00:00:34,390 --> 00:00:35,410
anything like this.

14
00:00:35,410 --> 00:00:36,770
So with trial and error,

15
00:00:36,770 --> 00:00:40,860
we could make sure that it covers the entire page.

16
00:00:40,860 --> 00:00:41,693
Of course,

17
00:00:41,693 --> 00:00:42,860
this is not a solution that works

18
00:00:42,860 --> 00:00:46,360
because we have different display sizes.

19
00:00:46,360 --> 00:00:48,610
Therefore this would never be an option.

20
00:00:48,610 --> 00:00:51,930
For this, we will introduce another important unit

21
00:00:51,930 --> 00:00:55,350
besides our pixels, the percentage unit.

22
00:00:55,350 --> 00:00:58,690
As the name indicates, the percentage value is

23
00:00:58,690 --> 00:01:00,920
relative to another element,

24
00:01:00,920 --> 00:01:02,800
typically the parent element,

25
00:01:02,800 --> 00:01:05,129
and therefore tells our element,

26
00:01:05,129 --> 00:01:09,630
the width of it, comparing to this other element.

27
00:01:09,630 --> 00:01:11,720
If you could follow this logic right here,

28
00:01:11,720 --> 00:01:16,250
then we could say, we can use a width of 100%.

29
00:01:16,250 --> 00:01:20,520
This would mean we use 100% of the parent element,

30
00:01:20,520 --> 00:01:25,520
which in this case would be 100% of the HTML element.

31
00:01:26,380 --> 00:01:28,690
At least according to the logic that we saw

32
00:01:28,690 --> 00:01:31,570
when it comes to the position property here.

33
00:01:31,570 --> 00:01:33,200
However, if you look at that,

34
00:01:33,200 --> 00:01:34,670
we see that, well,

35
00:01:34,670 --> 00:01:37,880
it's a lot bigger than these 100%.

36
00:01:37,880 --> 00:01:39,730
I can zoom, oops.

37
00:01:39,730 --> 00:01:42,620
I can zoom out of bit here, of course, 100%

38
00:01:42,620 --> 00:01:43,720
Because it's zoomed in.

39
00:01:43,720 --> 00:01:45,530
So now you have a better overview

40
00:01:45,530 --> 00:01:48,430
of the amount it overflows here.

41
00:01:48,430 --> 00:01:51,010
Let's inspect this, let's see what's going on.

42
00:01:51,010 --> 00:01:54,460
We are in the container and we are on element two.

43
00:01:54,460 --> 00:01:59,240
And here we said, it should be 100% of the width.

44
00:01:59,240 --> 00:02:03,040
And as I said, this is the width of the parent element,

45
00:02:03,040 --> 00:02:05,850
actually, which for the position property,

46
00:02:05,850 --> 00:02:08,009
whilst the HTML element.

47
00:02:08,009 --> 00:02:09,360
Let's not inspect the parents

48
00:02:09,360 --> 00:02:12,930
and let's know see what this width is relative to.

49
00:02:12,930 --> 00:02:17,930
We have a width of 738 pixels here.

50
00:02:18,190 --> 00:02:19,400
For the content,

51
00:02:19,400 --> 00:02:20,550
let's keep that in mind.

52
00:02:20,550 --> 00:02:21,630
We also have a padding,

53
00:02:21,630 --> 00:02:23,150
but we'll ignore this for a moment.

54
00:02:23,150 --> 00:02:26,450
So let's remember this 738 pixels

55
00:02:26,450 --> 00:02:29,030
for the content of this element.

56
00:02:29,030 --> 00:02:30,100
The container,

57
00:02:30,100 --> 00:02:31,960
which would be the closest parent

58
00:02:31,960 --> 00:02:35,800
has a width of 682 pixels for the content

59
00:02:35,800 --> 00:02:40,230
plus 44 for the padding, which would be 722,

60
00:02:40,230 --> 00:02:43,940
not the 738 we need.

61
00:02:43,940 --> 00:02:46,203
So let's move one level up to the body.

62
00:02:47,180 --> 00:02:50,620
The body also has 722.

63
00:02:50,620 --> 00:02:54,450
So again, not the 738 we need.

64
00:02:54,450 --> 00:02:57,270
So let's check out the HTML element.

65
00:02:57,270 --> 00:02:59,830
Here we have the 738 again.

66
00:02:59,830 --> 00:03:04,400
So the width of the HTML element for the content is the same

67
00:03:05,760 --> 00:03:10,760
as the 100% of the content of our element 2 here,

68
00:03:11,080 --> 00:03:14,350
which has width 100% applied.

69
00:03:14,350 --> 00:03:15,250
The problem here though,

70
00:03:15,250 --> 00:03:19,600
is that we actually want the entire element to have

71
00:03:19,600 --> 00:03:24,370
100% of the word of the HTML element in this case.

72
00:03:24,370 --> 00:03:27,340
But with the default setting in CSS,

73
00:03:27,340 --> 00:03:31,810
this is not working because the so-called box sizing

74
00:03:31,810 --> 00:03:34,520
another property, which I can add right here.

75
00:03:34,520 --> 00:03:36,520
So box sizing.

76
00:03:36,520 --> 00:03:39,370
This is set to content box.

77
00:03:39,370 --> 00:03:41,330
If I save this, nothing changes,

78
00:03:41,330 --> 00:03:44,473
as you can see, it still has this over floating part here.

79
00:03:45,320 --> 00:03:46,570
Because by default,

80
00:03:46,570 --> 00:03:49,150
the percentage value of the width

81
00:03:49,150 --> 00:03:52,700
refers to the entire width of the parent element.

82
00:03:52,700 --> 00:03:54,530
In our case, the HTML element,

83
00:03:54,530 --> 00:03:57,130
which would be 738 pixels.

84
00:03:57,130 --> 00:03:59,250
And this would, is then applied to the

85
00:03:59,250 --> 00:04:01,363
content of our element.

86
00:04:02,530 --> 00:04:04,980
But what we want is actually,

87
00:04:04,980 --> 00:04:08,340
we want our entire element, sort of content,

88
00:04:08,340 --> 00:04:13,340
including the padding here to be 738 pixels wide.

89
00:04:13,810 --> 00:04:16,450
We can achieve this by changing the box sizing

90
00:04:16,450 --> 00:04:21,370
from content box to border box, like this.

91
00:04:21,370 --> 00:04:23,010
Now, as you see,

92
00:04:23,010 --> 00:04:27,870
the content of our element is just 638 pixels wide

93
00:04:27,870 --> 00:04:30,600
plus 50 pixels padding to the left

94
00:04:30,600 --> 00:04:33,063
and 50 pixels padding to the right.

95
00:04:34,100 --> 00:04:36,720
And with that, our scrolling to the left to the right,

96
00:04:36,720 --> 00:04:38,430
is not working anymore.

97
00:04:38,430 --> 00:04:40,630
This would also work for borders.

98
00:04:40,630 --> 00:04:45,440
If we add a border of maybe 10 pixels solid and black,

99
00:04:45,440 --> 00:04:47,290
just a quick one here,

100
00:04:47,290 --> 00:04:52,257
then our content size would again reduce now to 618 pixels

101
00:04:53,540 --> 00:04:55,850
plus 100 padding left and right,

102
00:04:55,850 --> 00:04:57,650
plus 20, so again,

103
00:04:57,650 --> 00:05:01,183
the 738 we have in the HTML element.

104
00:05:02,020 --> 00:05:03,330
If it would add a margin,

105
00:05:03,330 --> 00:05:07,270
this would not work because the border box value only

106
00:05:07,270 --> 00:05:10,093
applies to content padding and border.

107
00:05:11,020 --> 00:05:13,040
We don't need the border here though.

108
00:05:13,040 --> 00:05:15,450
Therefore we can ignore this.

109
00:05:15,450 --> 00:05:18,050
And with that, we learned all the concepts

110
00:05:18,050 --> 00:05:22,800
we need to add the header in a way that the background image

111
00:05:22,800 --> 00:05:26,050
can be displayed behind that header.

112
00:05:26,050 --> 00:05:28,610
So keep in mind that we have different values

113
00:05:28,610 --> 00:05:30,420
for our position property.

114
00:05:30,420 --> 00:05:32,490
Values to take the element

115
00:05:32,490 --> 00:05:34,360
where the position properties applied

116
00:05:34,360 --> 00:05:35,840
out of the document flow,

117
00:05:35,840 --> 00:05:38,410
our position absolute and position fixed.

118
00:05:38,410 --> 00:05:41,400
Position fixed will create a fixed element,

119
00:05:41,400 --> 00:05:43,120
meaning fixed to the viewport.

120
00:05:43,120 --> 00:05:44,609
So if I, again,

121
00:05:44,609 --> 00:05:46,100
zoom in here,

122
00:05:46,100 --> 00:05:48,700
it will be fixed to this visible area.

123
00:05:48,700 --> 00:05:50,050
The so-called viewport,

124
00:05:50,050 --> 00:05:52,630
the rest position absolute takes the element

125
00:05:52,630 --> 00:05:55,300
out of the document flow and positions it

126
00:05:55,300 --> 00:05:58,440
relative to a parent element,

127
00:05:58,440 --> 00:05:59,440
in our case,

128
00:05:59,440 --> 00:06:02,730
the HTML element as we don't have another parent

129
00:06:02,730 --> 00:06:03,980
another ancestor,

130
00:06:03,980 --> 00:06:07,230
which has the position relative ruled applied.

131
00:06:07,230 --> 00:06:08,120
As I said,

132
00:06:08,120 --> 00:06:09,870
more exceptions from that rule

133
00:06:09,870 --> 00:06:12,930
can be found in the detailed information

134
00:06:12,930 --> 00:06:16,290
attached to the last lecture of this module.

135
00:06:16,290 --> 00:06:19,370
Besides that we also learned about the percentage value

136
00:06:19,370 --> 00:06:21,090
for the width property here,

137
00:06:21,090 --> 00:06:25,210
Which then sets the width relative to an ancestor.

138
00:06:25,210 --> 00:06:26,330
In our case, again,

139
00:06:26,330 --> 00:06:30,080
the HTML element due to the reasons I just explained.

140
00:06:30,080 --> 00:06:33,030
And I learned that the percentage value of an element

141
00:06:33,030 --> 00:06:34,800
has to be monitored closely

142
00:06:34,800 --> 00:06:38,160
because we have to decide if this percentage should mean

143
00:06:38,160 --> 00:06:42,100
that the padding and the border are included or not.

144
00:06:42,100 --> 00:06:45,380
We can change this behavior with the box sizing property,

145
00:06:45,380 --> 00:06:49,490
either border box or by default content box.

146
00:06:49,490 --> 00:06:51,640
So that was a lot of information again.

147
00:06:51,640 --> 00:06:53,460
Therefore in the next lecture,

148
00:06:53,460 --> 00:06:56,083
we'll apply this knowledge in our project.