tags and positioning with CSS

Sample of the pdf document : 

I’ve posted a number of links to really helpful CSS tutorials under the InterestingLinks section of the class wiki. You’d be well served by having a look when you get the chance.

• Also: Here’s a 1 page overview of the CSS box model (which determines how all CSS elements are laid out) that will help you understand positioning: http://student.ttuhsc.edu/RBoettger/lesson1.html

• This is NOT an exhaustive overview of CSS positioning techniques, but it will get you started. The best way to learn is to play

• By now, you’ve realized that we can’t just position elements (what’s an element? Well, basically, it’s a tag, or anything that shows up on a web page) anywhere we like on html pages. And you’ve listened to me say time and again that we should not be using tables to do element layout because they’re not really for element layout (what are they for? Tabular data!). That’s where <div> tags start to come in.

• What is a <div> tag? To begin with, it’s short for division. A <div> is a generic block element. What does that mean? Well, a block element is any element on an html page that starts on its own line. You see them all the time: <p>, <h1>, <table>, and <ol> are all examples of block level elements. These are in contrast to inline elements, which typically do not appear on a new line—the <strong>, <a>, and <em> tags are all
examples of inline tags

• You can think of the <div> tag as an invisible box: it’s designed to hold any other element but doesn’t have a default look of its own. In class we’ve discussed how tags will default to a certain “look” within a browser. While we can give a <div> tag a look, its default is to appear as nothing. So, if you were to include the following tags in the Dreamweaver code space—<div></div>—you’d see nothing, but if you added content to those tags in the Dreamweaver code space—<div>1</div>—you’d see the number 1. We could then use additional CSS styling (as we’ve been doing) to style the <div> tag.

• So, we can’t use tables and we can use <div> tags. There are 4 types of positioning
(remember, that means positioning elements anywhere on an html page) that we can use
for CSS:

    o Static positioning: “A web browser takes an HTML file, parses it into its elements, applies style from asty....

   Click here for  Download PDF / FREE