TTh, CLA 4-27
1:00 PM -2:50 PM
CRN 71857
Every element in the XHTML page produces a box, which is only visible if you have the background or borders turned on
This class, called boxmodelexample, is defined as:
.boxmodelexample {
border-style:ridge;
background:#f4dc7d; /* defines color */
padding:10px;
margin:1em; }
Determines the reference point for position of the element box.
When you move an element using properties of top, right, bottom, you are positioning the element relative to some other element, and the other element is known as the positioning content.
In a page layout with columns, typically the main column is not the left-most column. The left-most column contains navigational links and the main content column sits next to it. CSS div tags can define the size and positioning of these columns.
To make things easier for the disabled viewer, it is better to have the content of the main column in the upper part of the HTML document above the content for the left-side navigation, so the user does not have to read through the navigation hyperlinks.
To solve this layout problem you can define div containers for different content areas of the page and position them using div position properties
The Float property lets you move an element out of its normal document flow, so that it can sit next to another element. This accomplishes the same purpose as layout tables.
img {
margin:10px;
float:left;
}
The float property lets text flow around images, similar to the HTML property align.
This image style reads img {margin:10px; float:left;}
It puts a 10 pixel margin around all 4 sides of the image, and floats it on the left side of the column. If the float is not cleared by a Clear Property then the paragraph will wrap around the bottom of the image. If you want the image and the text to be in their own columns, you need to clear the float.
Without clearing the float, each insertion of an image and some associated text wraps like this:
.clearflo {clear:both;}
The first book is about Dreamweaver 4 -- really out of date stuff
The second book is about Dreamweaver MX, also out of date.
The third book is the usability text for this class-- not out of date.
To create CSS layout in which the images are in one column and the associated text in a column next to it (just like table layout), add in a style that clears the float.
To do that, put the content of each image/text pair inside a clearfloats class that clears the float.
The first book is about Dreamweaver 4 -- really out of date stuff -- interesting how the image extends beyond the lower margin of the block. In this case the float has not been cleared.
