1 00:00:02,340 --> 00:00:03,340 For the children, 2 00:00:03,340 --> 00:00:06,120 we have one bigger task in here, 3 00:00:06,120 --> 00:00:07,810 and that was the second challenge 4 00:00:07,810 --> 00:00:10,563 you had to overcome in here and that's the image. 5 00:00:11,470 --> 00:00:13,110 Let's get started easily 6 00:00:13,110 --> 00:00:16,010 by adding a border to the image maybe 7 00:00:16,010 --> 00:00:17,750 because we have a border around the main element, 8 00:00:17,750 --> 00:00:19,390 so I think it greatly fits in 9 00:00:19,390 --> 00:00:21,163 if we also add one to the image. 10 00:00:22,070 --> 00:00:23,410 Nothing easier than that. 11 00:00:23,410 --> 00:00:25,670 We apply the border property 12 00:00:26,570 --> 00:00:28,850 and now add a border with five pixels, 13 00:00:28,850 --> 00:00:31,690 maybe solid one and an RGB code 14 00:00:33,120 --> 00:00:34,393 of 44, 15 00:00:35,770 --> 00:00:36,650 44 16 00:00:37,490 --> 00:00:38,683 and 44. 17 00:00:39,650 --> 00:00:41,700 So that was the easier part. 18 00:00:41,700 --> 00:00:45,113 But now if you remember the finished result I showed you, 19 00:00:46,010 --> 00:00:49,750 this image here should be placed above this border, 20 00:00:49,750 --> 00:00:52,020 this top border of our main element 21 00:00:52,020 --> 00:00:55,380 and this should basically go through here. 22 00:00:55,380 --> 00:00:58,660 I mentioned that we can achieve this with margins, 23 00:00:58,660 --> 00:01:01,070 specifically negative margins, 24 00:01:01,070 --> 00:01:05,580 and even more specific, a top margin. 25 00:01:05,580 --> 00:01:08,860 Now, before we apply this, some things to know. 26 00:01:08,860 --> 00:01:13,710 We cannot apply vertical margins to inline elements. 27 00:01:13,710 --> 00:01:15,330 That's what we learned in this module, 28 00:01:15,330 --> 00:01:16,790 and this is correct, of course, 29 00:01:16,790 --> 00:01:19,440 but there is an exception here. 30 00:01:19,440 --> 00:01:23,563 We have two different types of inline elements. 31 00:01:24,440 --> 00:01:28,913 We have replaced and non-replaced inline elements. 32 00:01:29,840 --> 00:01:31,670 Without diving too deep here, 33 00:01:31,670 --> 00:01:35,330 a non-replaced inline element is, for example, 34 00:01:35,330 --> 00:01:38,240 our anchor tag, this one here. 35 00:01:38,240 --> 00:01:40,260 That's also the element type 36 00:01:40,260 --> 00:01:43,930 and we learned all the things we know about inline elements, 37 00:01:43,930 --> 00:01:48,370 but a replaced inline element is an image 38 00:01:48,370 --> 00:01:51,590 because the element itself is replaced 39 00:01:51,590 --> 00:01:53,520 so to say by the image, 40 00:01:53,520 --> 00:01:55,340 so it links to another page 41 00:01:55,340 --> 00:01:58,400 and retrieves the actual content from there. 42 00:01:58,400 --> 00:02:00,570 And for such inline elements, 43 00:02:00,570 --> 00:02:03,400 vertical margins can be applied. 44 00:02:03,400 --> 00:02:05,300 That's the first important thing to know. 45 00:02:05,300 --> 00:02:07,920 The second important thing is that we can apply 46 00:02:07,920 --> 00:02:11,080 positive margins as we did throughout this course so far 47 00:02:11,080 --> 00:02:12,993 and negative margins. 48 00:02:14,070 --> 00:02:15,183 Why is this important? 49 00:02:16,250 --> 00:02:20,550 Well, because if we can apply margins to our element here, 50 00:02:20,550 --> 00:02:23,520 to the image element, then we could say, 51 00:02:23,520 --> 00:02:28,520 okay, let me add a top margin of 10 pixels, for example. 52 00:02:29,930 --> 00:02:32,860 If I do this and check the element, 53 00:02:32,860 --> 00:02:34,370 you see the margin is applied 54 00:02:34,370 --> 00:02:38,450 and the element and all following elements are pushed down. 55 00:02:38,450 --> 00:02:41,680 Now, if I want to move this image up 56 00:02:41,680 --> 00:02:43,030 and also the following elements 57 00:02:43,030 --> 00:02:44,810 should, of course, be moved up, 58 00:02:44,810 --> 00:02:47,960 then why not giving a negative margin a try here 59 00:02:47,960 --> 00:02:49,653 of maybe 20 pixels? 60 00:02:51,490 --> 00:02:55,170 And as you see, now the image has moved up 61 00:02:55,170 --> 00:02:58,630 and also all the other elements because we now say 62 00:02:58,630 --> 00:03:01,693 we don't want have a margin of zero, for example. 63 00:03:03,150 --> 00:03:04,040 This would be zero. 64 00:03:04,040 --> 00:03:04,950 And if we inspect it, 65 00:03:04,950 --> 00:03:09,950 we see we have our image element here with the border 66 00:03:11,380 --> 00:03:15,933 and this border ends with the padding of the main element, 67 00:03:16,810 --> 00:03:18,023 so that would be zero. 68 00:03:18,890 --> 00:03:20,090 And with the negative margin, 69 00:03:20,090 --> 00:03:24,020 we can then basically go into the padding and the border 70 00:03:24,020 --> 00:03:27,780 and the margin of our main element. 71 00:03:27,780 --> 00:03:31,430 Now, sounds a bit cryptic here, but if we follow this logic, 72 00:03:31,430 --> 00:03:32,850 then we see that we have 73 00:03:34,130 --> 00:03:37,853 a padding of 24 pixels and a border of five pixels. 74 00:03:38,820 --> 00:03:40,410 And if my logic is correct, 75 00:03:40,410 --> 00:03:45,100 then if we add a margin top of minus 29 pixels, 76 00:03:45,100 --> 00:03:47,440 then we should be exactly in line 77 00:03:47,440 --> 00:03:50,930 with the border of our main element. 78 00:03:50,930 --> 00:03:54,040 And as it turns out, this is the case. 79 00:03:54,040 --> 00:03:56,003 So if I zoom in a bit here, 80 00:03:56,960 --> 00:03:58,890 you see that we are now exactly 81 00:03:58,890 --> 00:04:02,913 at the top of our border of the main element. 82 00:04:03,870 --> 00:04:07,260 Now the only thing we need to do now if this border 83 00:04:07,260 --> 00:04:10,540 should basically divide our image into two halves 84 00:04:10,540 --> 00:04:15,060 is to take the height of our element, which is 210 pixels, 85 00:04:15,060 --> 00:04:16,620 200 height for the content 86 00:04:16,620 --> 00:04:19,570 plus five for the border top and bottom. 87 00:04:19,570 --> 00:04:22,120 Well, this would mean we have 210 88 00:04:22,120 --> 00:04:24,410 divided by two, two halves, 89 00:04:24,410 --> 00:04:28,810 and this would mean we just add 105 to our 29 here, 90 00:04:29,770 --> 00:04:32,393 so minus 29, minus 105, 91 00:04:33,750 --> 00:04:36,510 which would be minus 100, 92 00:04:36,510 --> 00:04:41,510 and oops, minus 134 pixels. 93 00:04:41,630 --> 00:04:45,263 And if we do that, you see we achieved this goal. 94 00:04:47,500 --> 00:04:49,290 If you were unsuccessful here, 95 00:04:49,290 --> 00:04:51,340 no worries, this was a tricky one, 96 00:04:51,340 --> 00:04:52,690 but I also wanted to show you this 97 00:04:52,690 --> 00:04:54,400 towards the end of this module 98 00:04:54,400 --> 00:04:56,870 as it combines a few more concepts we learned 99 00:04:56,870 --> 00:05:00,060 and therefore is a bit more advanced. 100 00:05:00,060 --> 00:05:00,893 The great thing is 101 00:05:00,893 --> 00:05:04,823 that this was the last core challenge of this project. 102 00:05:05,790 --> 00:05:07,860 This means in the next lectures, 103 00:05:07,860 --> 00:05:10,270 we'll finally finish this page together 104 00:05:10,270 --> 00:05:13,553 and then I'll summarize what we learned in this module.