Week 4
August 3, 2008 – 8:29 pmWeek 4 Reading:
Chapter 8 “Working with Stylesheet Files”
Chapter 17 “Forms”
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>
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
Session 2: Today we will be covering the next assignment which involves creating an interactive XHTML form. There are several parts to this assignment that we will work on sequentially:
1. This week we will start by creating the form and layout using XHTML and CSS.
2. Next we will use some simple Javascript to help validate the input from the user.
3. Thirdly we will will use server side scripting to process the information and email it to ourselves.
Here’s a very basic tableless 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