Here is a Dreamweaver screen shot of my latest assignment.
It's an exercise in nesting and style sheets- and math since all
the placing has to be added/subtracted out :) Here's the code:
<!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>Assignment: Week 5</title>
<style type="text/css">
.aBox {
height: 200px;
width: 285px;
margin-bottom: 5px;
padding-right: 10px;
padding-left: 105px;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-style: none;
border-bottom-style: ridge;
border-top-color: #0CF;
border-bottom-color: #0CF;
font-size: 9px;
background-image: url(rhys.jpg);
background-repeat: repeat-y;
}
.bBox {
font-size: 9px;
height: 150px;
width: 340px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
border-right-width: 20px;
border-left-width: 20px;
border-top-style: none;
border-right-style: ridge;
border-bottom-style: none;
border-left-style: ridge;
border-right-color: #6C9;
border-left-color: #6C9;
background-image: url(rhys2.jpg);
background-repeat: no-repeat;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
margin: 0px;
padding: 0px;
}
h2 {
font-family: "Comic Sans MS", cursive;
font-size: 18px;
color: #009;
margin: 0px;
padding: 0px;
}
h3 {
font-family: "Comic Sans MS", cursive;
font-size: 18px;
color: #FFF;
margin: 0px;
padding: 0px;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<!--Top Box and info-->
<div class="aBox">
<h2> Assignment: Week #5 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies molestie tellus quis rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam non urna sed nulla semper convallis.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies molestie tellus quis rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam non urna sed nulla semper convallis.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies molestie tellus quis rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam non urna sed nulla semper convallis. Proin cursus pharetra elementum.
</div>
<!--Bottom Box and info-->
<div class="bBox">
<h3> Assignment: Week #5 </h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies molestie tellus quis rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam non urna sed nulla semper convallis.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies molestie tellus quis rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam non urna sed nulla semper convallis.
</div>
</body>
</html>
