Week 11 – CSS pt. II

Tags Unique to CSS

<div> For large, self contained chunks of content,
Used to create Layers. A DIV will automatically place a line break before and after the beginning and ending tags.

<span> For smaller chunks of content, such as a single sentence within a paragraph
Each style specification must have a property (“font-size”), a value
(“8px”) and be attached to an anchor element (“p”)
p { font-size: 8pt}
Multiple values can be listed in the same style, if they are separated by a ;
p { font-size: 8pt; color=#009900}

Style can be specified on the page by :

 Class
Specifications that can be applied to any tag that can define that specific type of content
(type can be specified by <h1>, <p>, <span>, etc.)
.company {font-size:12pts; color: #CC3300}
<h1>Acme Inc..</h1>
<a href=”www.acme.com”>website<a>

 ID
A unique subset, within a larger specification
#fortune500 {color: #FF9933}
<h1 id=”fortune500″>IBM inc.</h1>

Units can allow the user to specific certain things, such as type font size or they can over rule the users settings:

Absolute: millimeters (mm), centimeters (cm), inches
(in), points (pt), picas (pc)

Relative: capital letter height (em), x-height (ex), pixels
(px) percentage of parent element (%)

Classes and Ids are a way to designate specific elements in your HTML. You can apply either a class or id or both to any element:

<div id="navigation">

<p class ="main" id="introduction">

There is one key difference between a classes and ids:

  • IDs can only be applied to one element per page
  • Classes can be applied to multiple elements per page

When naming classes and ids, it is good practice to name them logically and semantically. The names should not describe the physical attributes of the style you plan to apply to them, but the type of thing that they are in the structure of your page. For example, if you have a unordered list of links that will serve as your navigation, this:

<ul id = "navigation">

is better than this:

<ul id = "top">

The reason for this once again we want to separate the structure from the presentation. Naming your classes and ids logically means that if you radically change the color scheme or layout defined by your style sheet, the structure will still make sense.


LINKED STATES

You can specify a visual change to happen based on the users
interaction with the link:

a:link {color: #FF0000} = how the link text will appear
a:visited {color: #00FF00} = how the link will appear on a page when the user already has already viewed the page the link points to
a:hover {color: #FF00FF} = how the link will appear when the user holds their cursor on top of the link
a:active {color: #0000FF} = how the link will appear for the brief moment when the user clicks on it

NOTE: The link states should be specified in the order above or the changes to the links will not be visibly in all browsers or platforms


UNDERSTANDING THE BOX MODEL

In web designers we need to understand something called “the box model” — this mean we are using block-level elements with margins, padding, height, and width values to construct “boxes” in which to contain our material. It’s basically a series of boxes (and some even nested inside of others).

Last week we talked about margin, padding and border. This week the focus will be more on position.

Download this example to play around with the CSS and HTML. After downloading the example, this is what you should see on your browser without making any changes.

Look at the HTML, the two boxes that fall beneath the heading are two divs that make a column Left and a column Right. In order for these divs not to implicit a linebreak, lets use the float property.


FLOAT

Look at the stylesheet. Scroll down to line 39 and you’ll see we’re going to apply a powerful property to have these two divs push left to the elements that proceeds it. Take out the comment symbols and save the document. Refresh your browser.


CLEAR

Take a look at the HTML again, you’ll see that I have this empty div I classified as “makemeaboxagain”. This is a nice trick to apply in your document if there are some elements overlapping one another. This empty div guarantees that things will slide up against the edges of neighboring elements if a float has been applied. Look at the css.

 

INTRO TO CSS POSITIONING

You read about the various types of CSS positioning, now let’s look at some examples. We’re going to look a page with the same HTML and a number of alternate stylesheets attached. You can read more about alternate stylesheetshere.


Static and Relative POSITIONING

The static and relative position properties stack. Note that static is the default position value of an element, should you fail to apply any other value. If you have three statically positioned elements in your code, they will stack one on top of the next. Look at the example below with three elements, all with a position value of static:

#box_1 { 
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 { 
position: static;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 { 
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}

css positioning - static

This is what your HTML page would look like:

<!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>Untitled Document</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
</head>
<body>
<!– page content goes here inside the body –>

<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

<div id=”box_13″> 
</div>

 

</body>
</html>

This is what you style.css page would look like:

#box_1 { 
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 { 
position: static;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 { 
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}

Above is the static value for a simple, single-column layout where each element must sit on top of the next one. You cannot shift those elements around using offset properties such as top, right, bottom, and left. These properties are unavailable to a static element.

Relative Positioning

Relatively positioned elements behave just like statically positioned elements.  In the example below I’ve applied the relative value to the position element:

#box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 {
position: relative;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 {
position: relative;
width: 200px;
height: 200px;
background: #b7d84b;
}

Example B proves that relatively positioned elements behave exactly the same way as statically positioned elements. BUT, elements with a relative position value have far greater powers than their static siblings.

When positioning relative, you can adjust a relatively positioned element with offset properties: top, right, bottom, and left. Using the markup from my previous example, let’s add an offset position to #box_2:
#box_2 {
position: relative;
left: 200px;
width: 200px;
height: 200px;
background: #44accf;
}

By just adding the property: left: 200px, you see relative positioning in action. The three blocks are still stacked up but now the blue block (#box_2) is pushed out 200 pixels from the left. See what it looks like below:

The blue block is still in the flow of the document—elements are stacking one on top of the other—but notice the green block (#box_3) on the bottom. It’s sitting underneath the blue block, even though the blue block isn’t directly above it. When you use the offset property to shift a relatively positioned element, it doesn’t affect the element(s) that follow. The green box is still positioned as if the blue box were in its non-offset position.

For the next example, we won’t change any CSS, we’ll adjust our HTML to move #box_2 inside of #box_1:

<div id=”box_1″>
<div id=”box_2″></div>
</div>

 <div id=”box_3″></div>

 Note what I did:

The first example, each div is opened and then it is closed:

<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

<div id=”box_3″> 
</div> 

In this example, box_1 is opened, box_2 is opened, then you close box_1 and close box_2, and finally you open div box_3 and then you close the div. 

Below is what it will look like:

Because of the new coordinate system, the blue block measures its offset 200 pixels from the left of the red block (#box_1) instead of the document. This practice is more common with elements set to position: absolute.

POSITION ABSOLUTE

Now lets take a look at the position:absolute

Unlike the static and relative values, an absolutely positioned element is removed from the normal flow. You can put it anywhere and it won’t affect or be affected by any other element in the flow. Think of it as an element with a giant strip of velcro on its back. Just tell it where to stick and it sticks. Exactly like the relative value, absolutely positioned elements respond to offset properties for positioning. You can set an element to top: 100px and left: 200px; and that element will sit exactly 100px from the top and 200px from the left of the document. Look at an example using four elements:

#box_1 { 
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 { 
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 { 
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}

Now you see four boxes, each in a corner of the browser window. Since we set each box’s position value to absolute, we’ve essentially velcroed a box to each corner of our browser window. As you resize the browser, those boxes will stay in their respective corners. If you shrink the browser window so that the boxes overlap, you’ll notice that there is no interaction at all—that’s because they’re out of the document’s normal flow.
The html for the above photo is:

 

<!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>Untitled Document</title>

</head>
<body>
<!– page content goes here inside the body –>
<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

<div id=”box_3″> 
</div>

<div id=”box_4″> 
</div>
</body>
</html>

 The CSS is

#box_1 { 
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 { 
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 { 
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}

——–

Just like relative elements, absolute elements create a new coordinate system for child elements. Use two or all four offset properties, and you can stretch an element without defining any width or height—it’s bound only by its parent element or the document itself. Look at the following code:
#box_a { 
position: absolute; 
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; 
background: red; 
}


#box_b { 
position: absolute; 
top: 20px;
right: 20px; 
bottom: 20px; 
left: 20px; 
background: white;
}

What you get is a WHITE box with a RED border. See below:

Here’s another example where you create a two-column layout that fills the entire height of the document.

Here is the CSS:
#box_1 { 
position: absolute;
top: 0;
right: 20%; 
bottom: 0;
left: 0;
background: #ee3e64;
}

#box_2 { 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 80%; 
background: #b7d84b;
}

Here is the HTML that goes in between your BODY tag:

<div id=”box_1″> 
</div>

<div id=”box_2″> 
</div>

This is what you get:

Now try the following CSS code:

#box_1 { 
width: 200px; 
height: 200px; 
background: #ee3e64; 
#box_2 { 
position: absolute; 
left: 100px; 
width: 200px; 
height: 200px; 
background: #44accf; 
}
This is what you get:

Look at the blue block (#box_2). I used only one offset, left: 100px;. This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the left. If I applied a second offset to the top, we would see that our blue block (#box_2) is pulled to the top of the document.

CSS Positioning Tutorial

http://www.barelyfitz.com/screencast/html-training/css/positioning/


BROWSER TESTING

The quirks of the box model are just the tip of the iceberg as far as differences in how the browsers interpret your CSS and HTML. So its important that you test your pages in all the major browsers to ensure a consistent user experience.

For the purposes of this class, for all work that you do from this point on, I will require that your pages have a consistent appearance across the following browsers:

  • Safari (Mac)
  • Firefox (Mac and PC)
  • Internet Explorer 6 and 7 (PC)

In an ideal situation, you will be able to develop and test with access to both a Mac and PC. However, since life is rarely ideal, fortunately there is Browsershots, a free screen grabbing service that will capture screenshots of any URL you feed in for selected browsers.


HOMEWORK | WEEK 11

  1. Using the positioning models we learned today, create pages with layouts as close to the following examples as possible. Use only HTML and CSS to create these layouts (no images!)
  2. Use the positioning scheme (or a combination) of your choice to layout your resume, artist statement and contact page. Create additional divs or spans, or apply classes and ids, as necessary.
  3. Upload, validate, and browser test all your new HTML and CSS before class next week