Voiceover: So in the last lecture we wrote a very
simple layout using float, clear, margins and pettings.
Now it's time to polish our blog post website a little bit.
So let's go do that.
OK, we just need to finish some things here,
like putting some content in this right column,
and also make the author section a little more
beautiful, you know.
And that's what we'll do now.
So I'll put some content here in this box,
and to do so I go back to the HTML file,
into the outer posts, which is empty for now.
So let's say we want three outer blog posts here.
So I create simply three
new diffs and call them maybe just other.
And put some name in here
diffs first other blog post.
Now we'll do this three times.
It's just so that that box isn't completely empty.
So yet another blog post,
and maybe the best post ever.
Read this.
Now I just want to format those.
So Command+E again,
a new rule.
And let's say we want a
margin bottom of 40 pixels,
which means a distance between those boxes of 40 pixels.
So this is what it looks like.
It's not beautiful, but you know, it's there.
And the cool thing is we know how to put it there.
So let's just close this again,
and let's talk about the author box down here.
Now I want to show you a new kind of selector
because we want to change this author image here.
But you know, I don't feel like creating a new class
just for this image.
And if I format all the image at the same time,
then the outer image, like this one here,
will also be affected.
So there is a way to actually just select
this image without giving it a class name.
And that's what I'm gonna do here in this file.
So I write author box because this is the box
where this image is inside.
Author box, and then I just write img.
And what this does is to select not all the images
on the entire website, but only the images inside
of the author box.
So I don't need to make a whole new class
just for that image.
It's a much easier way.
So and what I want now is to maybe make it
a little smaller, so I'll say hide 100 pixels.
And since it's a square,
can make width also 100 pixels.
Here it is.
Now let's make it round.
You probably have seen those round images
all over the internet.
Now I'll just show you how to do that,
and it's really easy.
We just have to specify the border radius.
Border radius.
And if we say we want this to be 50%,
then this is what happens.
Image is just a circle.
Now another thing that we should probably do is
to put this text here right beside this image.
You know, this doesn't look so good.
And to do that we will again use the float property.
So we say these two elements should float left,
which will make this element appear first
right where it is now,
and then this element should go right here.
So let's just do that.
Say float left for this image,
and also for the author text,
which is this class right here.
So float also left.
All right, here we go.
Now using some margin we can actually put it where we want.
So we just specify some top margin until it is
here in the middle where we want it.
We just have to try what works here.
Margin top, I have no idea, maybe 15 pixels.
Then just a margin to the left side
so that there's a little space between
the image and the text.
Margin left, let's say 10 pixels.
OK, 15 pixels was not quite enough.
Maybe 25 pixels, so margin top could be 25.
We're almost there.
Let's try it with 30 pixels.
And that's it.
That looks great I think.
So the last thing could be to maybe make
this image here a little smaller,
and put it right here after this paragraph
in the HTML is amazing section.
So let's do that.
It's very easy.
Just cut the image
(mumbling),
and paste it down here after this paragraph
such as we want it, this image.
All right, so if you remember as we did it before
with this author image, I will now use the same
type of selector to select this image.
This is inside the blog post diff.
So I will just write
blog post image.
So it's the same situation as we had here
with the image inside the author box.
Now just let's say we want it to be 150 pixels high.
Now to maintain the aspect ratio of the image
let's put the width to auto.
OK, very well.
All right.
This web page maybe does not look perfect now,
but wow, you learned such a lot in all the lectures
of this section, and that's what actually matters.
We used margins and pettings.
We defined width and used float and clear
and created a nice gray border,
and even learned a new useful selector.
So that's a lot of new stuff.
And there's actually only one more thing
I wanna show you in this CSS section,
which is element positioning.