Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have our content centered, we will begin positioning our container elements on the page. Now I am still working in the index_start.html and a layout.css file. So if you close them you need to open them back up again. And I am going to switch over to our layout file because we have some additional CSS to write. Remember from the previous movie, we had used a comment to separate different areas of our CSS syntax and we are going to keep doing that. So I am going to go down below the last one that I created which was Clear selector and I will do another single line comment, so that's /*, and I generally put a couple of lines in there so that it stretches across the screen, so as I am scrolling, it's really easy to find this. And we are just going to go ahead and call this position container elements and if you are ever typing in a comment yourself, be sure to end it with a */ so that the next time you be typing, it's uncommented out. We are going to position our elements in the order that we find them. So we will go Header, Content, Sidebar, and Footer. So I am just going to go ahead and type in #header, and we'll open up a curly brace and go down and again I am going to end that. We are going to go ahead and use a position relative on our header. This is actually again a very common technique but I want to talk a little bit about why we are doing this.
Occasionally, you are going to run into styles on other people's sheets or even in your own, and you might not understand exactly why this is done. Anytime you see a positioning attribute and usually a positioning attribute is going to be relative because that leaves the element within the normal document flow but when you see that and then you don't see it followed up with like a top or left positioning and it's not actually moving the element. What it's really doing is making sure that any nested elements use it as a reference point to position itself, and not any other parent element. So we are making sure that things within the header like the navigation for example, position relative to the header and not relative to the wrapper or relative to the body tag. So we are going down to the next line, and I am going to type in background, and you can use shorthand so you don't have to say background-color or anything like that and I am just going to give it a background color, so we will say #d52e36 and we will type in a Semicolon there. And the last thing I am going to do here is give it a fixed height, and I am going to give it a height of a 123 pixels.
Now, how do I know that? Well in my Photoshop mockup, when I measured the height of the header area it was exactly a 123 pixels. So I am getting that from the mockup. So I will go down to the next line and we are going to do a content selector. So #content, and I will open up the curly brace and go down to the next line. Now the contents in the sidebar need to position themselves in a two column layout and based on our earlier movies, we know that all we have to do to do that is do a float and I will float the content to the left because I want it to show up on the left-hand side. I am going to go ahead and assign a width to all my content, and I will give it a width of 630 pixels. Now this is coming directly from the width of the wrapper div tag. The wrapper div tag is 900 pixels. So I have made this one 630 pixels and that leave me just enough space for not only my sidebar but also a margin between them. So I will go down to the next line and we will do our sidebar and I will do a float:right on the sidebar because remember I want the sidebar to float to the right of the main content. And I will also assign it a width and the width I want for it is 250 pixels. So I was an Art Major, I am not really good at math but I do understand that 630+250 comes out to be 880. So that actually leaves me with 20 pixels between them for a margin when I factor in the wrapper sort of holding them to 900 pixels wide. So again when you start to calculate that just remember whatever your parent element, in this case the wrapper is in terms of width, you have got that much to work with and if you are dealing with percentages, you would still want to leave some of the percentage empty in the middle. So if were doing a wrapper div tag, there was a percentage based layout I might do, my content say give me 78% and for my sidebar give me 20% and that would still leave a good bit of gutter in between them. So I will go down and we will finish up the positioning container elements section by installing my footer, and for the footer I am going to choose a color for it. And the color I am going to choose for the footer is #fff. Now we have mentioned background colors before and a lot of people think the color element refers to the color of the actual selector itself. I actually think of it more like a foreground color. So this would the color beneath text that was going to be positioned inside of it.
Next, we will do a font selector, and notice that we are not saying font-family or font-size. So we are going to some shorthand here, and I am a big fan of doing shorthand notation for styles but when you use the font shorthand notation there is something you really need to be aware of. Font shorthand notation takes into account the size of your text, the line height, the font style, the font weight and the font family. And if you do not explicitly describe one of those features then the browser will apply the default. No matter what else is going around it. So remember, the whole thing about inherited styles. So if I apply that to a child element and I don't specifically tell it to be normal for example and if it's in a header then the text is going to be bold, because that's what a browser does with the header.
So you want to be really careful about that when you are stating it, and make sure that you have got that where you wanted. So I am going to go ahead and type in 0.8ems for my size, and for the font family. I am going to pass along to next. I don't see the font that I want to use. So I could type this in myself, but Dreamweaver makes this a lot easier for me. You can see that it populates the font list. But the font list that comes up actually allows me to edit that font list. So I can click Edit Font List and in addition to all of the preset font list that come up, I notice that I can Add some fonts in list below to create my own set of fonts. So I am going to do that now, and I am going to scroll down through all the fonts, and I am going to go into the Ts and I am going to find new Trebuchet MS and add that. Now you can leave it with one but that's not really a good idea. I want to give it multiples in case the client machine doesn't have this font. So I am going to move up and find Helvetica. It's another system font, and add that. Now you could keep going here, and eventually you might run into a machine that doesn't have any of these fonts. So you always wanted at the very end of this give it a default and if I scroll all the way down to the bottom, I see all of the defaults available to me and we have Cursive and Fantasy, which I am always tempted to use but always end up as Comic Sans. A Monospace, Sans-Serif, and Serif. So since both of the fonts that I have chose are San- Serif, I'll choose sans-serif add that and so to my Font list now at the very bottom of this, I am going to have Trebuchet and then Helvetica and then and Sans-Serif. Now it's at the very bottom of my font list now. If I am going to use that a lot and I am, I might actually want to move that up in the stacking order. As a matter of fact the two font families that I am going to use most frequently in the site are the Trebuchet and the Georgia. So I am going to go ahead and move both of those up the stacking order, and now every time I see my code hinting for my fonts, those two will be the first two that show up. So I will go ahead and click OK.
So now when I look at my font list, Trebuchet shows up at the very top of the list. Typing in T gives me that and hitting Enter goes ahead and adds that to my selector. So type in a semicolon and then we will hit Enter to go down to the next line, and we just have a few more items on our footer here. We are going to go ahead and give it a background color. And you can use shorthand for background and it doesn't fill in any of the other defaults. So I am just going to type in background and I will type in #000, which will be Black and we will give it a margin on the top, so that it pushes the sidebar content away from it a little bit, and we will just go ahead and give it a margin of 5em. So we are going to tie that to the actual size of our text. Now using ems and for margin and padding and that sorts of thing, it takes a look at the parent elements font size and it uses that. So remember at very top of the body tag we set that to 85%. So if we increase the size of the font or decrease the size of the font, we are going to increase and decrease its margin as well. So we will save the layout.css file. We will switch back to our index_start page, and whoa! Well, that doesn't look really good, does it? We are in Design View and I don't think we are really expecting to see this. So let's make sure this is not just a rendering error here in Dreamweaver. We will go ahead and preview that in a browser. So we will preview that in Firefox, and whoa, sure enough. So remember we made our footer that black color, and as we scroll down through here, we see that all is not well with our layout. Well, remember the concept of floating elements. We didn't clear this float so the footer is looking at the content div tag and looking at the sidebar div tag and they have both been removed from the document flow. So the footer does what the footer should do which is basically just come up to replace those two. So we will go ahead and leave Firefox and go back into our file and we will need to fix that. So we will switch over to Code View and we know that we can fix that by clearing the float. So I am going to scroll down to our code until we find our footer tag and we will find our footer right down there towards the bottom, and right there at the Line 70. So we already have a selector written to deal with this and if we look back at our CSS Styles panel, we can see that we have the #clear selector and if I click on that, we can see that its only property is Clear Both. So anything with the clear ID applied to it is going to clear any floats that it might encounter. So what we will do is right in front of the footer div tag, we will go ahead and put in another div tag and we will go ahead and give it an id of clear, and don't forget to close that. So this is going to be a totally empty div tag. It really is non-structural markup.
It doesn't really mean anything other then clearing out that float. So when you do a layout occasionally you will have to put non-semantic code in your file and if you leave that at one or two lines for your layout, that's really not that big of a deal. Especially if you compare that using hundreds of lines that we used to have to do when we used the table. So we will save that, and we will switch back to Design View just to make sure that that's looking a little better. Now if I scroll down, I can see that my footer is where it's supposed to be. So we will go ahead and preview that in a browser just to make sure that fix worked. Now we don't have a footer coming up underneath everybody and as I scroll down, we see that we have our two-column layout. Our footer is down there at the bottom. Now our footer could maybe use a little bit more styling but so could every element on the page. So all that remains of our layout really is just styling and positioning those nested elements and in our next movie, we will explore how using background graphics to enhance your design and look at maybe styling some of these interior elements.
Get unlimited access to all courses for just $25/month.Become a member
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.