1
00:00:02,350 --> 00:00:04,310
With our newly gained knowledge

2
00:00:04,310 --> 00:00:06,410
about the position property,

3
00:00:06,410 --> 00:00:09,070
we can now finish our header.

4
00:00:09,070 --> 00:00:11,010
So, the goal of this lecture now

5
00:00:11,010 --> 00:00:13,780
is to bring this background image,

6
00:00:13,780 --> 00:00:16,680
and therefore the main element in the end,

7
00:00:16,680 --> 00:00:18,600
behind our header.

8
00:00:18,600 --> 00:00:21,010
For this, we'll take the header here

9
00:00:21,010 --> 00:00:23,460
out of the document flow.

10
00:00:23,460 --> 00:00:26,810
With that, our main element here will move up,

11
00:00:26,810 --> 00:00:28,900
and by keeping the header transparent,

12
00:00:28,900 --> 00:00:31,500
so by not adding any background color to it,

13
00:00:31,500 --> 00:00:34,740
we will achieve the result that we want to have here.

14
00:00:34,740 --> 00:00:36,700
For this, I'm back in the code.

15
00:00:36,700 --> 00:00:40,040
And here in the shared CSS file, as you know,

16
00:00:40,040 --> 00:00:43,430
the header will be displayed on all our pages

17
00:00:43,430 --> 00:00:44,780
of the website.

18
00:00:44,780 --> 00:00:47,850
And then here, I'll go to our header selector

19
00:00:47,850 --> 00:00:51,920
and there change the position property, to what,

20
00:00:51,920 --> 00:00:54,490
well, as I said, to absolute.

21
00:00:54,490 --> 00:00:57,130
This will be our first step with that.

22
00:00:57,130 --> 00:01:00,480
Yeah, you see that our image

23
00:01:00,480 --> 00:01:03,200
is already behind the header now.

24
00:01:03,200 --> 00:01:06,500
And if we zoom in a bit, to be able to scroll down,

25
00:01:06,500 --> 00:01:08,980
you'll see that the header moves

26
00:01:08,980 --> 00:01:11,770
with our scrolling down behavior.

27
00:01:11,770 --> 00:01:13,620
If I would change this to fixed,

28
00:01:13,620 --> 00:01:15,920
I know we did that already in the theory part,

29
00:01:15,920 --> 00:01:17,800
I just want to make sure this sticks.

30
00:01:17,800 --> 00:01:19,520
Then if I zoom in again,

31
00:01:19,520 --> 00:01:22,160
you see the header here would be fixed

32
00:01:22,160 --> 00:01:24,890
to our view port here.

33
00:01:24,890 --> 00:01:28,350
However, we will use the absolute value here

34
00:01:28,350 --> 00:01:29,970
for the position property.

35
00:01:29,970 --> 00:01:32,670
And if we zoom out a bit again,

36
00:01:32,670 --> 00:01:35,130
we see that while we achieved our goal

37
00:01:35,130 --> 00:01:37,550
with the background image and the main element here

38
00:01:37,550 --> 00:01:39,400
of being behind the header,

39
00:01:39,400 --> 00:01:44,400
but now the header is not displayed across the entire page.

40
00:01:45,520 --> 00:01:46,870
How can we fix this?

41
00:01:46,870 --> 00:01:49,560
Well, we also learned this, for this purpose,

42
00:01:49,560 --> 00:01:54,140
we can change the width property of our header element.

43
00:01:54,140 --> 00:01:56,600
For that, we'll add the width property here.

44
00:01:56,600 --> 00:01:59,340
And I'll use 100% here,

45
00:01:59,340 --> 00:02:02,430
as shown in the previous lecture.

46
00:02:02,430 --> 00:02:03,550
If we do that though,

47
00:02:03,550 --> 00:02:06,400
we see exactly the same problem that we had before.

48
00:02:06,400 --> 00:02:09,110
Well, the width of our header

49
00:02:09,110 --> 00:02:12,110
exceeds the width of our body element

50
00:02:12,110 --> 00:02:14,470
and therefore also of the HTML element,

51
00:02:14,470 --> 00:02:18,260
which is the ancestor our width here refers to.

52
00:02:18,260 --> 00:02:19,690
But to fix this problem,

53
00:02:19,690 --> 00:02:23,640
we learned that we can change the box sizing property,

54
00:02:23,640 --> 00:02:25,120
which is the next property,

55
00:02:25,120 --> 00:02:27,000
which will add to our header here.

56
00:02:27,000 --> 00:02:30,260
And we can change this to border box,

57
00:02:30,260 --> 00:02:33,310
not the default content box one, but border box.

58
00:02:33,310 --> 00:02:35,890
Therefore, the problem is fixed.

59
00:02:35,890 --> 00:02:39,210
And the 100% value here,

60
00:02:39,210 --> 00:02:44,210
refers to 100% of the width of the HTML element here,

61
00:02:44,570 --> 00:02:46,130
which is equal to the body in this case,

62
00:02:46,130 --> 00:02:48,260
but it refers to the body in this case,

63
00:02:48,260 --> 00:02:53,260
therefore, we now have a width of 1083.33 pixels here,

64
00:02:53,270 --> 00:02:58,270
which is a combination of the width of the content,

65
00:02:58,450 --> 00:03:02,720
plus adding the 60 padding to the left and to the right.

66
00:03:02,720 --> 00:03:05,370
With that, our header looks quite good already,

67
00:03:05,370 --> 00:03:06,203
as I would say,

68
00:03:06,203 --> 00:03:09,530
but we should maybe change the color of our nav items.

69
00:03:09,530 --> 00:03:11,010
These don't look too good.

70
00:03:11,010 --> 00:03:15,586
So, let's go back here and let's add

71
00:03:15,586 --> 00:03:19,330
another combinator here, again, the decent combinator,

72
00:03:19,330 --> 00:03:22,605
and here I will now select the anchor tags,

73
00:03:22,605 --> 00:03:25,820
because, as you know, our two nav items in here

74
00:03:25,820 --> 00:03:28,590
are simply going here,

75
00:03:28,590 --> 00:03:29,640
are anchor tags,

76
00:03:29,640 --> 00:03:31,880
and I specifically want to style these now,

77
00:03:31,880 --> 00:03:35,170
not the list items, which contain the anchor tags,

78
00:03:35,170 --> 00:03:37,220
therefore I'll refer to these anchor tags

79
00:03:37,220 --> 00:03:41,340
and here I'll first change the color to an RGB code

80
00:03:42,910 --> 00:03:45,313
of 255,

81
00:03:47,950 --> 00:03:50,910
251, and 0,

82
00:03:50,910 --> 00:03:52,500
with that we have this yellow tone,

83
00:03:52,500 --> 00:03:54,170
and if we go back,

84
00:03:54,170 --> 00:03:56,440
we see that the color doesn't change.

85
00:03:56,440 --> 00:04:01,440
Yeah, and this now is due to an earlier mistake we made,

86
00:04:01,820 --> 00:04:05,040
basically we had a hint in the video earlier,

87
00:04:05,040 --> 00:04:10,040
but I accidentally added the text for the links,

88
00:04:11,240 --> 00:04:13,290
not as part of the anchor tag,

89
00:04:13,290 --> 00:04:15,620
but as part of the list item here,

90
00:04:15,620 --> 00:04:17,810
therefore we have to fix this issue now.

91
00:04:17,810 --> 00:04:21,720
So, let's bring this right here and right there.

92
00:04:21,720 --> 00:04:22,860
So, now this is fixed,

93
00:04:22,860 --> 00:04:26,590
with that, we have correctly styled links here now.

94
00:04:26,590 --> 00:04:27,770
And what you also have to do now

95
00:04:27,770 --> 00:04:32,770
is we have to get rid of our text decoration first.

96
00:04:33,010 --> 00:04:33,947
Let's do this.

97
00:04:33,947 --> 00:04:35,770
So, we'll set this to none.

98
00:04:35,770 --> 00:04:38,430
With that the links look better already.

99
00:04:38,430 --> 00:04:40,050
And now, besides that,

100
00:04:40,050 --> 00:04:43,900
I also want to change some minor things about the links.

101
00:04:43,900 --> 00:04:45,640
Things would have before actually,

102
00:04:45,640 --> 00:04:50,640
like changing the font size here to 20 pixels.

103
00:04:52,500 --> 00:04:56,270
We'll also add a little bit of padding

104
00:04:56,270 --> 00:04:59,130
to increase the distance between our two links.

105
00:04:59,130 --> 00:05:03,543
So, let's add a padding top bottom left right of 12 pixels,

106
00:05:04,900 --> 00:05:07,550
and then I'll also add a slide,

107
00:05:07,550 --> 00:05:11,810
text shadow with one pixel left right,

108
00:05:11,810 --> 00:05:13,380
one pixel top bottom,

109
00:05:13,380 --> 00:05:15,240
a blur radius of two pixels,

110
00:05:15,240 --> 00:05:19,263
and an RGBA color of 0, 0, 0,

111
00:05:23,190 --> 00:05:25,300
and 0.2.

112
00:05:25,300 --> 00:05:26,600
So, let's see.

113
00:05:26,600 --> 00:05:28,580
Yeah, now this look a lot better.

114
00:05:28,580 --> 00:05:30,090
You hardly can see the text shadow,

115
00:05:30,090 --> 00:05:32,410
but it is there and it makes these,

116
00:05:32,410 --> 00:05:34,913
these links stand out a bit more.

117
00:05:36,320 --> 00:05:37,600
Besides that,

118
00:05:37,600 --> 00:05:40,810
I would also like to add this nice hover effect now,

119
00:05:40,810 --> 00:05:42,890
because at the moment we don't get any feedback.

120
00:05:42,890 --> 00:05:46,830
For this, we'll add another descendant combinator,

121
00:05:46,830 --> 00:05:50,410
now, the header, and now the hover pseudo selector

122
00:05:50,410 --> 00:05:52,220
for our anchor tags,

123
00:05:52,220 --> 00:05:55,870
and there, whenever we hover over these links,

124
00:05:55,870 --> 00:05:57,510
I want to change the color

125
00:05:57,510 --> 00:06:00,360
to an RGB code of

126
00:06:00,360 --> 00:06:01,633
77,

127
00:06:02,540 --> 00:06:04,500
77,

128
00:06:04,500 --> 00:06:07,403
and 70, oops, and 77.

129
00:06:08,950 --> 00:06:11,610
And I also want to change the background color,

130
00:06:11,610 --> 00:06:14,700
so to make this look like a button in the end,

131
00:06:14,700 --> 00:06:17,230
and we have to see fact due to our padding,

132
00:06:17,230 --> 00:06:18,410
we had it right here already,

133
00:06:18,410 --> 00:06:19,920
so this should look all right.

134
00:06:19,920 --> 00:06:24,920
So, we add an RGB color here of 255, 251 and zero,

135
00:06:27,673 --> 00:06:28,850
once again, that's again this yellow tone

136
00:06:28,850 --> 00:06:30,900
we had up here for the color.

137
00:06:30,900 --> 00:06:33,110
With that, if you do that,

138
00:06:33,110 --> 00:06:34,350
this looks good, I think.

139
00:06:34,350 --> 00:06:35,670
Yeah, I like it.

140
00:06:35,670 --> 00:06:39,840
What I don't like is the look of our buttons,

141
00:06:39,840 --> 00:06:43,000
so to say, is that we don't have these rounded corners,

142
00:06:43,000 --> 00:06:46,080
and I'll add these, not here on the hover effect,

143
00:06:46,080 --> 00:06:49,540
but actually already on the initial look

144
00:06:49,540 --> 00:06:51,150
of our element here.

145
00:06:51,150 --> 00:06:55,690
So, we'll take the border radius of box border radius,

146
00:06:55,690 --> 00:06:56,900
here we are.

147
00:06:56,900 --> 00:06:59,710
And I will use a radius of six pixels,

148
00:06:59,710 --> 00:07:02,663
if we do that, yeah, I think this looks cool.

149
00:07:03,520 --> 00:07:04,570
And by the way,

150
00:07:04,570 --> 00:07:08,130
in case you're wondering, why here in our header,

151
00:07:08,130 --> 00:07:12,340
we didn't apply the top zero and left zero rule

152
00:07:12,340 --> 00:07:15,220
as we had it in our theory example.

153
00:07:15,220 --> 00:07:18,320
Well, this is due to two facts, basically.

154
00:07:18,320 --> 00:07:21,560
First, our header here is the first element

155
00:07:21,560 --> 00:07:22,740
in the document flow.

156
00:07:22,740 --> 00:07:23,870
In our example,

157
00:07:23,870 --> 00:07:28,060
we applied the position absolute rule to the second document

158
00:07:28,060 --> 00:07:31,210
and the elements were nested into other elements.

159
00:07:31,210 --> 00:07:33,030
We nested these into the container,

160
00:07:33,030 --> 00:07:34,230
which was part of the body,

161
00:07:34,230 --> 00:07:38,390
here the header is directly the first element of the body,

162
00:07:38,390 --> 00:07:41,930
therefore, top and left zero is not required.

163
00:07:41,930 --> 00:07:44,410
We can, however, still add this here,

164
00:07:44,410 --> 00:07:46,820
just to be consistent with what we learned in theory,

165
00:07:46,820 --> 00:07:48,250
this doesn't hurt here,

166
00:07:48,250 --> 00:07:49,530
it's just not required,

167
00:07:49,530 --> 00:07:51,570
but in case the structure would change,

168
00:07:51,570 --> 00:07:52,860
which won't be the case here,

169
00:07:52,860 --> 00:07:55,810
we still make sure that the header sticks to the left

170
00:07:55,810 --> 00:07:59,123
and top of our page here.

171
00:08:00,620 --> 00:08:04,670
With that, we made a great progress again.

172
00:08:04,670 --> 00:08:06,860
The next step now, is therefore,

173
00:08:06,860 --> 00:08:09,810
our work on another part of this page.

174
00:08:09,810 --> 00:08:13,690
And this is in our Main Element D section

175
00:08:13,690 --> 00:08:15,680
with the ID highlights.

176
00:08:15,680 --> 00:08:17,973
Let's continue here as a next step.