1 00:00:01,878 --> 00:00:04,119 So in the last lecture we wrote a very 2 00:00:04,119 --> 00:00:08,286 simple layout using float, clear, margins and pettings. 3 00:00:09,841 --> 00:00:14,611 Now it's time to polish our blog post website a little bit. 4 00:00:14,611 --> 00:00:16,278 So let's go do that. 5 00:00:17,652 --> 00:00:20,474 OK, we just need to finish some things here, 6 00:00:20,474 --> 00:00:24,816 like putting some content in this right column, 7 00:00:24,816 --> 00:00:27,974 and also make the author section a little more 8 00:00:27,974 --> 00:00:30,191 beautiful, you know. 9 00:00:30,191 --> 00:00:32,608 And that's what we'll do now. 10 00:00:35,915 --> 00:00:40,098 So I'll put some content here in this box, 11 00:00:40,098 --> 00:00:43,732 and to do so I go back to the HTML file, 12 00:00:43,732 --> 00:00:47,482 into the outer posts, which is empty for now. 13 00:00:48,875 --> 00:00:52,958 So let's say we want three outer blog posts here. 14 00:00:54,506 --> 00:00:56,506 So I create simply three 15 00:00:58,419 --> 00:01:01,836 new diffs and call them maybe just other. 16 00:01:08,670 --> 00:01:10,753 And put some name in here 17 00:01:11,979 --> 00:01:14,312 diffs first other blog post. 18 00:01:22,927 --> 00:01:25,427 Now we'll do this three times. 19 00:01:27,107 --> 00:01:31,274 It's just so that that box isn't completely empty. 20 00:01:32,713 --> 00:01:34,796 So yet another blog post, 21 00:01:40,743 --> 00:01:43,160 and maybe the best post ever. 22 00:01:46,385 --> 00:01:47,218 Read this. 23 00:01:50,599 --> 00:01:53,266 Now I just want to format those. 24 00:01:57,020 --> 00:01:58,596 So Command+E again, 25 00:01:58,596 --> 00:01:59,513 a new rule. 26 00:02:01,554 --> 00:02:03,471 And let's say we want a 27 00:02:05,315 --> 00:02:07,565 margin bottom of 40 pixels, 28 00:02:11,120 --> 00:02:15,287 which means a distance between those boxes of 40 pixels. 29 00:02:16,856 --> 00:02:19,735 So this is what it looks like. 30 00:02:19,735 --> 00:02:23,485 It's not beautiful, but you know, it's there. 31 00:02:24,367 --> 00:02:28,534 And the cool thing is we know how to put it there. 32 00:02:30,509 --> 00:02:33,092 So let's just close this again, 33 00:02:34,062 --> 00:02:38,404 and let's talk about the author box down here. 34 00:02:38,404 --> 00:02:42,154 Now I want to show you a new kind of selector 35 00:02:43,361 --> 00:02:47,444 because we want to change this author image here. 36 00:02:49,491 --> 00:02:52,789 But you know, I don't feel like creating a new class 37 00:02:52,789 --> 00:02:54,456 just for this image. 38 00:02:56,353 --> 00:03:00,742 And if I format all the image at the same time, 39 00:03:00,742 --> 00:03:04,159 then the outer image, like this one here, 40 00:03:05,316 --> 00:03:07,149 will also be affected. 41 00:03:08,323 --> 00:03:12,259 So there is a way to actually just select 42 00:03:12,259 --> 00:03:15,759 this image without giving it a class name. 43 00:03:17,332 --> 00:03:21,249 And that's what I'm gonna do here in this file. 44 00:03:25,459 --> 00:03:29,209 So I write author box because this is the box 45 00:03:31,659 --> 00:03:33,909 where this image is inside. 46 00:03:35,364 --> 00:03:38,531 Author box, and then I just write img. 47 00:03:42,388 --> 00:03:46,579 And what this does is to select not all the images 48 00:03:46,579 --> 00:03:50,492 on the entire website, but only the images inside 49 00:03:50,492 --> 00:03:51,992 of the author box. 50 00:03:53,255 --> 00:03:55,392 So I don't need to make a whole new class 51 00:03:55,392 --> 00:03:57,162 just for that image. 52 00:03:57,162 --> 00:03:59,079 It's a much easier way. 53 00:04:02,398 --> 00:04:06,555 So and what I want now is to maybe make it 54 00:04:06,555 --> 00:04:10,388 a little smaller, so I'll say hide 100 pixels. 55 00:04:14,368 --> 00:04:16,829 And since it's a square, 56 00:04:16,829 --> 00:04:19,412 can make width also 100 pixels. 57 00:04:25,955 --> 00:04:27,395 Here it is. 58 00:04:27,395 --> 00:04:29,844 Now let's make it round. 59 00:04:29,844 --> 00:04:31,946 You probably have seen those round images 60 00:04:31,946 --> 00:04:33,919 all over the internet. 61 00:04:33,919 --> 00:04:35,858 Now I'll just show you how to do that, 62 00:04:35,858 --> 00:04:37,948 and it's really easy. 63 00:04:37,948 --> 00:04:41,448 We just have to specify the border radius. 64 00:04:42,824 --> 00:04:43,991 Border radius. 65 00:04:45,912 --> 00:04:49,412 And if we say we want this to be 50%, 66 00:04:53,714 --> 00:04:55,881 then this is what happens. 67 00:04:58,602 --> 00:05:00,519 Image is just a circle. 68 00:05:01,725 --> 00:05:04,605 Now another thing that we should probably do is 69 00:05:04,605 --> 00:05:08,587 to put this text here right beside this image. 70 00:05:08,587 --> 00:05:11,587 You know, this doesn't look so good. 71 00:05:12,720 --> 00:05:16,934 And to do that we will again use the float property. 72 00:05:16,934 --> 00:05:21,311 So we say these two elements should float left, 73 00:05:21,311 --> 00:05:24,353 which will make this element appear first 74 00:05:24,353 --> 00:05:25,874 right where it is now, 75 00:05:25,874 --> 00:05:29,457 and then this element should go right here. 76 00:05:30,866 --> 00:05:33,130 So let's just do that. 77 00:05:33,130 --> 00:05:35,630 Say float left for this image, 78 00:05:38,947 --> 00:05:41,364 and also for the author text, 79 00:05:42,476 --> 00:05:45,797 which is this class right here. 80 00:05:45,797 --> 00:05:47,380 So float also left. 81 00:05:54,957 --> 00:05:56,790 All right, here we go. 82 00:05:57,813 --> 00:06:02,805 Now using some margin we can actually put it where we want. 83 00:06:02,805 --> 00:06:06,532 So we just specify some top margin until it is 84 00:06:06,532 --> 00:06:09,532 here in the middle where we want it. 85 00:06:11,466 --> 00:06:14,466 We just have to try what works here. 86 00:06:17,353 --> 00:06:21,020 Margin top, I have no idea, maybe 15 pixels. 87 00:06:22,693 --> 00:06:26,301 Then just a margin to the left side 88 00:06:26,301 --> 00:06:28,317 so that there's a little space between 89 00:06:28,317 --> 00:06:30,234 the image and the text. 90 00:06:32,840 --> 00:06:35,590 Margin left, let's say 10 pixels. 91 00:06:38,157 --> 00:06:41,074 OK, 15 pixels was not quite enough. 92 00:06:42,453 --> 00:06:46,036 Maybe 25 pixels, so margin top could be 25. 93 00:06:51,207 --> 00:06:52,790 We're almost there. 94 00:06:53,993 --> 00:06:56,326 Let's try it with 30 pixels. 95 00:06:59,310 --> 00:07:00,646 And that's it. 96 00:07:00,646 --> 00:07:02,729 That looks great I think. 97 00:07:04,070 --> 00:07:07,704 So the last thing could be to maybe make 98 00:07:07,704 --> 00:07:11,036 this image here a little smaller, 99 00:07:11,036 --> 00:07:14,536 and put it right here after this paragraph 100 00:07:15,750 --> 00:07:18,333 in the HTML is amazing section. 101 00:07:19,744 --> 00:07:21,694 So let's do that. 102 00:07:21,694 --> 00:07:23,645 It's very easy. 103 00:07:23,645 --> 00:07:25,145 Just cut the image 104 00:07:29,543 --> 00:07:31,575 (mumbling), 105 00:07:31,575 --> 00:07:35,158 and paste it down here after this paragraph 106 00:07:38,482 --> 00:07:41,065 such as we want it, this image. 107 00:07:44,113 --> 00:07:48,196 All right, so if you remember as we did it before 108 00:07:49,268 --> 00:07:52,902 with this author image, I will now use the same 109 00:07:52,902 --> 00:07:56,069 type of selector to select this image. 110 00:07:59,473 --> 00:08:02,306 This is inside the blog post diff. 111 00:08:04,268 --> 00:08:05,935 So I will just write 112 00:08:09,655 --> 00:08:10,988 blog post image. 113 00:08:16,470 --> 00:08:19,887 So it's the same situation as we had here 114 00:08:20,743 --> 00:08:23,826 with the image inside the author box. 115 00:08:25,962 --> 00:08:30,129 Now just let's say we want it to be 150 pixels high. 116 00:08:36,560 --> 00:08:40,310 Now to maintain the aspect ratio of the image 117 00:08:41,588 --> 00:08:43,921 let's put the width to auto. 118 00:08:52,640 --> 00:08:53,807 OK, very well. 119 00:08:56,065 --> 00:08:56,898 All right. 120 00:08:57,888 --> 00:09:02,114 This web page maybe does not look perfect now, 121 00:09:02,114 --> 00:09:06,433 but wow, you learned such a lot in all the lectures 122 00:09:06,433 --> 00:09:10,404 of this section, and that's what actually matters. 123 00:09:10,404 --> 00:09:12,749 We used margins and pettings. 124 00:09:12,749 --> 00:09:15,930 We defined width and used float and clear 125 00:09:15,930 --> 00:09:18,368 and created a nice gray border, 126 00:09:18,368 --> 00:09:21,793 and even learned a new useful selector. 127 00:09:21,793 --> 00:09:24,928 So that's a lot of new stuff. 128 00:09:24,928 --> 00:09:27,656 And there's actually only one more thing 129 00:09:27,656 --> 00:09:30,048 I wanna show you in this CSS section, 130 00:09:30,048 --> 00:09:32,465 which is element positioning.