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'm going to do now is add the Background Colors for both the Wrapper DIV which contains everything on the page. And the Content DIV which contains my three column structure and my footer. So, in order to add background colors to these two DIVs, I need to go up to the CSS Properties area and I do have a Wrapper Rule already created. I also have a Content Rule already created.
So now, I just need to add the properties for those two options. So first of all, I'll set up my Wrapper Property. Now, my Wrapper Property needs a background color, and I've already determined what color that is. Now, if I just type the word Color, what that becomes is the text color, so what I want is a background color. That's something to be careful of. It's easy to be focused on the word color and accidentally add it as a text color, and your color won't show.
Now, I've already determined what that color is based on my graphic design. It's going to be 7DC1EB that was already created in my graphic design program, so that's the color I'm going to use. I've already set up my width. The other thing I'm going to add is a Padding Bottom. Just to make sure that I don't get extra padding down at the bottom of my page, I'm going to set that up to zero pixels. I don't want that DIV adding any aditional padding at all. So, my Wrapper layer is set up.
Let's save that. And take a look at it at this point. So, I'll go out to Firefox. And you can see my page does have all of that content within this blue area. And my Footer DIV now looks a little bit better. Because you can see that image within this area, I need to eliminate this word that I placed in there just so I could see the DIV. So, I'll do that and then it's a matter of adding my content area color.
So, I want this blue to extend up into these three columns. That's what I'll do next. Let me go get rid of that word Footer down in my code. And that's being created by this content here. I'll just get rid of that word. Now, I'll move back up to my Content DIV. And this one, I'm going to add a background color to as well. So, the color for my Content tab is going to dim in the same way I dimmed my laughter.
And I've already determined that colour is, well, it's CEE8F5. Now, in case you add a background color and it does not show up in your browser, usually that's an indication that the pound sign was forgotten. So just a side note on that, it's easy to forget that pound sign because you're trying to work on everything else. Now, I'm going to set a width to this area. The width I've pre-determined is going to be 826 pixels.
And the last piece I want is my margin needs a little bit of movement. So, I need to adjust the margin just a little bit within this content area in order to match my footer image. So, I'm going to do this in the same manner I did my padding down here. What this means is this top, right, bottom and left. Think of it like a clock. So, my top margin is going to be three pixels.
My right margin will be 12, my bottom margin will be 15, and my left margin will be 11. And the thing you need to watch when you're writing this out is make sure the number and the unit, the PX, does not have a space between them. If you put a space in there, this will not be honored. So, let me save this and let's take a look at our wrapper and content put together.
There's my page. You can see that my content area matches up with my footer on the right side. But it doesn't match up to my footer on the left side because my content area is a little bit too thin, it's too narrow. My entire third column has moved down on the page. Now, I could do a couple of things to adjust that. But basically, what happens when you're working in a float is, if there's not enough area over here for the content to fit, it moves the content down lower on the page. So, I'm going to need to do some adjustments here with this page. Now, one thing I can do, I was going to do this a little bit later. But I'll do it now since things won't fit, and that is get rid of this much space between these two.
So, my menu is just a little bit wide. Let me adjust that and see if that takes care of my other issues. Let me set this to 145 in width. I'm going to remove 15 pixels of width from my menu, that should give my right column15 more pixels space and there's my page. But that didn't seem to fix it either. So, my content area is clearly too small.
I can adjust that and just change the width of my content. Let me make it 830. Let me put this into Safari, and let's see if adding those four extra pixels worked for us. And it certainly looks like it did. You can see how our column pops right back up to the top as long as there's space for it.
Now, I have some fine tuning to be done down in the left footer area, on the lower portion of my content area. But I'll address that at another time. My right alignment is all set. So, that is how you can add background colors to different DIVs within your webpage in order to give your page a little bit of depth to match the graphic design.
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.