Web Design Summary 4
Positioning Elements
Topic 1: Understanding the Box Model
All of the elements you create in your html document is placed in a box. Your document is simply an arrangment of these boxes. The three main elements of the box that you can adjust are border, padding, and margin. For the border, you can change the width, style, and color. Even if you do not want a color or outline, it is sometimes helpful to include one during the development of the page in order to see how the style attributes (e.g. margin and padding) are affected.
If you want to specify the margins on an element, instead of writing
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
you can simply write
{margin:5px 10px 12px 8px;}
Topic 2: Floating and Clearing
Another way to organize your web page is through floating and clearing. Floating an element is a way of moving it out of the normal flow of the document. Elements that follow a floated element will move up to sit next to the floated element if there is room. The clear property allows you to stop elements moving up next to a floated element. If, for example, you have two paragraphs and only want the first to sit next to the floated element, even though both would fit, you can “clear” the second one so it is positioned under the floated element.
Topic 3: The Position Property
The position property determines the reference point for the position- ing of each element box. There are four values for the position property: static, absolute, fixed, and relative. The 'static' property is the default. Relative puts the effected element a specific distance away from its relative position. For example you could define something to move 30 pixels right and 50 pixels down, relative to where it is when it's static. The absolute porperty sticks the effected element to wherever you defined it on the page. If you define something as absolute at 0 pixels left and 0 pixels down, it will be locked to the top left corner of your webpage. If you were to scroll down the element would go up along with the rest of the content. The fixed property is similar to the absolute property, though instead it is fixed to a position on the screen (the browser, to be specific.) No matter where you scroll, the element with the fixed position will be in the same location on the browser screen.