Lesson Info
15. Understanding Floats and Clearing
Lessons
Class Introduction
02:51 2Dreamweaver Project Overview
09:33 3Designing Web Page Comps in Photoshop
14:33 4Save Images for Web
19:55 5Getting Started in Dreamweaver
05:47 6What is HTML
17:42 7What is CSS
05:27 8Prepare to Create a Web Page
07:00Add HTML5 Sections to a Web Page
16:06 10Add and Explain CSS
05:21 11The CSS Designer
19:40 12How to insert a CSS Reset
07:18 13Styling Web Page Elements with CSS
08:31 14Styling with Fonts
10:28 15Understanding Floats and Clearing
05:40 16Creating Navigation and Inserting Responsive Images
23:01 17Styling Navigation Links
14:07 18Add Social Media Buttons
10:29 19Media Queries in our Simple Page
13:29 20Creating a Bootstrap Webpage
10:16 21Creating a Bootstrap Navigation Bar
10:29 22How to add Custom CSS to the Bootstrap Framework
03:42 23How to Create a Bootstrap Header Section
15:24 24Create Custom Media Queries in the Bootstrap Framework
05:48 25How to Create and Edit an About Us and Main Section
27:51 26How to add a Jumbotron Model using Bootstrap
13:35Lesson Info
Understanding Floats and Clearing
- [Melissa] We added 15 pixels of padding on h1s, h2s, and paragraphs. And we can see that happening in there, but you'll notice that there's a little bit of text at the top in the nav, and there's a little bit of text in the header section that it's not doing that because it's not in the paragraph. So that's why that's not happening in the footer as well. So that text has not been formatted and that's okay because we're going to take care of all that stuff now. So I'm going to jump back into Dreamweaver. The first thing I want to do actually is I want to talk about floating and clearing. So that aside, the area that says this is a header, that's supposed to be on the left side. So we want it to be on the left side. So we need to create some CSS to make that happen, and I'm going to go ahead and I'm going to do that in my aside. So in my CSS Designer, I'm going to click on aside to select it. I have my properties on the right. Inside of my properties, I'm going to set the width, this i...
s a responsive page. I'm going to use a percentage. I'm going to set my width to 40%. So I click on % and I'm going to type in 40. Yes, %. So I've got 40%, and I can see now it is actually 40%. So if the left is 40%, I want the main part to be 60%, and I actually don't have any CSS for the main. So under Selectors, I'm going to click New Selector. It's trying to help me. That's great. I don't need the container. I just need the main part. I'm going to take that main and say width should be 60%. Okay, great. Definitely not what we wanted it to look like. I'm going to close up this Properties panel so we have a little more room. That's not what I want it to look like. I want the left to be on the left and I want the main to be on the right. So what I'm going to do is I'm going to use this thing called float left, and I'm going to do that on the aside. I've got the aside selector inside of my Properties panel. I'm going to come down towards the bottom of the layout section, and I have these things called floats. And it's giving you like a little icon to try and help you out: float left, float right, none. I want to float left. So I'm going to click on float left. And my text wraps around all of that. We're getting somewhere. If we're going to float the aside to the left, let's go ahead and float the main to the right. So I've chosen main and I'm going to hit float right. It's getting there but now something funky's happened with the footer. What the heck is going on there? That is definitely not what I want to happen. So what we need to do, it is actually behaving exactly the way I told it to. Any time something floats to the left, everything else wraps around that thing which is exactly what's happening. It's exactly what I told it to do, exactly what I don't want. So what I want is I need to tell that footer, "Hey, you need to clear the float." So if there's anything floating around you, make sure you clear it. Don't show up until the floated things are done rendering and then you show up. So that's going to go on my footer. So I come down to my footer and underneath float, I have clear. I can clear left, clear right, clear both, clear none. I'm going to clear both because I might change my mind and put that aside on the other side someday. So just to cover my butt, I'm clearing both. And look at that. That's what I wanted. So I'm going to save this. I'm going to Save All actually. File, Save All. I'm going to give Dreamweaver one more opportunity to redeem itself. Oh yes. It did. It needed food. It was grumpy. So now my aside is on the side and my main is where it belongs and my footer shows up underneath. Everybody's happy. - [Female] So I noticed on the aside the text is butting right up at the bottom and because it's different color. So you need to add padding to that or...? - We could add padding. Either way. That's a good question. I could add padding to the text in the aside. I could add padding on the inside of the aside itself. So I can add padding or margin to the paragraph text in the aside, or I can add padding on the inside of the aside. However, I'm not going to do either one of those because my goal, once we start getting images in, I want it to visually look like it's going all the way down the page. There's no way to actually...there is but it's a whole other story. They claim that there's JavaScript that makes it work but I can never make it work so we're not going to go there.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
lovemydreams
Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!
Kathleen
I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.
Linda Knapp
She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.
Student Work
Related Classes
Web Design