-
-
-
-
-
-
Don't forget about float clearing.
CSS:
.clearing {/** to clear floats after they are not needed **/
clear:both;
height:1px;
width:100%;}
HTML:
<br class="clearing" /> <!--apply to <br> <p> <hr> or <div> to clear floats -->
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com| -
-
You need to be in code view for the following:
In the head of your document just before the closing </head> tag. copy and paste the following style rules:
<style type="text/css">
/* floats an image right, so text wraps around it */
.imgright {
float: right;
padding: 2px;
margin-left: 10px;
}/* floats an image left, so text wraps around it */
.imgleft {
float: left;
padding: 2px;
margin-right: 10px;
}
</style>In Design View, select your image. Look at the tag selector above the Property Inspector and you'll see the <img> tag.
Right click on the tag and select "Class". You should see two classes. imgright and imgleft.
Select imgright. This floats the image to the right. If you want to have the image on the left, choose the .imgleft class.
The HTML will look like this when the class has been applied to the image.
<img src="79267-org.jpg" alt="" width="113" height="91" class="imgright" />
You can use this as many times as you like on a page because we are using a class rule not an ID (#) which can only be used once per page.
Example can be see here
| -
Hey Nancy,
but you don't have to clear an image every time though.
I know, Nadia. Most times this is perfectly fine. But telling people about floats without showing them how to clear them is like handing someone a slice of bread and calling it a sandwich. Something's been left out.
To illustrate what clearing does, look at the following screen shots.
#1 - No float clearing.
"Float right" text moves up and wraps around the "float left" image.
#2 - With Float Clearing
"Float right" text remains below "float left" image.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com| -
-
-
-
-
-
I wanted to wrap text arond an FLV player. I floated the player left, and the text wrapped as hoped, except that I wanted it to wrap over the top too, with the player embedded in the text. But when I would move the player down, it left a blank zone over the top-- the text would not fall in over the top, leaving a nice big white area. Nothing semed to work-- tweaking posiitonong, margins, clearing floats, nothing. THen I remembered the advice here about inserting the image in the text close to where you want to position it. SO I went into Code View and put the cursor right in the middle of a paragraph, and pasted-in the FLV player. That worked!
So I thought I'd post this in case (1) it would help anyone else, or (2) what I did was completely wrong even tho it worked, and someone more knowledgeable than me can tell me how a real webmaster would do it!
(DW CS6)|
- 10 points awarded for Correct Answers
- 5 points awarded for
-
10,000+ points
-
1,001-10,000 points
-
501-1,000 points
-
5-500 points
-
