Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.
What I want to talk about now is how to handle the lower area of this web page, and create the look of this curved image with a drop shadow on our webpage. And the way I'm going to do that, is I'm going to set up this lower curved image as a background image to a footer div. So add a footer div to the bottom of my page.
And I'm not going to attach that image as a regular image on the page using the Image tag. I'm going to set it up as a background image. That way, if I decide to add any copyright information down here or any other text in the future, I can add that text on top of my background image. So, the first thing we're going to do is add a new div for our footer, and then we will assign that footer a background image property.
So let's go a head and move over to the webpage to do that. So the first thing I need to do is add a div tag for my footer. So my content area is going to store a new div for my footer. So, I'll type out my div tag, the ID will be footer (audio playing) And let me move that cursor, so you can see what I'm doing. And I'll do my closing div tag. And I think it makes it a little bit easier to see where this is. To put a word inside here.
So I'm just going to say footer, so you can see where it's located once I'm done. So there is my div called footer, and that's located within my content area. Because that's going to have the same width as my entire content area. So that's all set. Let's take a look at this in the browser before I move up to the CSS rules area, and let's see where that footer is located.
And you can see my footer word is way down here in my browser window. So, my footer is underneath all three columns, which is right where I want it to be. Now, what I'm going to do, is assign that footer, my background image property, and I have that image all set up, in the files, as footer. Then you can see right here? That footer image has a little drop shadow on it. So how do I assign a background image to this area of the page.
I go up to the CSS and I'm going to create a footer ID. Now, that is going to go underneath all of my other ID's on the page because it's the very last div on the page. So here is my footer, and what is going to contain, let me get this even with everything else, that is going to contain a few properties. The first property I want to add, is a background-image.
An this rule looks a little bit funny, and that's why I let the program do it. Within this URL area, I need to put the path to the image. An the image is inside my images folder, and it's the footer image. So I'll type images, forward slash, footer.jpg. So there's the background image for my footer. Now I only want this to display once, I don't want it to repeat at all.
So what I'm going to do is prevent it from repeating using CSS and it's going to say background repeat, no repeat. That will make sure that this footer image only shows one time on the page. I'll go ahead and save this. Let me go out and preview this. And this time, I was using the default browser. Which happens to be Firefox automatically.
Because, that's the default browser, on my system. Now you can see, this looks very strange. Because all of a sudden. My footer is up against the header. It is not staying down where it belongs here, where my text is located. And any time you use floats on content in your page, this will occur. Any content that follows a float, will tend to pop-up to the previous content that doesn't have a float.
What I mean by that, is my header image here, is just sitting on the page, it does not have any type of float property. What a float does is remove the content from the normal flow of the page. So these three columns have been removed from the normal flow of the page. That is why my footer doesn't understand these three columns exist. What it does know exists is my header, so my footer pulls up against my header. Now this situation can be very confusing if you don't understand how to get rid of that float property and get back to the normal flow of the page. So my footer stays below these three columns.
And you do that using a clear. And what a clear does is put the page back, it's almost like a Reset button for your page. So what I'm going to do on my footer is also add a clear. (audio playing) Now, within my clear, there are three options. I can clear left, clear right, or clear both. Meaning both left and right. How do I determine what to use? Well, all of my floats are floated left. So I only need to clear left.
If I had both left and right floats on the page for those three columns I would need to clear both. So, I'm going to clear left on my footer. What that does is hit the Reset button for the page. I'll go ahead and save it. And when I go out to Firefox, I'll use this option. You can see now my footer is sitting down where it's suppose to be. My footer isn't quite tall enough to see the entire image but I can modify that very easily by adding a height to my footer.
So I'll add the height property to my footer and you can see, I still need to deal with the content area up here in adding colors, but because I've set up my footer my colors will drop in much easier. So, if you apply a float to any content on your page, the next div following those floats or that single float, should have a clear, otherwise it's not going to understand that those float content areas exist.
And you'll have some strange things happen on your page, just like we did. So let me add one last type property. I tend to avoid height unless I absolutely need this and I'm going to add a height of 55 pixels. I'll save this, preview it in the browser. And now my footer should be pretty well set. You can see it does include my entire image.
So that is how you can get your footer to stay at the bottom of your page. Especially if you have used clears prior to the footer div. So if you've used Clears on any divs, before the footer div. You will need to clear those in order to get it to honor the height of that content. So we just set up, our footer div for our webpage.
There are currently no FAQs about Exploring CSS Positioning.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.