Week 4

Session 1: Today we will look at a variety of CSS layouts starting with a simple two column, fluid layout with a banner that spans both columns (see code example below). We will also examine 3 column layouts and static width layouts. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS Layout Example</title>
<style type="text/css">
<!--
#banner {
    margin: 10px auto 0px auto;
	width: 80%;
	border: #cccccc solid 1px;
	padding: 3px;
}
#container {
    padding: 3px;
    margin: 0px auto 0px auto;
	width: 80%;
	border: #cccccc solid;
	border-width: 0px 1px 1px 1px;
	clear: left;
	overflow: hidden;
}
#left_sidebar {
    padding: 3px;
	border: #cccccc solid;
	border-width: 0px 1px 0px 0px; 
    float: left;
	width: 30%;
	margin-right: 5px;
}
#main_content {
    padding: 3px;
}
-->
</style>
</head>
<body>
<div id="banner">Content for id "banner" Goes Here</div>
<div id="container">
  <div id="left_sidebar">
  1. left_sidebar content<br />
  2. left_sidebar content<br />
  3. left_sidebar content<br />
  4. left_sidebar content<br />
  5. left_sidebar content<br />
  6. left_sidebar content<br />
  7. left_sidebar content
  </div>
  <div id="main_content">
Praesent ut nulla. Sed tellus magna, tempor sit amet, pulvinar eu, 
dignissim sit amet, purus. Phasellus ultrices massa sed metus. Nulla 
scelerisque, metus a ultricies blandit, nisi arcu lacinia orci, et 
posuere urna lacus bibendum turpis. Maecenas nibh nulla, cursus in, 
pulvinar eu, dictum quis, neque. Curabitur ac purus a ipsum ultrices 
consequat. Aliquam sed velit sit amet diam mattis aliquet.
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Sed bibendum molestie tortor. Sed ut nunc. 
Maecenas purus felis, scelerisque id, egestas ut, pretium et, nulla. 
Nunc nisl arcu, vulputate et, feugiat non, luctus eu, justo. Quisque 
rhoncus. Mauris dapibus orci non dui. Mauris lobortis. Aenean 
gravida pede a justo.
  </div>
</div>
</body>
</html>

Multi-column CSS layouts like these allow for problems to arise. Mis-matched column heights for one, but also issues related to variations in browser defaults.

Multi-column height solution
Normalize CSS file

Useful CSS navigation resource:
http://css.maxdesign.com.au/listamatic/

Technique to create tiled backgrounds:
How to Turn a Texture into a Seamlessly Tiled Background

Week 4 Reading:
Chapter 8 “Working with Stylesheet Files”
Chapter 17 “Forms”

Important: by now it is valuable to start using CSS Reset or CSS Normalize stylesheets to reduce browser discrepancies. Download the CSS Reset style here, or look at the newer CSS Normalize stylesheet here.

Session 2: Today we will be covering the next assignment which involves creating an XHTML form:

1. This week we will start by creating the form and layout using HTML5 and CSS.
2. Next we will use some simple Javascript to help validate the input from the user.
3. Thirdly we will will discuss server side scripting but it is not required.

Here’s a very basic table-less form formatted with CSS:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Form Demo</title>
<style type="text/css">
<!--
input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
label {
	display: block;
	text-align: right;
	float: left;
	width: 80px;
	padding-right: 5px;
	margin-bottom: 10px;
}

br {
	clear: left;
}
-->
</style>
</head>
<body>
<form action="mailto:test@email.com" method="post">
  <label for="first_name">First Name:</label>
  <input id="first_name" name="first_name" type="text" />
  <br />
  <label for="last_name">Last Name:</label>
  <input id="last_name" name="last_name" type="text" />
  <br />
  <label for="email">Email:</label>
  <input id="Email" name="last_name" type="text" />
  <br />
</form>
</body>
</html>

The following resource illustrates how forms can be put into horizontal, vertical, columnar, and other formats using CSS with fieldset, label, and legend tags:

http://www.themaninblue.com/experiment/InForm/
CSS-Based Forms: Modern Solutions