Introduction to Web Development CSS Positioning

Transcript from the "CSS Positioning" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Speaker 1: Talking about it, are we gonna go in to positioning in CSS, learning the best practices for top left, bottom right?
>> Brian Holt: Sure, so something that's kind of even beyond this box model right here is that, you can actually use this tag property called position to move stuff around, right?

[00:00:26] So, let's say you have this box and you wanted to be just three pixels to the left, right? You can do position and you can move it across. So,
>> Brian Holt: Let's show you a couple things right now actually. So let's go back to this Google thing right here, right?

[00:00:44] So, I'm gonna just right click on here, and I'm gonna say Inspect Element, just like what Nina was doing earlier.
>> Brian Holt: We'll make this just a little bit smaller. No, that's right, we're okay right there?
>> Brian Holt: Okay, so, you notice we've got this thing over here that says Styles.

[00:01:08] This is actually the CSS that's being applied to that img, right? These are the rules that we were just barely writing and what is being applied to that. So, up here we can start doing things like background-color: red. Pretty cool, right? So, we can actually start messing around with the CSS.

[00:01:32] And you can actually just say like, I don't want this to have so much padding on top. So you can just like uncheck that and it's no longer a padding on the top. So, just what this question is asking, there is another one called position. And position, you can kind of tell, this is how I want you to determine where you are on the page, right?

[00:01:54] So if I say position: absolute, that sounds like I'm going to tell you absolutely on the page where I want you to be in. So in this particular case, I can say, top: 0 px. So now it's on the very top of the page. And I can say, right: 0px, right?

[00:02:12] And now it's absolutely, if you look at this page now, absolute position at the top right of the page. Or I can say, a 100 pixels, now it's a 100 pixels from the right of the page. You can also go negative as well, right? So if I say negative, so it's going off the page, right?

[00:02:32] So, there's several ways you can do this as well. Like there's position absolute which just likes leave it there, right? If I say, let's take this off so it's right. If I say fixed now, okay? Now if I start scrolling, look, it actually like stays in place. It's fixed within your view port, right?

[00:02:56] So you have to think of your page in two different heights, right? There's actually the height of the entire page, including what's not on the screen, and there's also height in terms of what is your view port, what can you actually see. And so, position: fixed, is in terms of your view port, position: absolute, is in terms of the entire page altogether.

[00:03:17] So even though whether your position on the page is changing, your position on the viewport doesn't change, because your viewport is just your viewport, it's always where it is, okay? Now there's position, sorry, relative, we'll leave that at 10 pixels or something. Position: relative, come on.
>> Brian Holt: Relative.

[00:03:47]
>> Brian Holt: Okay, so relative is kind of an interesting one because what relative says is okay, go ahead and put yourself wherever you were going to put yourself and then from there, go here, right? So in this particular case, I have position relative. It puts itself like right here and I say, from there, go 10 pixels down.

[00:04:13] Or from there, go a 100 pixels to the left. Well, let's just leave this in terms of. Okay, so go to where you are supposed to be, so in this particular case let's just uncheck these, right? So that's where it would be if nothing was effecting it, right?

[00:04:28] Then from there, I want you to go right, a 100 pixels. Does that kind of make sense? Little bit? So, I have now set all of this, right? And, like you now know how to reposition things. People that are new to web development want to abuse this, right?

[00:04:52] They want to use position relative or position whatever for everything. That's not necessarily the best way to do it because then you start kind of getting into weird flows of your document. We're gonna to go over documents flow in just a second, but [COUGH] suffice to say that it makes, putting elements next to each other really difficult.

[00:05:15] So, if you notice here, the one that I checked off that Google already had on there was position top or padding top, right? You wanna stick more to padding and margins to get things together because then it makes things actually take up the space that they're supposed to take up.

[00:05:32] So in this particular case, we now have this padding top on top of it and now nothing can flow into that padding top, right? It's taking up that space so nothing will flow into it. And in your case, it's totally seamless to you, you have no idea that that's padding, right?

[00:05:48] But if you loook at it filled with background color on it then you can tell that it's there. But, you might ask, I want it to have background color, just on the logo, but I also want it to be down that 112px. So if you change that to margin, you'll have the same position, but as you know, background color doesn't go out to the margins, it just covers the padding.

[00:06:10] So, yeah, that's how you do it. That's why you would use margin. Do we follow, does that make sense?
>> Speaker 1: He had a kinda list of more questions, but I think you may have covered most of them.
>> Speaker 1: I guess, so like when to use floats versus position properties.

[00:06:36]
>> Brian Holt: So we're about to go into floats.
>> Speaker 1: Okay.
>> Brian Holt: It's the next thing we're gonna talk about.
>> Speaker 1: And then, I guess, yeah, so, if you're gonna cover that, might cover most of that and then just kind of a general question on what CSS frameworks do you recommend?

[00:06:53]
>> Brian Holt: That's an interesting question. So, there's kind of this concept of a CSS framework. We haven't actually got into frameworks. We're actually going to talk about jQuery which is a JavaScript tool set. The difference there is minor, so don't worry about tool set versus framework. Anyway, it's essentially code that someone else has written, that makes your job easier, right?

[00:07:15] Don't reinvent the wheel, someone's already invented it. So, the one that's popular is Bootstrap. We're not gonna talk too much about it. But, let's get rid of this, right? Some guys over at Twitter and GitHub made a bunch of really useful CSS. This looks really nice, right? They just give you a bunch of styles and says like here's a bunch of good ideas, why don't you go ahead and stick to that.

[00:07:43] It's great for if you're just starting out, if you just wanna get a site out really quickly and you don't wanna worry about the styles, just throw some Bootstrap on it. And with Bootstrap, all you have to do is you throw on, I want this to look kinda, I'll show you, right?

[00:07:58] Come on.
>> Brian Holt: Let's see, blah, blah, blah, blah, I want like buttons or something like that, all right? So like you think of a button, you think of a normal really ugly gray button that your operating system has, right? If you don't want it to look like that, all you have to do is throw on button, button default, and bam.

[00:08:24] And it just looks like that. You didn't have to write new CSS, someone wrote CSS that you can just throw on there. Or I want it to be a warning button, right? So you do button, button warning, kablam, right? Suddenly, you have a pretty button that has a nice little hover state, so if I hover over it,it gets darker, if I press it, it looks different, right?

[00:08:48] That's kind of the idea there. So this is a CSS framework, it's called Bootstrap, there's a couple of them, there's like Foundation and Inuit, some other ones. Which ones do I recommend? I recommend none of them [LAUGH] if you're actually going to be building a big product that you want to control how it looks.

[00:09:09] If you're just building a proof of concept that you wanna build on the weekend, you don't want to worry about how it looks, Bootstrap is great. It's the only one I really had any experience with. I know the guys that do it, they do an awesome job. They're all designers, so it all looks really nice.

[00:09:25] So, yeah, Bootstrap if you wanna try something like that, that's the one I would recommend.