Transcript from the "Header CSS Solution" Lesson
[00:00:00]
>> Jen Kramer: All right, next let's go ahead and tackle this header. This header through a lot of people but this is the flexbox portion of this. This is where I would really recommend using flexbox. So let's think about what's going on here. And it's often helpful just to look at your starting picture, my starting picture went.
[00:00:20]
Look at your starting picture, and describe what's going on here, okay? Sometimes it just helps to say it out loud, okay? So I've got an image over here on one side, and I have two lines of text over here on the other side. And they're right next to each other, right?
[00:00:37]
That kind of looks like two boxes, doesn't it? Two boxes side-by-side, on the same row. Doesn't it look that way? Yeah, kinda looks that way. So let's look at your HTML, and sure enough look we have a box here for our leftheader, and we have a box here for our rightheader.
[00:00:58]
And where's their parent?
>> Jen Kramer: The header tag is their parent, right? So our header is the what? Flex what?
>> Speaker 2: Container.
>> Jen Kramer: Flex container, I know it was a lot of terminology today. [LAUGH] Flex container. Okay, and the div inside of that, the div with the class of leftheader, and the div with the class of rightheader.
[00:01:25]
They are what?
>> Jen Kramer: Flex,
>> Jen Kramer: Items, flex items, okay? So there are the children. So what we need to do then is put these two things side by side. So what we're going to do,
>> Jen Kramer: Is read about here. We'll go ahead and we're gonna put in our header, we know we're gonna style that.
[00:01:54]
>> Jen Kramer: And we're gonna need to put in our usual flex properties here, right? So what are the properties we need to put in to make this flexbox?
>> Speaker 3: Display.
>> Jen Kramer: Display.
>> Jen Kramer: What's the value?
>> Speaker 3: Flex.
>> Jen Kramer: Flex, okay. What else do I need to put in?
>> Speaker 3: Flex-flow.
[00:02:16]
>> Jen Kramer: Flex-flow, and my values here?
>> Speaker 3: Row nowrap.
>> Jen Kramer: Row, nowrap, okay. Anything else?
>> Jen Kramer: Right? So let's just do that launch and see what happens, if we save that.
>> Jen Kramer: Refresh the page, there we go. So we've got our picture, and we've got our text, kinda next to it, right?
[00:02:50]
So this is good, we're making progress, okay? So what else we can do here? What I did, was I said we'll have a justify if in content, space-between. So that's gonna give me a little bit of space between the two boxes. Then in terms of the boxes themselves, we can write some styles for that.
[00:03:19]
Leftheader,
>> Jen Kramer: And rightheader.
>> Jen Kramer: Okay, and so what are we gonna put in here for leftheader? We probably want to flex basis, right? Flex-basis of 40%. Why 40%? Cuz I played around with it and tried a bunch of different values, and I thought this was prettiest, okay? We can do the same thing here for rightheader flex-basis of 60%.
[00:04:00]
>> Jen Kramer: Okay, and if we look at page now, all right? So wow, hard to say what's going on here? Do we have any suggestions for debugging?
>> Jen Kramer: The next thing to tattoo on your forehead, stick a border on it, okay? Stick a border on it. We don't know what's going on, put a border on it, border.
[00:04:28]
3px dotted green, and we're gonna put a border on the right here, border, 3px dotted blue.
>> Jen Kramer: And once we do that we can see much better what's going on, right? So my image is shoved all the way over here on the left side of this box. Where should it really be?
[00:05:01]
>> Speaker 3: Center.
>> Jen Kramer: Right. On the right side of this box. How can I get it to the right side of the box?
>> Jen Kramer: Anyone have a suggestion?
>> Speaker 2: If you said float, right?
>> Jen Kramer: Float, right, maybe? But there's an easier way.
>> Jen Kramer: It's actually not the left, I'm sorry I need to be on the left side.
[00:05:24]
How about just text-align? Right, just plain old text-align, right.
>> Jen Kramer: Much better.
>> Speaker 2: So that works even though it's an image?
>> Jen Kramer: Even though it's an image, yep, it's an in-line element. So it's very happily we'll screwed them over to the right-hand side of that box. Yes, Jenna.
[00:05:50]
>> Speaker 2: I'm just gonna say, for me flow it, and then the right didn't work at all was really nice line.
>> Jen Kramer: Yeah, yeah, cuz it is flex is a flex item and trying to mix a rear flex with your floats and that it's just bad form. Don't do that, don't do that.
[00:06:07]
Okay, so then I had some padding things that I put in again, it was a lot of trial and error on my part to see what look pretty. But around this sort of out, I'm gonna take out my ugly border, and I'll give you my other values that worked for me.
[00:06:22]
For the leftheader, I had a flex-basis, a text-align, and a padding- right of 0.5 rem, okay, for the leftheader. And then for the rightheader, and I had the flex-basis of 60%
>> Jen Kramer: And I have the margin-top of 3.75 rem, so that's gonna push it down from the top.
[00:06:54]
And I had some padding on the left of 0.5 rem, okay. And so what that did was it went ahead and aligned this very nicely in the middle. Although these font sizes needed to change in order for this to completely work. So let me give you those styles as well.
[00:07:16]
I think I over-deleted some of these styles. Rightheader, h1, what I had going on here for the rightheader h1 was margin 0. That's part of the problem that's going on here. Why do we have that huge gap in between the Blog and My So-called Light Speed Life? That's a margin that's coming from the h1 or the paragraphs by default, right?
[00:07:43]
So one of the things we need to do in order to tighten up the space between those is turn off that default margin. So we turn that off color of da0090 which is that lovely shade of pink. So that'll make the each one that pink color, and a font-size of 3 rem.
[00:08:11]
>> Jen Kramer: So that's a good start there, a little bit bigger. And then did I do anything paragraph, I did. I thought that gap was still a little bit big here. So for the paragraph, what I did was I added a rightheader p, and I said the margin on the top should be 0.5 rem, okay?
[00:08:43]
So that will tighten up that space just a little bit and make it look much prettier
>> Jen Kramer: Cool? So sometimes it's flexbox, sometimes it's default margins that come with it from the browser that you have to get rid of, sometimes you gotta add your own margin and padding.
[00:09:01]
But it's all boxes, and boxes, and boxes.