Class 3 – A Tip When Working With Design Comps

As you work on the in-class assignment today, you will find that you constantly need to compare your work in XHTML and CSS with the original design composition (called a “comp”) to make sure the widths, heights, and styles of each of the elements matches those in the design comp.

There are several ways to do this.  One easy way to do this is to apply the original design comp as a background image to the container div.  That way, as you are working, you will constantly have the original design comp as a backdrop to your page.

Here is an example of applying the design comp as a background-image to the container div.

You will want to check out both the XHTML and the CSS files.

Class 4 – CSS Positioning

The CSS “position” property has three possible values: “static”, “relative”, and “absolute”.

Static is the default value used by the browser if none other is specified in the CSS.  Statically positioned elements are often referred to as “unpositioned” since no special positioning has been applied to them.  Here is an example of a simple page with two boxes, with no special positioning applied:

Example of static positioning

Relative positioning is used to shift any elements position relative to where it would normally be if it had the default static positioning.  If, for example, we wanted to shift an element over 10 pixels to the right from where it would normally sit on the page, we could give it relative positioning and set the “left” CSS property to be 10px or so.  This would shift it 10 pixels to the right.

Here is an example of an element with relative positioning.  You can see that the yellow box is shifted a few pixels up higher on the page than where it would normally sit.

Example of relative positioning

Absolute positioning allows us to set any element’s position relative to the absolute top-left corner of the browser window.  So if you always wanted an element to sit 20 pixels down, and 30 pixels to the right of the top-left of the browser window, we could give it absolute positioning, and set its “top” property to be “20px”, and its “left” property to “30px”.  This would shift it that exact position relative to the top left of the browser window.

Here is an example of an element with absolute positioning.  Notice that if you resize the window, the red box (the parent element) stays in the center, but the yellow box (the child element) never moves out of position.  Its position is always fixed relative to the top-left of the browser window.

Example of absolute positioning

There is one important special case in which absolute positioning is not relative to the top-left of the browser window.  This is when the absolutely positioned element is a child of another positioned parent element.  The parent element can be either absolutely or relatively positioned… it doesn’t matter so long as it has its position set to something other than “static”.  In these cases, the absolutely positioned child element will be positioned relative to the top-left corner of its parent element, not the browser window.

Here is an example of an absolutely positioned child element within a relatively positioned parent element.

Example of an absolutely positioned element within a relatively positioned element

For each of these examples, the basic XHTML structure of the page is identical.  It is only the CSS position properties (“position”, “top”, and “left”) which make these pages behave differently.

Class 2 – Homework Solution

Your homework assignment in classs #2 was to convert the wireframes we came up with for our Actor’s home page into valid XHTML & CSS code.

Here is my solution to that problem.  You’ll see, if you copy the files from my server account, that there is one XHTML file, one CSS file, and two images that go along with this solution.

The files required for this solution are:

wires.html - the XHTML file
styles/wires.css - the CSS file
images/pixel.png - a placeholder for any images on the page
images/wires.png - a screenshot of the entire information architecture diagram

Here are the contents of the XHTML file, wires.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Artist Home Page</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!-- put a any CSS style sheet or JavaScript code here -->
	<link rel="stylesheet" type="text/css" href="styles/wires.css" />
  </head>
  <body>

		<div id="container">
			<div id="headshot_box" class="column1">
				<img id="image_main" src="images/pixel.png" />
				<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
				<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
				<a href="#"><img class="image_thumb" src="images/dummy.png" /></a>
				<a href="#"><img class="image_thumb last" src="images/dummy.png" /></a>
				<div class="clear"></div>
			</div>
			<div id="title_box" class="column2">
				actor's name
			</div>
			<div id="tab_box" class="column2">
				<div class="tab"><a href="#">about</a></div>
				<div class="tab"><a href="#">work</a></div>
				<div class="tab"><a href="#">contact</a></div>
				<div class="tab selected"><a href="#">press</a></div>
				<div class="tab last"><a href="#">blog</a></div>
				<div class="clear"></div>
				<div id="tab_content">
					<p>Executive Summary</p>
				</div>
			</div>

			<div class="clear"></div>

			<div id="awards_box" class="column1">
				awards
			</div>
			<div id="video_box">
				<img class="video_main" src="images/dummy.png" />
				<a href="#"><img class="video_thumb first" src="images/dummy.png" /></a>
				<a href="#"><img class="video_thumb last" src="images/dummy.png" /></a>
			</div>
			<div id="dvd_box">
				link to buy DVD
			</div>
			<div class="clear"></div>
		</div>

  </body>
</html>

And here are the contents of the CSS file, styles/wires.css:

body {
	background-color: pink; /*the background color for the whole page */
}
img {
	border: 0px; /*remove any borders that the browser may automatically apply to images nested inside of <a> tags */
	background-image: url(../images/pixel.png);
}
div {
	border: 2px solid red; /*put a red border around all divs to see them easily */
	background-color: white;
}

div#container {
	/* background-image: url(../images/wires.png); */ /* i used the wireframe diagram as a background image on the container so I could more quickly see if my code matched the diagram... uncomment this code to see how it looks */
	margin: 0 auto;  /* this is a technique to center the main container on the page */
	padding: 31px;
	width: 900px;
	height: 660px;
}

div.clear {
	clear: both;
	border: 0px; /*since I've applied a border to all divs, I have to override it for the "clear" divs to make them invisible */
}

div.column1 {
	/* all boxes in the left column have some properties in common, so I've placed them in a CSS class */
	width: 271px;
	float: left;
	margin-right: 5px;
	margin-bottom: 6px;
}
div.column2 {
	/* all boxes in the right column have some properties in common, so I've placed them in a CSS class */
	width: 615px;
	float: left;
	margin-bottom: 6px;
}

/* BEGIN HEADSHOT BOX STYLES*/
div#headshot_box {
	height: 447px;
}
	div#headshot_box img#image_main {
		width: 271px;
		height: 369px;
		margin-bottom: 0px;
	}
	div#headshot_box img.image_thumb {
		float: left;
		width: 58px;
		height: 72px;
		margin-right: 13px;
	}
	div#headshot_box img.image_thumb.last {
		margin-right: 0px;
	}
/* END HEADSHOT BOX STYLES*/

/* BEGIN TITLE BOX STYLES*/
div#title_box {
	height: 142px;
}
/* END TITLE BOX STYLES*/

/* BEGIN TAB BOX STYLES*/
div#tab_box {
	height: 295px;
}
	div#tab_box div.tab {
		float: left;
		border-width: 0 2px 2px 0;
		border-color: green;
		padding-top: 10px;
		width: 121px;
		height: 31px;
		text-align: center;
		background-color: #f0f0f0;
	}
		div#tab_box div.tab a {
			color: black;
			text-decoration: none;
		}
		div#tab_box div.tab.last {
			border-right: none;
			width: 122px;
		}
		div#tab_box div.tab.selected {
			background-color: white;
			border-bottom: 1px solid white;
		}
			div#tab_box div.tab.selected a {
				color: black;
				font-weight: bold;
			}
	div#tab_box div#tab_content {
		border: 0px;
		background-color: white;
		padding: 20px;
		height: 210px;
	}
/* END TAB BOX STYLES*/

/* BEGIN AWARDS BOX STYLES*/
div#awards_box {
	height: 198px;
}
/* END AWARD BOX STYLES*/

/* BEGIN VIDEO BOX STYLES*/
div#video_box {
	float: left; /* since the video box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
	width: 250px;
	height: 198px;
	position: relative; /*by making this box's position=relative, we allow child elements of this to use absolute positioning relative to the position of this element */
}
	div#video_box img.video_main {
		width: 177px;
		height: 198px;
		float: left;
		margin-right: 10px;
	}
	div#video_box img.video_thumb {
		width: 60px;
		height: 80px;
	}
	div#video_box img.video_thumb.first {
		position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
		right: 0px;
		top: 0px;
	}
	div#video_box img.video_thumb.last {
		position: absolute; /*since this element's parent element is relatively positioned, this absolute positioning is relative to the position of that parent element, NOT relative to the top-left of the entire browser window */
		right: 0px;
		bottom: 0px;
	}
/* END VIDEO BOX STYLES*/

/* BEGIN DVD BOX STYLES*/
div#dvd_box {
	margin-left: 10px;
	float: left; /* since the dvd box does not inherit from either column1 or column2 class, we need to set its float and width properties specifically here */
	width: 351px;
	height: 198px;
}
/* END DVD BOX STYLES*/

You can see how the files display in the browser by clicking here.

Class 3 – In-Class Assignment #1

Your in-class assignment today is to convert this screenshot into XHTML/CSS code:

BlackBook Guides Facebook App

All the images you need are in my spring2009/class3/assignment2/images folder on the server.

Class 4 – CSS & Javascript Workaround for IE6

This code can be put in the <head> element of your page, and will only be interpreted by the IE6 browser.  So you can use it to load special stylesheets or javascripts that will override the other styles or scripts you have set.

<!--[if lte IE 6]>
<link href="/css/ie_hacks.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/frontend/iepngfix_tilebg.js"></script>
<![endif]-->

To see more information about these “conditional comments”, check out this page on the quirksmode.org website.

Class 3 – The Secret to Layout: Float and Clear

The secret to creating layouts with CSS depends upon the proper use of the properties “float” and “clear”.

For example, say you were trying to code a page with the following layout:

The outer box is meant to represent the outline of the page. The layout is basically a grid: two rows and two columns.

The Question: How do you create that in XHTML and CSS?

The Answer: Using XHTML div tags, and the CSS properties float and clear.

Here is another version of the same diagram, but this one indicates how we would break the first diagram down into blocks of code:

First, a quick explanation of this diagram:

To make things obvious, the boxes in the diagram each show their respective CSS “selectors”. In other words, the box titled “div#container” indicates that this is an XMTML “div” element with an id=”container”.

As you know, a tag like <div id=”container” >
allows us to use a style sheet that is associated only with that id. Similarly, a tag like <div class=”column” > allows us to use a style sheet that is associated with all elements that have class=”column”.

The dotted line around the “br.clear” box indicates that it will actually be invisible on the page.

Note: You will see in some of these examples I use a <br> tag with the class=”clear”, while in other examples, I use the <div> tag with class=”clear”.  It doesn’t matter what element you use to do the clearing, so long as it is a block element.  The <br> tag has several properties specified in the browser’s default CSS which affect its height, while the <div> tag does not.  So if we use a<br> tag instead of the <div> as our clearing element, we have to override those default height settings to make it have a height of zero.  You’ll see that the CSS below removes any default height, padding, line-height, or margins associated with the <br> tag used for clearing for this reason.

So our XHTML will look something like this:

<div id="container">

<div class="column"></div>
<div class="column"></div>
<br class="clear" />

<div class="column"></div>
<div class="column"></div>
<br class="clear" />

</div>

And our CSS will look something like this:

div#container {
  width: 644px; /* the sum of the container padding, plus the widths of all the boxes inside the container, plus all their borders and margins */
  /* do not specify the height of the container, this makes it somewhat flexible */
  margin: 0 auto; /*centers the div on the page */
  border: 1px solid red;
  padding: 10px;
}

div.column {
  float: left; /* allows all divs with clas="column" to stack up horizontally */
  width: 300px;
  height: 300px;
  border: 1px solid orange;
  margin: 10px;
}

br.clear {
  clear: both; /* marks the end of a row. remember, every time you float, you must clear! */
  /* override any default browser settings that might exist for <br> tags by default */
  height: 0px;
  line-height: 0px;
  margin: 0px;
  padding: 0px;
}

To see this code in action, click here.

Class 2 – Homework Assignment

Your homework assignment this week is tripartite:

1. Go through the CSS tutorial on w3schools.com.  Also view the examples on their site, and take the CSS Quiz.
2. Convert the Artist Homepage Wireframe we created in Class #1 into XHTML and CSS code.  Post the results of your efforts on your blog.
3. While keeping a copy of the result of your efforts from step 2, make a new copy of your code and use the styles you learned about in step 1 to make your Artist Homepage look as pretty as possible.  Use real images, and real text to make the page seem like something more than a class exercise.

Class 3 – Solution to In-Class Assignment #3

Here is my solution to the advanced float/clear in-class assignment.  This example takes advantage of the CSS “float” and “clear” properties to create a layout of rows of boxes.

The files necessary for this example are:

1. assignment2.html – the XHTML code
2. styles/assignment2.css – the CSS code

Here is the code for assignment2.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Class 2 - In-class Assignment #2</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!-- put a any CSS style sheet or JavaScript code here -->
	<link rel="stylesheet" type="text/css" href="styles/assignment2.css" />
  </head>
  <body>
	<h1>Class 2 - In-class Assignment #2</h1>

	<div id="container">

		<!-- BEGIN FIRST ROW OF BOXES -->
		<div class="box green_box"></div>
		<div class="box blue_box"></div>
		<div class="box green_box"></div>
		<div class="clear"></div>
		<!-- BEGIN FIRST ROW OF BOXES -->

		<!-- BEGIN THE PARAGRAPH -->
		<p id="blue_p">
			Phasellus commodo nibh eu ante egestas sodales. Integer malesuada. Ut quam nibh, imperdiet non, malesuada sed, cursus sit amet, ligula. Cras id est quis lectus tincidunt vulputate. Nullam magna erat, ultrices vitae, suscipit vel, placerat vitae, quam. Suspendisse potenti. Pellentesque et neque ut nulla fermentum pellentesque. Pellentesque mollis velit eu nisl. Maecenas ipsum. Sed sagittis erat id dolor. Nulla et ligula. Maecenas at purus eget libero ultricies egestas. Donec condimentum, justo ac semper vestibulum, dui justo porta felis, non auctor sem enim eget est. Ut nisl erat, viverra id, sollicitudin at, porttitor sed, felis. Maecenas sed odio non massa viverra euismod. Praesent turpis urna, lobortis eget, lobortis vel, suscipit sed, massa. Curabitur tincidunt. Aliquam elementum, justo a viverra sagittis, neque lacus molestie elit, quis condimentum augue quam feugiat nulla.
		</p>
		<!-- END THE PARAGRAPH -->

		<!-- BEGIN SECOND ROW OF BOXES -->
		<div class="box red_box"></div>
		<div class="box red_box"></div>
		<div class="box red_box"></div>
		<div class="clear"></div>
		<!-- END SECOND ROW OF BOXES -->

	</div><!-- //end of div id="container" -->

  </body>
</html>

And here is the code for styles/assignment2.css:

body {
	/* this is a hack to get IE6 to center the main div on the page */
	text-align: center;
}

div#container {
	margin: 0 auto;	/* this is how you center an element in relation to its parent element */
	width: 370px;
	border: 1px solid gray;
	background-color: #c0c0c0;
	padding: 10px;
}

div.box {
	float: left; /* this stacks up all the boxes side by side, starting all the way to the left */
	width: 100px;
	height: 100px;
	margin: 10px;
	border: 1px solid gray;
}

div.clear {
	clear: both; /* this creates a sort of line-break at the end of a row of floating elements */
}

div.green_box {
	background-color: green;
}
div.blue_box {
	background-color: blue;
}
div.red_box {
	background-color: red;
}

p#blue_p {
	border: 1px solid gray;
	background-color: blue;
	color: white;
	text-align: left;
	padding: 10px;
}

Class 2 – Solution to In-Class Assignment #1

There are four files necessary for this solution to Class 2 – In-class Assignment #1:

1. assignment1.html – the XHTML file
2. styles/assignment1.css – the CSS file
3. images/mouse.jpg – the picture of the mouse
4. images/rat.jpg – the picture of the rat

Here is the code from assignment1.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Class 2 - In-class Assignment #1</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!-- put a any CSS style sheet or JavaScript code here -->
	<link rel="stylesheet" type="text/css" href="styles/assignment1.css" />
  </head>
  <body>
	<h1>Class 2 - In-class Assignment #1</h1>

	<img id="image1" src="images/mouse.jpg" />

	<br />

	<img id="image2" src="images/rat.jpg" />

	<p>
		Lorem ipsum dolor <span class="blue">sit</span> amet, consectetur <span class="red">adipiscing elit</span>. Cras porttitor, tortor aliquam <span class="orange">euismod tincidunt</span>, est neque fermentum mauris, sed facilisis diam orci venenatis turpis. Integer ornare ante et velit. Nulla auctor, lectus nec viverra rhoncus, tellus justo suscipit nisl, a semper sem ligula in mauris. Integer quam metus, suscipit sed, aliquam vitae, tincidunt at, purus. Suspendisse magna mauris, varius quis, tristique et, elementum et, nisi. In in nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent aliquet. Aenean feugiat. Curabitur ullamcorper pretium nibh. Ut justo ipsum, tincidunt eu, auctor et, volutpat eget, nisi. In rhoncus tincidunt diam. Praesent feugiat faucibus nibh. Nulla facilisi.
	</p>

  </body>
</html>

And here is the code from styles/assignment1.css:

img#image1 {
	border: 2px solid red;
}

img#image2 {
	width: 300px;
	height: 200px;
}

.blue {
	color: blue;
}

.red {
	color: red;
}

.orange {
	color: orange;
}

So long as you make sure you have image files at images/mouse.jpg and images/rat.jpg, you will be fine using this code.

Class 3 – In-Class Assigment #3

Your advanced assignment is to convert the following diagram into valid XHTML code.  You will need to research the CSS “float” and “clear” properties.  You will also need to get familiar with the XHTML “div” element.

Design comp of in-class assignment #2