Lecturer: Okay.
So let's keep working on our carousel.
And I'm gonna start by actually
nicely formatting these buttons here
just so that they look like these two here.
All right.
So basically making them white and round
and the icon green and giving it some shadow.
So let's have that here.
Let's add some comment here, like the controls.
And so we want our button here.
So first of all, the background color was remember, white?
Okay.
And then since this is actually a button,
it has by default a border that we need to remove.
So that's a problem we run into before.
So the trick is always to set border to none.
So then it actually disappears completely.
But let's set that back.
So here we can simply define some height and some width.
Let's say 40.
I think that's part of our list here.
Well, actually not, but let's cheat here in this case
and use the value that's between 32 and 48.
So we need to do that
so that it looks more like the actual example
and with 40 pixels as well.
So there we go.
And finally we can see actually the icons now as well,
but they're very small, so we need to change that.
And here they are called button icon.
So button icon.
And again, we will go with a height and width of 24 pixels.
And there we go.
Nice.
Now, the fact that they are actually not squared,
so basically that the width property is not being respected,
is the fact that they are right now flex items.
And so remember the width works
a little bit differently there.
So right now the browser
is trying to fit all this content here
into the flex container,
and so it will automatically shrink these items here,
even though we set a width of 40 pixels.
So if we actually want to see the real results,
we should now take them out of this flex container.
And the way in which we will do that
is by actually positioning them absolutely.
All right.
So I will show you a little bit later why we do it that way,
but for now, let's just do that.
So position absolute.
So remember by doing that,
we take the element completely
out of the flow of the page, right?
So for the surrounding elements,
it is as if these elements were no longer on the page.
So then basically only these
two elements here remain as flex items.
All right.
So that's very important to remember
about absolute positioning.
And another thing that's very important to remember
is that we need to specify inside of which container
these elements should actually be absolutely positioned.
So in relation to what parent
the absolute positioning is going to happen.
And remember that we need to
basically choose a parent element
and set that one to position relative, all right?
So in this case, that is pretty obvious, right?
So the element that should be the parent of these two here
is this entire carousel.
So it is inside of that
that we want the absolute positioning to happen.
So we need to do this even though it is
of course already the parent,
but we still need to do this.
Okay, let's see what happens now.
And there we go.
So now they are finally back to being squared,
even though they are of course still
not exactly in the position where we want them to be.
But we will worry about that later.
For now, let's finish formatting them.
So we want them to be round
and therefore let's use a border radius
with a really high value.
Or actually, since they are squared,
remember we can simply say 50%
and that will then make them round as well.
Then here we want actually this to have a color.
So this icon, again, we use this stroke property.
All right.
And there we go.
And then it looks as if this icon here
is not really centered inside the button,
but we can actually fix that quite easily
because this element here is a child element.
So we can actually use this nice trick
of simply setting this to a flex container
and then align items to center it horizontally
or actually vertically
and justify items or justify content of course
and center as well.
So now that is nicely centered.
So as we saw here, flex box is even very helpful
when there is only one flex element.
So one flex item.
So right?
So in the button of course, there is only one element,
but still in order to vertically center that,
the easiest way is to declare the parent element
as a flex container and then center it both
horizontally and vertically like this.
All right.
But now comes the time
where we actually want to position these two elements.
So this one here should go to the right
and then a little bit outside of it
and the other one to the left, right?
So actually we need two different classes for each of them
so we can position them separately.
So this one is, yeah, this is one button.
So let's give it here simply another class.
So a variation of button, which is button left.
That's why I like to use these two dashes there.
And then button right like this.
Okay.
Actually, let's do it after the real button.
So let's start by saying left zero,
and then on the other one, we say right zero.
Okay.
So that looks good already.
And for some reason,
they're already like vertically centered,
but let's pretend they are not.
Okay.
So probably that is because of this flex container.
Let's see.
So they're still in a way flex items
even though they are absolutely positioned.
So if we no longer would align these items vertically,
then you see that they would
actually also move to another position.
So for now, as we implement the technique
that I want to show you next, let's leave it like this.
All right.
So let's go back to these buttons
because now I'm going to explain you
and to show you a brand new technique
that we use in CSS all the time actually.
So this one has to be with absolute positioning
and also kind of with centering at the same time.
So to start, let's go back here
to see what we actually want,
which is these two buttons here
to be exactly vertically centered,
and even more importantly,
also exactly centered here basically on this line.
So on this transition.
All right.
So how can we do that?
And let's actually first focus on the vertical centering
using absolute positioning.
Okay.
So we might think that we could
vertically center this element
simply by setting the position here to 50%.
So actually the top.
So here in the top property,
remember that we can specify the distance
basically from the top.
So we can do also that in percentages.
So for example, we could specify 10%
and then that would look like this.
However, we can also specify 50%.
So as I was just saying,
we might think that since 50% is like half of 100%,
that this might then vertically center this element.
So let's take a look
and well, it kind of does, but it also doesn't.
And the reason for that is that basically
50% is exactly half of the width of the parent container.
So that's from here to here.
But that is only the start of the element.
So the element starts right here,
but basically we would like the center of the element
to be here in the center, right?
But that probably sounds a bit confusing.
So let me actually show you now
a visual representation of this technique.
So this is our starting position
where we have the carousel with the position set to relative
and the button left
with the position set to absolute, right?
So now as we just did, we set the position to 50%.
So what that does is to move this element
by exactly 50% of the parent's container's height.
All right?
So for example,
if the carousel had a height of 600 pixels,
then this button would've moved down 300 pixels.
So exactly 50% of the parent's container.
And this is really important, okay?
However, as we see here,
what it did was to basically move the top of the element
exactly to the middle, but not the element itself.
So that's where the second part of this technique comes in.
So this technique of vertically centering
with absolute positioning.
So that second part
is by using the transform property once again.
Now, in this case, we use transform
not with scale, but with translating.
And what translate does
is to basically move the element around.
Now, here we can specify the X value,
which is basically horizontally
and the Y value which is the second one.
So that is vertically.
And in this example, I set that to minus 50%.
And why minus 50?
Well, because that will basically move the element
exactly 50% of it's height back to the top.
And again, these 50% here in the transform property
are actually 50% of the actual element's height.
So not off the parent container's height.
And that is completely different, okay?
So the result of doing this
is that now the element will be exactly centered vertically.
So again, the translate property takes two values
where the first one is basically horizontally
and the second one is vertically.
So by specifying minus 50%
means that the element will move up because of the minus
and it will move up by exactly 50% of it's actual height.
And so by doing this after the second step,
it will be completely centered vertically.
All right?
So I hope that made sense, especially with this animation,
and maybe we can play that again.
So we start here, which will move the element down here.
So again, 50% of the parent container site,
then we add to translate, as I just explained,
which will move it back 50%.
Okay?
So let's now go back to code and actually implement this.
Okay.
So here we are back,
and actually let's put this here in the button left
so that we don't get too confused.
Okay.
So that looks the same,
but now let's go back to our transform property.
So transform, and remember, now we don't use scale
like we did before, but we use translate.
And here again, we set the first one to zero by now,
which is horizontally, and then vertically we want minus 50%
for the reasons that I just explained to you.
So take a look at this button now, and there we go.
Now it is vertically centered
using this absolute position and technique.
Great.
So that's beautiful,
but you might be wondering why
we didn't simply use the power of flex box for this.
And the reason is that,
well, we actually don't want this to be a flex element.
That's the first thing.
The second thing is that sometimes
we actually want to position an element
absolutely like this
and then it is important that you know this technique.
And third is because actually we want to use translate
also horizontally, right?
Because in this case, if we simply used flex box,
then actually this wouldn't work.
First because, remember, it created all those extra gaps
for all of these elements that we did not want,
and then also because it would be impossible
to place these elements basically outside of the container,
which is exactly what we're gonna do now, right?
So what I mean here is that this translate of course
is not only vertically but also horizontally.
So we can specify a value here.
So let's experiment first with some other value,
let's say 10 pixels, just so you see how it works.
So what happens is that
it moved 10 pixels to the side, right?
But what if we set it to 50%?
Well, then basically it will move half of it's own width
to the right side.
So that's almost what we want,
but we want it to move to the left side, right?
So we say minus 50%, and there you go.
Now it is exactly where we want it to be.
So right in the center here,
basically vertically center it with this border here.
So this end of the element.
And to make that even more visible,
let's add some box shadow here.
Okay.
So vertically 12 pixels, then let's blur it 24.
And once again, I'm just using this here very quickly
and with experience this will become easier for you.
All right.
So now we can see that beautifully, right?
It is really exactly at the center.
Now, we could of course also have done it
completely without the transform.
So if we did this, of course it would look like this
and we could then try to guess
these values here kind of manually.
But the problem is that again,
these top and left values
are not in relation to the element itself,
but to the parent element.
So that is really one of the main takeaways of this lecture.
So in relation to parent element,
so I'm actually writing that down here for you,
and this is in relation to element itself.
So here we could now like say minus 125 pixels or something.
And in this case,
we do actually know the width of these elements.
So we could have said like minus 20 pixels
and then that would have worked.
But usually that is actually not the case,
so that is oversimplifying it.
So usually we would have to
mess here manually with some pixels
or even with some percentage which is even worse.
Like three percent for example,
and then that is too much,
so we would try two percent, which is not enough.
So yeah, this is not a good idea.
It is better to put these to some default like zero and 50,
and then use this.
All right.
Then here we need the same transform and the button right,
but in the opposite direction.
So of course we need this top here as well.
So let's put that...
Well, let's copy it just so it's a bit easier
for you to understand.
But we could also have simply put a tier into the button
which is the class that both of them have in common.
But anyway, now it looks like this.
So in this case,
we actually want it to move to the right,
and so here, this value needs to be positive.
Okay.
And there it is.
So we have our buttons here completely positioned
in the exact position where we wanted them to be.
And so once again,
that is a perfect use case for absolute positioning.
Now, let's turn this back on.
So to put the text back to where it was.
And also we need some...
We want the cursor here to be a mouse on these buttons.
So that's something I forgot
and it's a trick that we already used before.
So cursor set to pointer.
All right.
So that looks almost the same.
It is a little bit different,
but that's, well, because we used some different values,
but what matters is that we are
still missing these dots here.
So these are basically also buttons
and they are located
also outside of this container, all right?
So if it's outside of it's own container,
that looks again as if we will need
some absolute positioning here, right?
So let's go ahead and now code this part very quickly.
So right here at the very end where these controls start,
let's add some container element.
Let's say some div which I'm gonna call the dots.
And then let's put four button elements in there.
So for these four elements.
So the button with a class of dot.
And now what should we put in here?
Well, we can simply leave it empty,
but usually it's a better practice to create an empty space.
So something that looks like this,
but remember that HTML
actually ignores empty spaces like this.
So instead of writing an empty space like this,
it is a common technique to use an HTML entity for that.
And that entity,
so that entity that represents the empty space,
is NBSP, like this.
So you see it here, it's a non-breaking space.
That's what NBSP means.
All right.
So again, that's just in order to
not leave this button completely empty,
which is not a good idea usually.
Okay, copy it four times,
and then we need dots and dot.
Okay.
And let's start with these,
giving it some height and some width.
And the visual styling here is not really important for me.
What matters most at this point
is more like the stuff about
laying out the elements, actually.
So, again, since this is a button,
we need to reset the background color
or set it to something.
So let's set it to white.
And then it looks like we have
some border going on here, right?
So border, and that is two pixel border, solid and or green.
Okay, let's check that out.
And here it is.
Now, we cannot really see the border
because it is green and this whole dots element
is of course now yet another flex item
because we didn't yet position it absolutely.
But let's do that a bit later and continue styling the dots.
So here, let's also make them round
with a border radius of 50%
and give it a cursor like this.
Okay.
All right.
And now we need to also put them side by side, I guess.
All right.
So for that, well actually,
let's first position them absolutely.
So position absolute.
Okay, there they are.
And now of course we want them to be in the center.
So right here and then at the bottom for now.
And so we will now again
use the exact same technique that we used before,
only it being horizontally this time.
But the technique itself works in the exact same way.
So what I just explained to you before in that slide.
So this time, instead of setting the top to 50%,
I will set the left to 50%.
So left, 50%.
So that will move basically the start of the element
right to the middle of the parent container
because again, top and left
use the dimensions of the parent element as the reference.
Okay.
But now, we use transform and then translate.
And now the first value is the horizontal one.
So we move it back 50%,
which remember is in relation to itself.
All right.
So now it's in the center.
Nice.
Let's also put it at the very bottom.
Bottom zero.
There we go.
And now let's move it down.
So for that, I really like to use the transform property.
So again, I like to put these here like to zero or to 50%
or some really round value like that
and then here we can use translate
to position it exactly where we want.
So let's say 32 pixels, which is one of our values.
And yeah, that looks nice.
So now let's actually put some space between them.
And to do that, I will make this a flex container
and declare some gap on it.
Okay.
And if this is all going a little bit too fast for you,
especially the constant use of the flex property,
then of course feel 100% free to maybe review that part.
So maybe the part about flex box.
But anyway, let's now define some quick gap here, 12 pixels.
All right, beautiful.
And with this, we might be, well, almost done.
So the first one here still needs to be green.
So let's give the first one a special class.
So maybe that's yet another trend
that you are starting to see,
so that we have one class for everything,
and then we have specialized classes,
which give some of them basically some additional power.
And in this case,
that additional power will be that green background color.
There we go.
And that looks basically the same.
Just again some spacing that's different.
The content is also different.
But besides that,
or here we actually need to fix a bit the padding
and I think that's something I mentioned in the beginning.
So let's do that.
And also that's an opportunity actually
to show you something else.
So here, of course,
we could simply write padding to the right
should be like 48 pixels.
So that's better.
Let's just remove that last word there.
I don't like the way that looks.
Even this one may be cool.
Yeah.
But anyway, going back here, this of course works
because we set the general padding to 32,
then we override the padding on the left to 86
and then we override the padding to the right to 84.
However, we can set that all in one go.
So remember how the padding property has a shorthand,
which allows us to set the top and bottom in the first value
and the left and right in the second value, right?
So like this.
So this would be top and bottom and this left and right.
However, we can also take that further.
So we can specify four values.
And those four values will then be
top, right, bottom and left.
So basically clockwise starting at the top.
So let me take out all of this
and replace it with just one declaration.
Again, it starts at the top
and then goes clockwise
around the four borders, basically,
the four sides of the box.
So in the top, we want 32 pixels.
On the right, we want 48 pixels.
And the bottom, 32 pixels.
And left, 48.
Give it a save.
And that is wrong because actually on the left it is 86.
So this one here.
So now it is correct.
So now we did actually finish this small project.
It was a bit bigger than I thought it would be,
but still I think it was fun
and the final result looks fantastic
and we did learn a lot of things here,
actually starting with this.
So this is something new.
Then we learned how to scale an image
and then finally we learned this very important technique
where we could place an element anywhere that we wanted
by using a combination of absolute positioning
and transform with translate.
So maybe experiment a little bit
with the transform property, with the translate function.
So try different values here
for horizontal and vertical placement,
and that will then help you solidify this new knowledge.
And then I'll see you back here for our next component,
which is going to be a table.
And I promise that's going to be a little bit simpler.