With our newly gained knowledge
about the position property,
we can now finish our header.
So, the goal of this lecture now
is to bring this background image,
and therefore the main element in the end,
behind our header.
For this, we'll take the header here
out of the document flow.
With that, our main element here will move up,
and by keeping the header transparent,
so by not adding any background color to it,
we will achieve the result that we want to have here.
For this, I'm back in the code.
And here in the shared CSS file, as you know,
the header will be displayed on all our pages
of the website.
And then here, I'll go to our header selector
and there change the position property, to what,
well, as I said, to absolute.
This will be our first step with that.
Yeah, you see that our image
is already behind the header now.
And if we zoom in a bit, to be able to scroll down,
you'll see that the header moves
with our scrolling down behavior.
If I would change this to fixed,
I know we did that already in the theory part,
I just want to make sure this sticks.
Then if I zoom in again,
you see the header here would be fixed
to our view port here.
However, we will use the absolute value here
for the position property.
And if we zoom out a bit again,
we see that while we achieved our goal
with the background image and the main element here
of being behind the header,
but now the header is not displayed across the entire page.
How can we fix this?
Well, we also learned this, for this purpose,
we can change the width property of our header element.
For that, we'll add the width property here.
And I'll use 100% here,
as shown in the previous lecture.
If we do that though,
we see exactly the same problem that we had before.
Well, the width of our header
exceeds the width of our body element
and therefore also of the HTML element,
which is the ancestor our width here refers to.
But to fix this problem,
we learned that we can change the box sizing property,
which is the next property,
which will add to our header here.
And we can change this to border box,
not the default content box one, but border box.
Therefore, the problem is fixed.
And the 100% value here,
refers to 100% of the width of the HTML element here,
which is equal to the body in this case,
but it refers to the body in this case,
therefore, we now have a width of 1083.33 pixels here,
which is a combination of the width of the content,
plus adding the 60 padding to the left and to the right.
With that, our header looks quite good already,
as I would say,
but we should maybe change the color of our nav items.
These don't look too good.
So, let's go back here and let's add
another combinator here, again, the decent combinator,
and here I will now select the anchor tags,
because, as you know, our two nav items in here
are simply going here,
are anchor tags,
and I specifically want to style these now,
not the list items, which contain the anchor tags,
therefore I'll refer to these anchor tags
and here I'll first change the color to an RGB code
of 255,
251, and 0,
with that we have this yellow tone,
and if we go back,
we see that the color doesn't change.
Yeah, and this now is due to an earlier mistake we made,
basically we had a hint in the video earlier,
but I accidentally added the text for the links,
not as part of the anchor tag,
but as part of the list item here,
therefore we have to fix this issue now.
So, let's bring this right here and right there.
So, now this is fixed,
with that, we have correctly styled links here now.
And what you also have to do now
is we have to get rid of our text decoration first.
Let's do this.
So, we'll set this to none.
With that the links look better already.
And now, besides that,
I also want to change some minor things about the links.
Things would have before actually,
like changing the font size here to 20 pixels.
We'll also add a little bit of padding
to increase the distance between our two links.
So, let's add a padding top bottom left right of 12 pixels,
and then I'll also add a slide,
text shadow with one pixel left right,
one pixel top bottom,
a blur radius of two pixels,
and an RGBA color of 0, 0, 0,
and 0.2.
So, let's see.
Yeah, now this look a lot better.
You hardly can see the text shadow,
but it is there and it makes these,
these links stand out a bit more.
Besides that,
I would also like to add this nice hover effect now,
because at the moment we don't get any feedback.
For this, we'll add another descendant combinator,
now, the header, and now the hover pseudo selector
for our anchor tags,
and there, whenever we hover over these links,
I want to change the color
to an RGB code of
77,
and 70, oops, and 77.
And I also want to change the background color,
so to make this look like a button in the end,
and we have to see fact due to our padding,
we had it right here already,
so this should look all right.
So, we add an RGB color here of 255, 251 and zero,
once again, that's again this yellow tone
we had up here for the color.
With that, if you do that,
this looks good, I think.
Yeah, I like it.
What I don't like is the look of our buttons,
so to say, is that we don't have these rounded corners,
and I'll add these, not here on the hover effect,
but actually already on the initial look
of our element here.
So, we'll take the border radius of box border radius,
here we are.
And I will use a radius of six pixels,
if we do that, yeah, I think this looks cool.
And by the way,
in case you're wondering, why here in our header,
we didn't apply the top zero and left zero rule
as we had it in our theory example.
Well, this is due to two facts, basically.
First, our header here is the first element
in the document flow.
In our example,
we applied the position absolute rule to the second document
and the elements were nested into other elements.
We nested these into the container,
which was part of the body,
here the header is directly the first element of the body,
therefore, top and left zero is not required.
We can, however, still add this here,
just to be consistent with what we learned in theory,
this doesn't hurt here,
it's just not required,
but in case the structure would change,
which won't be the case here,
we still make sure that the header sticks to the left
and top of our page here.
With that, we made a great progress again.
The next step now, is therefore,
our work on another part of this page.
And this is in our Main Element D section
with the ID highlights.
Let's continue here as a next step.