Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
For this movie, I'm going to talk about simple floating, as opposed to the more complex floating. Actually, what I mean by simple floating is just the act of taking an image and putting it over to one side and letting a regular text just flow around it. It's a very common effect and I'm sure you've seen it on the web many a time, you've see in print many a time so here's how it's done. If you take a look here in the legendary origins of tea portion, there's an image of a tea kettle, which is been there throughout, but at this point, it actually needs a little help. This is the way that an image would appear if it didn't have some floating applied to it and in this case, I've put little square brackets and hyphens on either side of it, so that when it actually does float we can see the point in the text where it was before we floated it.
So we go over to our Exercise file and just very simply, so if we want it to go to the left, we're going to float it to the left and go back to the web browser and hit Reload, there you go, has floated to the left and you can see the little tie fighter shaped character sequence. They are right near the image, actually with the little square brackets and hyphens.
The image is still, I mean in the document source, the IMG element is still right there, but in terms of layout it's been floated to the side and the term float comes from actually the original description of this capability when it was added to Netscape 1.1, way, way back in the day, that you're able to float an image in which it floats to one side. That's just literally how it was described. You can float left or you can float right, either one, you can't float center, sorry, really your only choices for floating are left, right or none.
None is the default, of course. Things don't float by default. So it's been moved over to the left. Of course it's a little bit crowded here. The text is right up against that image, which is just typically the way it is. There's no reason for the text to avoid the image at this point, any more than it absolutely has to. But this, you'll notice that the text is of course flowing around at the best it can. So we'll push the text away from the image by adding a margin to it. So let's see, margin, we can use pixels here, we can give it a top margin of 10 pixels and the right margin of 10 pixels, bottom margin of 10 pixels and well, let's go all the way around.
So that we'll put 10 pixels of margin on each side. And if we hit Reload, you can see that the images push the text away from itself. That's the margin actually. The margin has been applied directly to the image, is part of the floated image and so the text can't overlap the margin. That's why it's pushed away from the image a bit, but notice too, that the image itself, because of that 10 pixels left margin has pushed itself inward a little bit and its left edge is no longer lined up with the, the left edge of all the rest of the text. So if we go back and we make that left margin zero, then taking that away means that the image won't be pushed inward anymore, it will float left as far as it can and stop, but the top, right and bottom margins are still keeping text away from the visible portion of the image. We can decide that we want less top margin and more right margin or it could be em based, which is actually one of my usual favorite things to do, it will become very familiar before we're all done here. If we hit Reload, that's a little different in terms of placement, but with the em based margins, that means that because 1em is equal to the font size of the element and images do have font sizes, it's just that typically we don't see anything as a result. If the font size of the page were change by the user, then the margins would scale along with it, so that's really one of those things that's an interesting question, if you have an image do you want to give it pixel based margins because image is after all pixel based in terms of how tall and wide it is, or do you want to make it em based because the image is almost certainly surrounded by text and the em based margins can scale along with changes in the text size. There's no right answer per say. It's really more a question of what sort of design effects do you want, what's your personal preference, those sort of things, but you do have the option. So that's simple floating, is basically just take something, you move it to the right, or you move it to the left as we did and let other content flow around as we're going to see in the next couple of movies, though floats can be used for more than just having images that text flows around, you can also use it for laying out a document.
There are currently no FAQs about CSS Web Site Design.
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.