Lesson 9 - Positioning
Layout and Positioning
Now that you are familiar with the <div> tag we can use it to define our page layout. In the past, tables were used for defining the layout but that was cumbersome because it often required nested tables which ended up creating lots of tags making it easy to get lost in them. Tables are great for displaying tables of information and should be used for that.
In order to use <div> tags effectively we must understand how to position them. When a browser renders a page, normally, each tag is positioned in the order that it is read, from top to bottom. To alter this order the position property may be set. There are five possible values:
- Absolute: The tag is placed at an absolute location, relative to the first parent element that has a position other than static. The element's position is specified with the 'left', 'top', 'right', and 'bottom' properties. (See the image below).
- Relative: The tag is placed relative to its normal position in the html. Setting the left property will add that value to its left position.
- Static: The tag follows the normal top-down flow of HTML. This is the default behavior. (Ignores any top, left, right, bottom, and Z-index properties)
- Fixed: The tag is fixed to an absolute position relative to the browser window. When the page is scrolled the tag stays in that position and does not move. The element's position is specified with the 'left', 'top', 'right', and 'bottom' properties.
- inherit: The value of the position property should be inherited from the parent element.
Below, there are two <p> tags that are defined as AP Elements. They look like they would be in the same location since the position values are the same. The difference is that the first <p> tag is is located inside the <div> tag thereby making its position relative to the <div> tag even though its position is set to absolute.
The "Sub Info" position is set to relative. Notice, that it is located just below the rest of the paragraph. If a value of -10px had been used the position would be higher than the paragraph, like a superscript.
Note from DW Help: When the Invisible Elements option is turned on, the elements on your page may appear to shift position. However, invisible elements don't appear in browsers, so when you view your page in a browser, all the visible elements appear in the correct positions.
You can use the Ruler and Grid to lay out your pages and position your AP Elements. To view the rulers go to the View Menu - View>Rulers. Rulers can be set to pixels, inches, or centimeters. To view the grid go to the View Menu - View>Grid. You will see Show Grid, Snap to Grid, and Grid Settings...from the options on the Show Grid menu.
Note from DW Help: Use rulers and grids as visual guides for drawing, positioning, or resizing elements in the Document window's Design view. You can make page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.
Float and Clear
Tags that do not have their position property set to absolute, relative, or fixed may use the float and clear properties to control their positions. The float property functions like the align attribute of the image tag and allows relative positioning of a block element. Float sets which side other elements, such as text, divs, tables and so on, will float around an element. The float property is supported by both browsers and in this section I will show you how to assign the float property to a <div> tag that contains an image. We will need to accomplish two tasks -- create a CSS Style that specifies how other objects will float around our <div> tag, and then assign that style to our <div> tag.
"The basics necessary to mark off a column of text 150 pixels wide to float to the right of its parent element (by default to the full-page <body> element) would be to create a CSS class - <style> .rightcolumn {float:right; width:100px} </style> - and then apply it to any arbitrary block of content - <div class="rightcolumn">. column text . </div>." - Tom Arah in The Future of Web Layout
Start by creating a <div> tag and creating and ID as imgDiv.
Click on New CSS Style to create a new rule.
If you click OK to save or have already created the <div> tag then to bring up the select the <div> tag and right click to bring up the new CSS rule popup: Right click (Control click on Mac) > CSS Styles> New...
The New CSS Rules popup will come up. If the Advanced button is not selected then select it. The <div> tag ID will be in the Selector drop-down menu. Make sure to define it in this document only.
After clicking OK, the CSS Rule definition for #imgDiv will come up. Select Box from the Category column and click on the Float option menu and select right. Fill in some of the other options for Width, Height, Padding and Margin.
Click OK, and look at your CSS Styles panel -- you will see the properties you just selected in the Properties window. Remember, these properties can be edited right in the Properties window. View your document and then change some of the properties to see a live update.
You can always use the Tag Selector at the bottom left of the Document Window's Status Bar to select a <div> tag.
After the <div> tag has its properties set a <p> tag is added and will fill in the area to the left of the <div> tag. I added another <div> tag to contain the floated <div> tag and the <p> tag and set its width property to 300 pixels just to demonstrate how the paragraph fills in the area to the left of the <div> tag.
Next, I am going to add another paragraph but this time I am going to set its clear property so that it will not flow next to the left of the floated image. I will select the both option. The same procedure is followed that was used to create the float. Instead of filling in the float property the clear property is filled in and set to both.
The second paragraph has its clear property set to both so it will appear below the image. If any tags were floated to the left or the right then the tag that has clear set to both will not appear until both the left and right sides are clear of the floated tags.
- Both: Tag appears when both its left and right sides are clear of the floated tags.
- None: Tag flows around tags set to float. This is the default.
- Left: Tag appears when the left side is clear of the floated tag.
- Right: Tag appears when the right side is clear of the floated tag.
Below is the code view. The div containing the image is set to float right and the last paragraph is set to clear both.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>No Smoking</title>
<style type="text/css">
<!--
#imgDiv {
float:right;
padding: 0 0 20px 20px;
color: #03F;
}
#idP {
clear:both;
}
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: medium;
}
-->
</style>
</head>
<body>
<div style="width:300px; text-align: justify; padding-left:20px;">
<div id="imgDiv">
<img src="images/NoSmoking.jpg" width="98" height="122" alt="No Smoking" />
<br />Float Right
</div>
<p>If you are considering lighting up, think again. There is no smoking on this
campus except in the parking lots. </p>
<p id="idP">This notice provided by the DW class of 2009.
(<span style="color:#03F;">Clear Both</span>)</p>
</div>
</body>
</html>
Go here to see this example.
Display and Visibility
The display and visibility properties are also used for layout. Both may be used to hide an element but each has a different effect on the layout. The display property when set to none will hide the element and free up the space it occupied when it was visible. Setting the visibility property to hidden will hide it but will retain the space that it occupies. Below, the properties are shown as they would be set in CSS.
h1.hidden {display:none}
h1.hidden {visibility:hidden}
The display property has additional values besides none. Two of the more common ones are block and inline.
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements:
- <h1>
- <p>
- <div>
An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements:
- <span>
- <a>
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.
The following example displays list items as inline elements:
In CSS:
li {display:inline}
In HTML:
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
<li><a href="/xml/default.asp" target="_blank">XML</a></li>
</ul>
When rendered each list item is displayed on one line.
The following example displays span elements as block elements:
In CSS:
span {display:block}
In HTML:
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
When rendered each span element is displayed on it's own line.
Note: Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.
Visit w3schools to learn more and experiment with these properties interactively.
Examples
References and Resources
- Dreamweaver CS3 The Missing Manual by David Sawyer McFarland.
- For more on float visit the Max Design Floattutorial.
- For a more detailed description of positioning revisit the CSS lesson on Positioning.
- w3schools - CSS Display
* click the link below to continue with this lesson *
Behaviors