Coding

CSS – Position | Beginner’s Course | #7

  • 00:00:01 welcome back to the beginner's guide our
  • 00:00:03 website keeps growing and growing and
  • 00:00:05 step-by-step we also improved the looks
  • 00:00:08 of it now in this video we will add one
  • 00:00:11 really important property to our website
  • 00:00:13 the position property let's do that in
  • 00:00:16 this video
  • 00:00:20 so back on our website and one important
  • 00:00:24 information before we start because if
  • 00:00:27 you never heard of the position property
  • 00:00:29 make sure to check out my video right
  • 00:00:32 here there should be the link because in
  • 00:00:35 this video we really have a look or take
  • 00:00:37 a look at the basics of the position
  • 00:00:39 property why we need it what the
  • 00:00:41 different values we have are and how
  • 00:00:43 these values interact with each other
  • 00:00:45 with these basic set we can now continue
  • 00:00:48 right here on our website in a
  • 00:00:49 beginner's guide and have a look at how
  • 00:00:52 we can apply this position property in a
  • 00:00:54 practical manner now let's do this and
  • 00:00:56 to start we should go back to our code
  • 00:01:00 right here I'm in the style.css file as
  • 00:01:03 you can see right there and the first
  • 00:01:05 thing we will change is the page title
  • 00:01:08 right there because remember the title
  • 00:01:11 if we inspected right here is this part
  • 00:01:14 up here and I would like to have a
  • 00:01:16 specific behavior for the title I would
  • 00:01:19 like the title to remain up there if I
  • 00:01:22 scroll down and at the moment well this
  • 00:01:25 is not happening so let's change that
  • 00:01:26 and we can change this by adding a well
  • 00:01:31 specific position to this title it's
  • 00:01:34 maybe a deposition up here in this
  • 00:01:36 position this position value is called
  • 00:01:39 fixed like that and let's add the
  • 00:01:43 semicolon and let's also add top zero
  • 00:01:47 right there also important also
  • 00:01:49 something we talked about in the other
  • 00:01:51 video I just mentioned the important
  • 00:01:54 thing now is that with position fixed
  • 00:01:56 and top zero edit the following behavior
  • 00:01:58 can be observed if you will of the page
  • 00:02:01 well we can see that Mike's world is now
  • 00:02:05 added to the top basically and it
  • 00:02:07 remains there if we scroll down and
  • 00:02:09 that's really cool because with that
  • 00:02:11 position fixed declaration being applied
  • 00:02:14 we can now position Mike's world related
  • 00:02:17 to the viewport and that's the reason
  • 00:02:20 why it sticks up there and why our page
  • 00:02:23 well looks a bit better now now the
  • 00:02:26 problem now is of course that well this
  • 00:02:29 kind of should be on the entire your
  • 00:02:30 page width and not just right there so
  • 00:02:33 let's go back and
  • 00:02:34 let's add something else and this is wit
  • 00:02:37 and let's add 100 percent right there to
  • 00:02:40 make sure it covers the entire page now
  • 00:02:44 before we continue one important note we
  • 00:02:47 will talk about the height and width and
  • 00:02:48 what you can do with that the pixels and
  • 00:02:50 the percentages in one of the next
  • 00:02:53 videos of this series so in this video I
  • 00:02:55 will just apply some of these things to
  • 00:02:58 make sure that the position property
  • 00:02:59 works correctly in case you're not sure
  • 00:03:02 about how this works in detail don't
  • 00:03:04 worry we will talk about that later in
  • 00:03:07 this series as I just said so for the
  • 00:03:09 moment let's just apply the basics that
  • 00:03:11 we need to make our page work and this
  • 00:03:13 basic is for example this with 100%
  • 00:03:16 declaration right here so if we save
  • 00:03:19 that and go back now and reload our page
  • 00:03:22 you can see that now we have our
  • 00:03:25 beautiful Mike's world kind of header
  • 00:03:29 actually right there on top of our page
  • 00:03:31 with the width of 100% that's really
  • 00:03:35 nice but if you follow this serious and
  • 00:03:38 if you know the structure of our page
  • 00:03:40 you might see something now because
  • 00:03:42 there is something hidden behind Mike's
  • 00:03:45 role now do you know what I mean because
  • 00:03:47 if we look at the nav part right here
  • 00:03:51 can you see it the nav element is now
  • 00:03:54 behind Mike's world now Mike's rod
  • 00:03:57 should be on top that's not the issue
  • 00:03:58 but nav should actually be positioned
  • 00:04:01 well kind of blow it now how can we
  • 00:04:04 change that well the answer is there are
  • 00:04:06 multiple ways how to solve this issue I
  • 00:04:09 will just show you one way now which in
  • 00:04:11 my opinion is a really easy to implement
  • 00:04:13 and easy to understand solution so let's
  • 00:04:17 go back and before we do that we should
  • 00:04:20 maybe quickly rearrange our code right
  • 00:04:23 here because I would like to do it like
  • 00:04:26 this so let's maybe delete it right here
  • 00:04:29 and position the class right there so
  • 00:04:33 you are free to organize that the way
  • 00:04:35 you want it but I like to have it in a
  • 00:04:37 way that I have the CSS code that refers
  • 00:04:40 to elements appear and appear and then
  • 00:04:43 we can follow the CSS code that refers
  • 00:04:46 to classes right there
  • 00:04:48 right there and right there as I said
  • 00:04:51 you can do this as you prefer actually
  • 00:04:53 but I think with that approach we can
  • 00:04:55 make sure that this is kind of kept as
  • 00:04:57 well simple as possible and makes it
  • 00:04:59 easy for us to keep the overview what
  • 00:05:02 you can also do of course is we could
  • 00:05:04 for example add something like header
  • 00:05:07 right here you can see this is how you
  • 00:05:10 can comment out code in CSS so simply
  • 00:05:13 add a slash and dastar symbol at the
  • 00:05:15 beginning of the code that should be
  • 00:05:17 commented out and then add this star and
  • 00:05:19 the slash at the end of the code that
  • 00:05:21 should be commented out so this could be
  • 00:05:23 the header for example and the trip text
  • 00:05:27 well I have to look that up to be honest
  • 00:05:28 I think the trip text was in the main
  • 00:05:30 part so we could also add that as said
  • 00:05:34 you don't have to do that I just do it
  • 00:05:37 for now in this video to make sure that
  • 00:05:38 we keep the overview of the different
  • 00:05:40 areas we have right here in our CSS code
  • 00:05:44 so this is the header and now coming
  • 00:05:48 back to what we wanted to add because we
  • 00:05:50 wanted to work on the nav part actually
  • 00:05:54 because the problem is as I said that
  • 00:05:56 this element should now be below Mike's
  • 00:05:59 world now how can we do that well the
  • 00:06:03 answer is we don't have to add anything
  • 00:06:05 right here we'll work on that in a few
  • 00:06:06 seconds but we'll just go back to
  • 00:06:09 index.html right there and now add a
  • 00:06:12 class to our header and we don't have to
  • 00:06:15 do that but in CSS it makes things a lot
  • 00:06:18 easier if you work with classes so let's
  • 00:06:20 add a class to header and maybe call it
  • 00:06:24 fixed bar again the cap up case we
  • 00:06:27 talked about that in another video and
  • 00:06:29 let's save that and go back to our
  • 00:06:32 stylesheet and now I will add this class
  • 00:06:37 right here so it's called
  • 00:06:39 fixed bar like that and now we will add
  • 00:06:45 something and what will we add well we
  • 00:06:48 will add height right here let's maybe
  • 00:06:51 add 70 pixels for example now I might
  • 00:06:55 ask yourself what are we doing here well
  • 00:06:58 if I add the height now all the right
  • 00:07:01 and maybe at a height of let's say 40
  • 00:07:06 pixels because we have a padding of 10
  • 00:07:08 so 40 plus 10 top plus 10 bottom is 16
  • 00:07:13 and now we have the height of 70 can you
  • 00:07:16 imagine where this is going to let's see
  • 00:07:19 let's save it and let's go back and
  • 00:07:22 let's now reload the page and see what
  • 00:07:25 happens because if we do that well then
  • 00:07:28 you can see that now our nav element is
  • 00:07:32 visible again and what's the reason for
  • 00:07:34 that
  • 00:07:34 well let's inspect that to understand
  • 00:07:37 what we just did here this is our page
  • 00:07:40 title so the class that we have and
  • 00:07:43 basically this part right here and
  • 00:07:46 important right here we defined that
  • 00:07:49 this part is fixed this means we
  • 00:07:53 excluded this class basically from our
  • 00:07:56 document flow this is the reason why
  • 00:07:59 Neff was hidden behind Mike's world
  • 00:08:02 because 14 F element Mike's rod wasn't
  • 00:08:05 there anymore but now we added this
  • 00:08:08 fixed bar class and this fixed bar class
  • 00:08:12 if you look right here kind of wraps
  • 00:08:14 this page title class so this part
  • 00:08:18 basically right here is out of the
  • 00:08:22 actual document workflow but the
  • 00:08:24 wrapping class the center class well
  • 00:08:27 it's not it's still part of the normal
  • 00:08:30 document workflow now as we know that
  • 00:08:33 and as we know that our class that is
  • 00:08:37 not part of the document workflow has a
  • 00:08:39 height of 40 plus 10 plus 10 so 60 well
  • 00:08:44 adding 70 to this class that is part of
  • 00:08:48 the workflow leads to exactly this
  • 00:08:50 result because as you can see right here
  • 00:08:52 the fixed bar right there now defines
  • 00:08:55 that we are able to specify the distance
  • 00:08:58 between this first element right there
  • 00:09:00 because that's what we got so we have
  • 00:09:02 this element in our workflow and the
  • 00:09:05 following element the nav element you
  • 00:09:07 can see it right here the distance or
  • 00:09:09 actually you can't see it let's maybe do
  • 00:09:11 it like this I think this makes it
  • 00:09:12 easier so here we have the header class
  • 00:09:14 right
  • 00:09:15 and if I open this Neff element you can
  • 00:09:17 see that the unordered list kind of
  • 00:09:20 comes after that
  • 00:09:21 so the Neff element is just the element
  • 00:09:24 we have for our general website
  • 00:09:26 structure therefore the UL the unordered
  • 00:09:29 list is bigger than the Neff element not
  • 00:09:32 a big issue right here the important
  • 00:09:34 thing is that with this approach we one
  • 00:09:36 are able to easily add this bar on top
  • 00:09:38 right here and additionally made sure
  • 00:09:40 that the following element so home and
  • 00:09:42 contact is also displayed correctly now
  • 00:09:45 there is one thing that I don't like
  • 00:09:47 what he is still and this is this gap
  • 00:09:49 right here to the left we can easily
  • 00:09:51 solve that if we go back to our CSS code
  • 00:09:55 and add body up here like that and
  • 00:09:59 simply define that body should have a
  • 00:10:02 margin of zero if we save that and if
  • 00:10:06 you go back you can see that now our
  • 00:10:09 header bar right here even looks better
  • 00:10:11 and now our page occupies the entire
  • 00:10:14 space some small cosmetical correction
  • 00:10:17 but I think it's better the way it is
  • 00:10:19 right now now with that we made sure
  • 00:10:22 that our header here looks good actually
  • 00:10:24 but there is still one thing that I
  • 00:10:26 would like to add if we go back right
  • 00:10:29 here then I would like to add another
  • 00:10:31 thing to our page title right there and
  • 00:10:33 this is called text – aligned and this
  • 00:10:38 should be Center if I save that go back
  • 00:10:41 go to page then you can see that the
  • 00:10:44 text is now positioned well in the
  • 00:10:46 center of our page again we will talk
  • 00:10:49 about the details behind the text
  • 00:10:51 formatting and detect styling later
  • 00:10:53 throughout this series I just wanted to
  • 00:10:55 take the chance to show you that you can
  • 00:10:57 also easily fix that by just adding that
  • 00:11:00 simple property so we now kind of finish
  • 00:11:03 the positioning of Mike's world and to
  • 00:11:07 be honest if I look right here the
  • 00:11:09 general positioning is quite okay
  • 00:11:12 actually now what I mean by general
  • 00:11:14 positioning the general content parts
  • 00:11:18 that we have so for example right here
  • 00:11:19 our header element appear right this one
  • 00:11:24 then we have our navigation then we have
  • 00:11:26 the main part and
  • 00:11:28 then we have the footer this is quite
  • 00:11:31 okay actually at the moment there is
  • 00:11:33 maybe one more thing that we can do and
  • 00:11:35 this is maybe give this a little bit of
  • 00:11:38 a different color because this is
  • 00:11:40 actually not part of the footer it's
  • 00:11:42 still part of our main element so let's
  • 00:11:45 quickly change that maybe by simply
  • 00:11:47 going well well maybe to the index.html
  • 00:11:49 file and now right here we have this
  • 00:11:53 paragraph and let's maybe also add a
  • 00:11:56 class right here like that and let's
  • 00:11:59 maybe call it feedback like that and if
  • 00:12:04 we now go back to our style file and now
  • 00:12:07 also add the footer you can see this is
  • 00:12:10 also kind of a preparation for the next
  • 00:12:12 video already we will just add footer
  • 00:12:15 right here and now refer to our feedback
  • 00:12:20 class we just created and now define a
  • 00:12:23 background color color like that off
  • 00:12:28 again
  • 00:12:29 let's maybe use five to 175 one this
  • 00:12:32 purple let's say that the color should
  • 00:12:34 be white and text the line we learned
  • 00:12:38 there in the header should be sender
  • 00:12:43 like that and if we go back and save
  • 00:12:47 that yeah then this looks better now for
  • 00:12:49 the moment but coming back to what I was
  • 00:12:52 talking about a few seconds ago is that
  • 00:12:54 the general structure of the page is
  • 00:12:56 okay the problem we now have is not our
  • 00:13:00 general positioning it's the way our
  • 00:13:03 elements are displayed inside this kind
  • 00:13:07 of elements that give the page structure
  • 00:13:09 so what do I mean well we have a problem
  • 00:13:11 with the way this list is displayed
  • 00:13:14 inside the nav element right here we
  • 00:13:17 also have a problem with the way the
  • 00:13:19 text right here and the images are
  • 00:13:22 displayed in our main element and we
  • 00:13:24 also have a problem if we scroll down
  • 00:13:26 right here with the way our elements are
  • 00:13:30 displayed in the footer because we would
  • 00:13:32 like to have this text right here next
  • 00:13:34 to Mac's picture for example but these
  • 00:13:37 are not issues necessarily related to
  • 00:13:40 the position
  • 00:13:41 our team for this purpose we need
  • 00:13:44 another property and this property is
  • 00:13:46 called display so in the next video of
  • 00:13:49 this series and this will be one video
  • 00:13:51 again we will have a look at the theory
  • 00:13:54 behind the display property and of
  • 00:13:56 course also applied to our webpage and
  • 00:13:59 with that we will do another step
  • 00:14:01 regarding the styling of our page and
  • 00:14:03 make it step by step a little bit more
  • 00:14:06 beautiful now as always the only thing I
  • 00:14:09 can say right now is thanks again for
  • 00:14:11 watching this video I hope you liked it
  • 00:14:13 and I hope to see you in the next video
  • 00:14:15 of the series bye