Class 3 – The Secret to Layout: Float and Clear

Posted: February 27th, 2009 | Author: | Filed under: css, xhtml | Tags: | No Comments »

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 3 – Solution to In-Class Assignment #3

Posted: February 21st, 2009 | Author: | Filed under: assignments, css, xhtml | Tags: | No Comments »

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 3 – In-Class Assigment #3

Posted: February 21st, 2009 | Author: | Filed under: assignments, css, xhtml | Tags: | No Comments »

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

Design comp of in-class assignment #2

Class 3 – Basic CSS Selectors

Posted: February 21st, 2009 | Author: | Filed under: css | Tags: | No Comments »

Here is an overview of the basic CSS selectors.  Please make sure you have read the CSS tutorials on the w3schools site before proceeding.

selecting particular tag names

p {
    /* some css code here */
}

This select would match any and all <p> tags in the XHTML document.

selecting particular tag ids

p#some_id {
    /* some css code here */
}

This selector would apply styles to any p tag with an id=”some_id”, such as:

<p id="some_id">some text</p>

selecting particular classes

p.some_class {
    /* some    css code here */
}

This selector would apply styles to any <p> tags with class=”some_class”.  For example, it would match this code in the XHTML:

<p class="some_class">This is some text in the paragraph</p>

selecting particular child elements

p#some_id a {

    /* some css code here
}

This selector matches any <a> tag that is a child of a <p> tag with id=”some_id”.  For example, it would match the <a> tag in the following code snippet:

<p id="some_id">
  This is a paragraph of text with a
  <a href="http://google.com">link in it</a>
</p>

selecting direct descendents of an element


p > a {
/* some css code here */
}

This CSS code would match any <a> elements that are direct descendents of any <p> elements.  For example, it would match the <a> tag in the following code snippet:

<p>
  This is a paragraph of text with a
  <a href="http://google.com">link in it</a>
</p>

But it would NOT match the <a> tag in this example:

<p>
  This is a paragraph of text with a
  <ul>
    <li>This is a <a href="http://google.com">link</a></li>
  </ul>
</p>

This does not match because the <a> tag is not a direct descendant of the <p> tag.  It is a grandchild element of the <p>, not a direct child element.

Class 3 – In-Class Assignment #1

Posted: February 21st, 2009 | Author: | Filed under: assignments, css, xhtml | Tags: | No Comments »
Your assignment is to convert this image into valid XHTML and CSS code

Your assignment is to convert this image into valid XHTML and CSS code

Your assignment is to convert this diagram into valid XHTML code.  There are a few things to note:

  • a good starting point is to copy and paste my example of the bare minimum XHTML elements necessary to create a web page.
  • the words “Class 2 – In-class Assignment #1″ should be written using a “h1″ tag.
  • all images should be displayed using the “img” tag
  • the first image is a rat, and it should have a 1 pixel red border applied to it in the CSS style sheet.  You will want to get familiar with using CSS selectors, in particular the “border-width“, “border-color“, and “border-style” properties of CSS.  There is also a shortcut property called “border” which you can use to set all three border properties at once.
  • the second image is a mouse, and it should be stretched so it is wider than the first image.  You can use the “width” and “height” properties of CSS to stretch an image.
  • The text at the bottom should be inside a “p” tag.
  • Each colored section should be wrapped inside a “span” tag that is given a unique “id” attribute.  For example, <span id=”blue_section”>sit</span>.  This will allow you to then apply a style in the CSS that only applies to elements with that particular tag name and that particular id attribute.  For example, span#blue_section { color: blue; }
Newer Entries »