FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Header & Footer With Grid

I know I said we were done with the header, but first we do need to make sure that it’s all formatted correctly, as working with absolute positioning can be a little tricky. Let’s then move on to working on the footer, which is shared across all the pages. The footer will also include the Semantic grid system.

2.4 Header & Footer With Grid

Welcome back to getting started with Semantic UI, and in this lesson, I want to focus on the footer. Now, before we begin, we need to make sure that the content that we're gonna add in is going to be below the header. And currently, with the image that's used right here, we have the position of absolute and it's going behind the relatively positioned elements. So, ideally, what I want to do is fix this before continuing on to fix this before continuing on to make sure that everything goes below the header. And then we can focus more on that footer. So, the first thing I'm going to do is take a look at wrapping a div around all of the header section. So in the header.php, file we have the menu right here, which is coming out from the side, but that's fine, that's for the mobile version and that overlays the page. However, we have the main head section and then also we have the image below. So now, I want to create another div element and call it header. And then I want to wrap all of this content right here. So, once I've done that, we can save this, but it wont really make any difference. If I hit Refresh, you'll notice that when we inspect and we have the main header div right here. You'll notice that it's not doing a very good job of wrapping, you know, it's not going right to the top of the browser and it's also not wrapping around the image. So, that means that when we put in some content below here, you'll notice that there is the content, which, really, it should be below the image. So, what I want to do now is make sure that I set the boundaries for the div with the ID of header and apply a few styles there. So, let's scroll on up and just before the main head selector, I'm gonna put in the header selector, and then we're gonna set the position to relative. So, the reason why I'm setting it to position relative is because the child element has the position of absolute. And, the child element will not respect the boundaries of a statically positioned element, which by default, your elements are positioned statically, not relative. That's one of the most common mistakes. So, now that I've set the position to relative, I can set the overflow to hidden and the child element will now respect the boundaries of the parent. And then also, I want to set the padding bottom to, let's say, 20 pixels. So, if I save that now, you'll notice what happens. When I hit Refresh, we have a padding of 20 pixels from the content and you can just start to shrink this in. And again, you may want to apply a few different settings. But overall, I'm very pleased with that. And, now the content is showing up below the main header image. So, now it's time to get on with the all important footer. So, let's go back into the header.php file, and let's get rid of that little bit of content I added in there for illustration purposes. And also, let's open up the footer.php file. And don't forget that the footer.php file is in the includes directory. So, the first thing I'm going to do is create a div with the ID of footer. And then, inside of there, let's just place some content so that we can actually see the development open up a little bit, and then I want to take a look at the styling again. So below all of this, code right here. Let's go ahead and target the footer ID. And then I want to set the background color. And let's set that to a nice grey color. And then, also, I want to a border top. And it's gonna be 1 pixel, solid. And again, it's gonna be a little bit of a darker gray, so I'm gonna go with ddd. And then, we also have the ability to set the width, which I always like to do with the footer, as there will be content above it. So, if I set the width to 100%, that way I know that there's gonna be no content to the left or right, and also I can say, clear and we want to clear both. So, that means that there must be no content to the left or to the right. So, this insures that we have everything working properly and you can also tell it to float to the left as well. Because if you have the child elements that are gonna be floating to the left, which in this case we are, cuz we're gonna have three columns. You need to make sure that the parent wraps around the chart elements that are floating as well. So, the way you do that is you make sure that, if you have child elements that typically float to the left but can float to the right as well, you also set the float on the parent. That avoids any CSS styling books. So, now we can go back over, simply hit Refresh, and you'll notice now that we do have that grey footer in there. It's very hard to see that one pixel border right there cuz it's right next to the image. But don't worry about that. What I want to do now is review the grid system that is inside of the Semantic UI. So, if we take a look at the Semantic documentation. Underneath Collections, you'll find Grid, and the grid by default is a 16-column grid. It's very easy to set up, all you need is a div element with a class of UI and also with a class of grid. And then inside of there, the child elements are the columns, and you can set how wide you want them to be, from 1 all the way up to 16. Now, this could be beneficial, but I want a three-column grid, and 16 doesn't divide into 3. So, this leaves me with a dilemma. But however, Semantic UI already has the answer for me. Because underneath Variations, you can take a look at specifying how many columns you want the grid to actually have. So, by default, it's 16. However, I can set a predetermined number, so for example, I can say ui two column grid. So, right here, all I need to do is put in two div elements with a class of column, and they will automatically fill up 50% of the grid system. Then also, I could change that to three columns. So, now, my grid system is just three columns, and then I can have three child div elements with the class of column and they will all sit together nicely. So, what I'm gonna do is take a look at the footer again and add in my grid. So, now I want to replace the existing content that is in the footer and I'm gonna create a div with the class of ui. Then also, we need the class of grid, so now we have a 16-column grid by default, but I'm gonna change that to a 3-column grid just by specifying the amount of columns I want and then also the class of column as well. So now, we can create three div elements with a class of column, and it will automatically separate and divide this grid up into three columns and just to prove it, let's put some content in here and go ahead and save it. Then, I can go over to the browser and hit Refresh, and we do have three columns. Although, unfortunately, it looks like it's just gone over a little bit. So, what I'm gonna have to do is take a look at the main CSS and with the footer, I'm gonna set the overflow to hidden. And when I do that, we'll get rid of the horizontal scroll bar. Now the only other thing is, we don't want any content touching the edges of the browser. So, what I'm going to do also, is add in a little bit of padding which, actually, now, I've already set the width to 100%, so this is gonna cause me a little bit of a headache. But, let's go ahead and do this, so I'm just going to set the padding to 0 for the top and the bottom, I'm not interested in that currently. And then I'm gonna set the 20 pixels padding to the left and to the right. Let's go ahead and save that, and of course, we're going to get those horizontal scroll bars again because we have some extra padding on there. So what I need to do is say, well if I'm adding in some padding onto the footer, I need to include it within the width. And the way you do that is you set the box-sizing CSS property. And we wanna set the value to border-box. And this will include the padding, and it will also include the border width, if you've set one in the width, right here. So, that will make sure that we don't go outside of the boundaries of the browser. And also, this CSS property right here, is in fact supported in Internet Explorer 8. So, I can go ahead and save that. Go back over to the browser, hit Refresh, and now indeed, we are including the padding, and also, if I had a border width on there, it would include that as well. A very, very useful CSS property to memorize. So, now that we've gone ahead and done that, I want to remove the content out of the columns of the footer. And then, let's just indent this guy right here. And, we're gonna take a loook at the first column. And, I want to add in a nice list that is going to show us the navigation. I always think it's important to include the navigation at the bottom of the page. And that saves the user having to scroll all the way up to the top. So let's review the Semantic documentation again. And if we scroll down, you'll be able to see under Views, we have List. So, you have the different types of list. So, you can have bulleted, you can have images and icons within your list. And, what I really want to do is take a look at the Content section right here. You can see that we can have links. And then also, you can have an icon placed at the side of them. Now, even though this is an arrow, we can obviously, change it to whatever icon we would like. So, let's review the code, and you can see here that we have a div for the class of ui list, and then we have an anchor inside of there, which has a class of items, so it's an item of the list. And then we have the i tag again, for our icon, which currently is just the right triangle icon. And then we have the text for the link. And, so now, I can go ahead and review my footer.php file. I can create a div with the class of UI, and then I'll say with the class of list. Inside of there, we're going to have an anchor. And, this one is gonna go to index.php, and then we're gonna have the class of items, and now it's an item of the list. Then, inside of there, we're gonna have the icon that I would like. So, the first thing I'm gonna do is that the class attribute, and then I would like to put in the icon that I would like. Which, in this instance, is the home icon, so I've put in those two classes and then below there, we put in the text for the link. And then we go ahead and repeat the process for the other pages. And then, we can go ahead and refresh the browser. Now, you can see right there that there's all my links, though we do need a little bit of styling here to make sure this looks right. And also, I just wanna take a look at the styling right here again with these icons, they don't look quite right so, let's go ahead and make sure that we fix that. So, what we can do is for the Macintosh, you tend find that the fonts are a bit bolder. So, what you can do is apply the webkit-font-smoothing property, and you can set it to antialiased. So, let's save this now, go off into the browser, and hit Refresh. And, now you'll notice that this is a lot clearer up here. And also, these fonts look clearer. Also, for Windows, you can sometimes get very bold fonts. So, I'm just going to set the font-weight to 200, and that actually helps quite a lot, and there we go. And so, now that we've done this, I just want to take a look at this text right here in these links because the text is the wrong color. And also, we don't want this underlining all the text decoration on the anchors. So, all I'm going to do is target the element with the ID of the footer and look inside of there for any anchors with the class of item, and then we want to set the text-decoration to none. And then also we want to set the font color. So, the font color, I'll just make this something like 666, something like that, and save it. Hit Refresh. All right, so, now you can see, this looks really nice and clean. And the next thing I want to do is take a look at my middle section and ideally, what I want to do is put in a nice, little paragraph. So, I'm just going to take a look at the footer.php file, and we wanna take a look at the second column. And then we're gonna add in a paragraph. And, we're just gonna put in some lorem ipsum, save it, and hit Refresh. And, this color is a little bit dark for me, so, what I'm going to do is take a look at the CSS, and with the footer, we're also going to set the color to the gray color 666. And you do need to set it specifically for the anchor, otherwise, it'll end up going purple again. So, if I hit Refresh, they're now both that nice, dark gray. And the next thing I wanna do is, sort of, put in a divider. So I, I'm adding a little bit of style to his text. So, let's take a look at the Semantic UI documentation. Open it up, and inside of there you'll see Divider. And with the divider, what you'll notice is you have all these different variations, and types, and if we scroll down, you'll be able to see that we have this nice icon divider. And if we take a look at the code, you can see we have a div with the classic ui horizontal icon divider. So, I'm just going to copy that out. And then inside of there, we have the icon which is a circular type of icon, but it doesn't have to be. And then you have what icon you want, and then of course, the icon class on the i tag. So with that information, let's go back to the footer, let's paste that div element in there with all those classes and then end the div. And then inside of there, we're gonna put in the icon tag. We're gonna say, class, and then I want this to be circular. I want it to be the chat icon to match the one in our header. And then of course, you need the icon class in there as well. Save it, go back, hit Refresh. And there is my circular chat, and it looks real nice. So, thank you for watching me in this lesson, and please join me in the next lesson where we'll continue on with our project.

Back to the top