Voiceover: So in the last lecture we wrote a very 2 2
simple layout using float, clear, margins and pettings. 3 3
Now it's time to polish our blog post website a little bit. 4 4
So let's go do that. 5 5
OK, we just need to finish some things here, 6 6
like putting some content in this right column, 7 7
and also make the author section a little more 8 8
beautiful, you know. 9 9
And that's what we'll do now. 10 10
So I'll put some content here in this box, 11 11
and to do so I go back to the HTML file, 12 12
into the outer posts, which is empty for now. 13 13
So let's say we want three outer blog posts here. 14 14
So I create simply three 15 15
new diffs and call them maybe just other. 16 16
And put some name in here 17 17
diffs first other blog post. 18 18
Now we'll do this three times. 19 19
It's just so that that box isn't completely empty. 20 20
So yet another blog post, 21 21
and maybe the best post ever. 22 22
Read this. 23 23
Now I just want to format those. 24 24
So Command+E again, 25 25
a new rule. 26 26
And let's say we want a 27 27
margin bottom of 40 pixels, 28 28
which means a distance between those boxes of 40 pixels. 29 29
So this is what it looks like. 30 30
It's not beautiful, but you know, it's there. 31 31
And the cool thing is we know how to put it there. 32 32
So let's just close this again, 33 33
and let's talk about the author box down here. 34 34
Now I want to show you a new kind of selector 35 35
because we want to change this author image here. 36 36
But you know, I don't feel like creating a new class 37 37
just for this image. 38 38
And if I format all the image at the same time, 39 39
then the outer image, like this one here, 40 40
will also be affected. 41 41
So there is a way to actually just select 42 42
this image without giving it a class name. 43 43
And that's what I'm gonna do here in this file. 44 44
So I write author box because this is the box 45 45
where this image is inside. 46 46
Author box, and then I just write img. 47 47
And what this does is to select not all the images 48 48
on the entire website, but only the images inside 49 49
of the author box. 50 50
So I don't need to make a whole new class 51 51
just for that image. 52 52
It's a much easier way. 53 53
So and what I want now is to maybe make it 54 54
a little smaller, so I'll say hide 100 pixels. 55 55
And since it's a square, 56 56
can make width also 100 pixels. 57 57
Here it is. 58 58
Now let's make it round. 59 59
You probably have seen those round images 60 60
all over the internet. 61 61
Now I'll just show you how to do that, 62 62
and it's really easy. 63 63
We just have to specify the border radius. 64 64
Border radius. 65 65
And if we say we want this to be 50%, 66 66
then this is what happens. 67 67
Image is just a circle. 68 68
Now another thing that we should probably do is 69 69
to put this text here right beside this image. 70 70
You know, this doesn't look so good. 71 71
And to do that we will again use the float property. 72 72
So we say these two elements should float left, 73 73
which will make this element appear first 74 74
right where it is now, 75 75
and then this element should go right here. 76 76
So let's just do that. 77 77
Say float left for this image, 78 78
and also for the author text, 79 79
which is this class right here. 80 80
So float also left. 81 81
All right, here we go. 82 82
Now using some margin we can actually put it where we want. 83 83
So we just specify some top margin until it is 84 84
here in the middle where we want it. 85 85
We just have to try what works here. 86 86
Margin top, I have no idea, maybe 15 pixels. 87 87
Then just a margin to the left side 88 88
so that there's a little space between 89 89
the image and the text. 90 90
Margin left, let's say 10 pixels. 91 91
OK, 15 pixels was not quite enough. 92 92
Maybe 25 pixels, so margin top could be 25. 93 93
We're almost there. 94 94
Let's try it with 30 pixels. 95 95
And that's it. 96 96
That looks great I think. 97 97
So the last thing could be to maybe make 98 98
this image here a little smaller, 99 99
and put it right here after this paragraph 100 100
in the HTML is amazing section. 101 101
So let's do that. 102 102
It's very easy. 103 103
Just cut the image 104 104
(mumbling), 105 105
and paste it down here after this paragraph 106 106
such as we want it, this image. 107 107
All right, so if you remember as we did it before 108 108
with this author image, I will now use the same 109 109
type of selector to select this image. 110 110
This is inside the blog post diff. 111 111
So I will just write 112 112
blog post image. 113 113
So it's the same situation as we had here 114 114
with the image inside the author box. 115 115
Now just let's say we want it to be 150 pixels high. 116 116
Now to maintain the aspect ratio of the image 117 117
let's put the width to auto. 118 118
OK, very well. 119 119
All right. 120 120
This web page maybe does not look perfect now, 121 121
but wow, you learned such a lot in all the lectures 122 122
of this section, and that's what actually matters. 123 123
We used margins and pettings. 124 124
We defined width and used float and clear 125 125
and created a nice gray border, 126 126
and even learned a new useful selector. 127 127
So that's a lot of new stuff. 128 128
And there's actually only one more thing 129 129
I wanna show you in this CSS section, 130 130
which is element positioning.