Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.
Now to make a clear float I'm going to create a class that is called clear float. Let's go over to the CSS panels and click on New CSS Style. Make sure that you have your Selector Type selected as Class and in here I'm going to type the words clearfloat, then select OK. What you are doing in a clearfloat is essentially creating a no space, kind of like an invisible space, that tells the webpage to go on and start the flow of the content again. But you don't want it to have any height or width or depth or be able to hold any content.
So you're going to see a rather unusual style that I create. I am going to select the Type category first and the font-size is going to be 1. The line-height though is going to be 0. Then I'll go into the Box category and give it a height of 0. And as you can see, what I'm doing is I'm flattening out all the vertical space of this box, or this tag that's making it just to have no space at all. But the important thing here is that you need to set the Clear. The Clear will restart the flow of the documents. So that it goes down vertically as it was going before we used the float.
We wanted just to go stack, stack, stack, stack, stack like stacking boxes. So, be sure you do Clear both and then go ahead and click OK. How do I apply this clearfloat? The easiest way to do this is just to simply put a break at the end of your content area. So, in Split View, on the Code side, I want you to locate the Close div tag for content, because that's where the float occurs. It's in the content and the sidebar divs. So, I'm going to come down here at the end and again, these comments really help me find where these divs begin and end.
I'm going to put my I-beam after all of the main content, then hit my Return key, and I'm going to type a break in here, like a line break. So, I'm going to do caret on the left br, forwards slash, caret. Now, because I've created a clearfloat class that has no real height, I'm going to attach it to this break right here. So, what I'm going to do is come right in here to the break area, insert my I-beam right after that tag for the break.
Hit the Spacebar and I'm going to type Class. Again, I get my code hints right away, class is what I want and it's highlighted blue. So, if I hit my Enter key, it will tell me what to do next. It says, you're trying to create a class, and you need to put it between these two quotation marks. The class that I want is clearfloat, so I can just select the clearfloat with my cursor and then hit my Enter key. Now, if I hit Refresh and go back into Design view, you'll see that that space that we were seeing there before has closed up, because the flow has been restarted by vertically stacking box on top of box.
Let's do a File > Save All, and make sure that is in fact, occurring when we go out to the browser. So let's scroll down to the bottom. Yay! It works. We have done a great job. We have got our document reflowing after the float and now our image at the bottom is budding right up against our wrapper. This is exactly what we want. Now the good thing about doing it this way is that we could add any amount of content that we want to into the wrapper and the images at the top and bottom would maintain their position.
So, this allows us to have a flexible amount of content. It could be shorter or it could be longer and it will not change the way our layout works. This is a great way to work and it takes a little more time and effort, but by doing this you have a flexible document that can expand and grow with whatever content that you need to put inside it. Let's close out of Firefox and return back to Dreamweaver. And I think we are ready for that last critical look and seeing what we can do to just give it all those pro touches.
There are currently no FAQs about Creating an Online Resume: Hands-On Training.
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.