Transcript from the "Footer CSS Solution" Lesson
[00:00:00]
>> Jen Kramer: So we have lots of different ways to code this particular solution. But so I wanted to go through how I coded my solution. And you can see my solution, it's in the end folder. So if you look in blog-end you'll see what I did for a solution.
[00:00:16]
Doesn't mean that your solution is wrong because there's always a lot of different ways to code things. And so mine is just a suggestion. If yours looks like the design that we had here, then we're good, all right. So here we are, I am in blog-begin. And let me get my space set up here.
[00:00:41]
I've got the HTML open. I'm gonna go ahead and open up the CSS as well. Everybody's wrapping around. Make sure that's all good. Okay, and,
>> Jen Kramer: Let me also open up the picture here.
>> Jen Kramer: All right, so let's go ahead and let's kind of work from the bottom up, just for fun, okay.
[00:01:15]
So if we start down here at the bottom of the page, we have these icons that are all next to each other along with this legal disclaimer type of thing. And if we take a look at our HTML,
>> Jen Kramer: Scroll all the way down there to the bottom.
[00:01:33]
So what we've got here going on is we've got a pretty much a social media bar. So these all would all link to the alien websites if we actually had websites to link to, and you can see that they have images in there, they all have their alt tags and so forth.
[00:01:48]
So we needed to code this up as some kind of navigation bar. Pretty simply, I'm gonna scroll on down here to the bottom. The other thing that that you might have noticed here is I've put in a few of these additional HTML tags. I didn't have a lot of time to talk about them today., but the footer tag is pretty much what you would expect it to be, it's typically the footer of the web page.
[00:02:11]
And it often contains things like disclaimers and copyright and privacy notices and sales and social media links, and all the usual stuff you've come to expect in a footer. And so that tag happens to be a bit more semantic and describes the function of that particular part of the web page, using the footer tag as opposed to using just a generic div tag.
[00:02:31]
Diff means nothing, you're not communicating anything. Footer is a way better choice if that is in fact what you're building. If that's what you're building, call it a footer, okay. So far to start it we just had the text aligned in the center and we had a font size that was set, but we didn't have any other styling that was added here.
[00:02:52]
And so what we need to do first of all is let's go in ahead and code up,
>> Jen Kramer: Our particular nav bar. So as always the very first thing that we wanna do is turn off our margin, our padding, and set our list style type to none. Okay, so that's gonna turn off the bullets.
[00:03:19]
And that little formula there, you can use that anywhere. And it's so incredibly helpful because this is the way you're gonna start pretty much any kind of navigation of any kind. You gotta turn off the bullets, turn off the padding, turn off the margin, and then you're set and ready to go.
[00:03:34]
And then we're gonna say footer li. All we need to do is say display: inline-block, okay. So if we do that little, all we did was turn off the bullets, turn off the margin of the padding, and display inline. That would be adequate to going ahead and make this nav bar look like a nav bar.
[00:04:01]
>> Jen Kramer: Go on ahead and load this up. And you'll notice that the load time on this page is a little bit longer than the ones we've been working with. We actually have some fonts that are coming from the web in use on this web page. I'm gonna talk about how to do that magic later tomorrow.
[00:04:19]
But there's our footer, so there we go. We've got our navigation down there and it's going horizontally on the page. Some of you did this with Flexbox, that's totally legit as well. You may have slightly different spacing in between the links. Emma Weaver here was doing Flexbox using that on the bottom, and she had a little bit more space between the icons.
[00:04:40]
We could argue that that's actually better because then with our fat fingers as we're clicking on those things we're not going to run into the other icon having a little bit more space between those. But that's a design thing, okay. So that's that. The next thing that was causing people a lot of problems were the double lines down here that are two different colors, okay.
[00:05:05]
The lines that are two different colors. And so how do we go about doing that? Lines on web pages often come from borders, okay. So the horizontal rule is definitely a thing, but if you're using a horizontal rule just to make a line to make something pretty you're actually misusing the tag.
[00:05:25]
Remember HTML is all about markup. It's all about the various tags on the on the page and what you're trying to convey. As opposed to these pretty CSS borders which are literally about making things pretty. So what we wanna do is we need to have a border that's one color and a border that's another color.
[00:05:45]
Wouldn't it be nice if we just used two boxes, we could make the top of the footer, have a border of one color, and then we can take the bottom of the section which is the tag just above here, we can make the bottom of the section have a border of a different color.
[00:06:01]
So the way we set that up,
>> Jen Kramer: Get my page back.
>> Jen Kramer: This is actually where it is to get my color. So here on the footer what we're gonna do is we're gonna add a border-top of one pixel solid, and the color that I used was A61F11.
[00:06:33]
I think I've probably used it somewhere else in the document, A61F11, there we go. So that's the more of the reddish color. And then we can put in a section before that section, we're gonna do border-bottom: 1px solid #da0090, which gives me the pink color. If your colors where slightly different, that's totally fine, we're not gonna pick on you for that.
[00:07:11]
But these were the colors that I used here. And if you go on ahead and save that and refresh the page, those are actually two borders right there, okay, those are actually two borders right there. They're on top of each other, boom, right on top of each other like this.
[00:07:30]
Okay, so what do we need to do to separate the two borders? Anybody?
>> Class: Margin.
>> Jen Kramer: We need a little margin in order to separate these. So we can either put a top margin on the footer or a bottom margin on the section, doesn't really matter in this particular case which one you do.
[00:07:46]
So what I did was I put a bottom border on the section. Sorry, a bottom margin, so margin-bottom is going to be 0.3 RIM. That was my magic number, your magic number might be something slightly different, that's cool. We're not gonna pick up on you about that either.
[00:08:11]
>> Jen Kramer: So there's our two borders, kinda close together but different colors. Any questions on that?
>> Jen Kramer: Okay, so that's kind of a cool trick that you can whip out and use on other web pages in the future.