Da Clock and Date Stuff
Page last modified: 30 June 2008
Source Code For Class CSS Buttons Exercise
<!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=iso-8859-1" />
<title>CSS Buttons Class Exercise</title>
<style type="text/css">
<!--
#header_row {
border-bottom: solid 8px #000066;
}
#leftnav {
background-color:#CCCCCC;
text-align: center;
border-top:#000066 1px solid;
}
#menubar {
border: 1px solid #000099;
padding: 1px;
width:115px;
color:#0000A0;
}
#menubar b{
font-size:110%;
color:#000095;
font-style:italic;
}
.daButton {
font-family: Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
text-align: center;
margin-bottom:1px;
margin-top:1px;
border-top: 1px #006 solid;
border-left: 1px #006 solid;
border-bottom: 3px #006 solid;
border-right: 3px #006 solid;
}
.daButton a {
padding: 5px;
text-decoration: none; /* This stops the underline for a Link */
display: block;
color: #FFFFFF; /* This is the font color of the Text in the Button - because we want it to look like a button */
background-color: #0080FF;
/* Top and Left go together, as do Bottom and Right
By making the bottom and right thicker, we make the menu look like it is made up of
buttons
When the button is depressed / hovered over, the top and left get thicker, the bottom
and right get thinner */
border-top: 1px #006 solid;
border-left: 1px #006 solid;
border-bottom: 4px #006 solid;
border-right: 2px #006 solid;
}
.daButton a:hover {
padding: 5px;
text-decoration: none; /* This stops the underline for a Link */
display: block;
color: #FFFFFF; /* This (colour of the text) does not change - but the background (next
line) is darker - which makes it look like the button has been pressed in*/
background-color:#006BD7;
border-top: 4px #012 solid;
border-left: 3px #012 solid;
border-bottom: 1px #006 solid;
border-right: 0px #006 solid;
}
td.content_background {
padding:15px;
border-right:#000066 1px solid;
border-left:#000066 1px solid;
}
.content_box_full {
vertical-align:top;
}
.heading_background {
background-color:#006BD7;
color:#FFFFFF;
}
.full_text_box {
float:left;
margin: 1px;
padding: 1px;
width:95%;
border:#000066 1px solid;
}
.half_size_box_left {
float:left;
margin: 1px;
padding: 1px;
width:45%;
border:#000066 1px solid;
}
.float_img_left {
float:left;
}
.float_img_right {
float:right;
border:1px #000066 solid;
padding:4px;
marging: 4px;
}
.clear_it {
height: 1px;
width: 100%;
float: clear;
}
.right-images {
width: 150px;
border: 2px #000066 solid;
}
-->
</style>
</head>
<body>
<table width="97%" border="0" align="center" cellpadding="2" cellspacing="2">
<tr id="header_row">
<td width="18%" height="56" scope="col"> </td>
<td align="center" width="60%" scope="col"><img src="../images/sdws.png" width="400" height="50" align="middle" /></td>
<td width="22%" scope="col"> </td>
</tr>
<tr>
<td valign="top" id="leftnav">
<div id="menubar">
<p class="daButton"><a href="file:///e|/peter-vision%20college%20stuff%2016%20june%202008/www%20students%20disk/www/web%20design/css%20button%20exercise/html/under-construction.html">Contact Info</a></p>
<p class="daButton"><a href="file:///e|/peter-vision%20college%20stuff%2016%20june%202008/www%20students%20disk/www/web%20design/css%20button%20exercise/html/under-construction.html">About Us</a></p>
<div align ="center"> <b>Course Stuff</b> </div>
<p class="daButton"><a href="file:///e|/peter-vision%20college%20stuff%2016%20june%202008/www%20students%20disk/www/web%20design/css%20button%20exercise/html/under-construction.html">Into and Course Structure</a></p>
<p class="daButton"><a href="file:///e|/peter-vision%20college%20stuff%2016%20june%202008/www%20students%20disk/www/web%20design/css%20button%20exercise/html/under-construction.html">Syllabus</a></p>
<p class="daButton"><a href="file:///e|/peter-vision%20college%20stuff%2016%20june%202008/www%20students%20disk/www/web%20design/css%20button%20exercise/html/under-construction.html">HTML using Notepad</a></
</div>
</td>
<td valign="top" class="content_background">
<h2 class="heading_background">Diploma in Javascript and CSS </h2>
<div class="content_box_full"> <img src="../images/dipstic.png" alt="" width="240" height="50" border="2" align="right" />
The sample text can go here -- eg you too can become an expert web designer.
You will earn how to design websites in HTML using Notepad - to get your
HTML skills going. Then you wil learn to design sites using Dreamweaver
CS3 -- the HTML will be similar to what you wrote using Notepad, but Dreamweaver
will do most of the "leg-work" for you.
<p>You will learn to use Dreamweaver in both Design and Code View.</p>
Javascript will cover everything from simple clocks and dates through to scripting the DOM (Document Object Model)
<hr />
<div class="half_size_box_left">
<h4 class="heading_background">Meet The Staff !!?! </h4>
<div class="float_img_left"><img src="../images/cat_helmet.jpg" width="124" height="105" /></div>
Staff bios go in here</div>
You will also do Graphics and CSS Positioning
<p> The Simulated Buttons on the left navigation are done with CSS - the colour of the button changes to make it look like it has been pushed in, and the borders change to add to the impression that the button has been depressed </p>
</div>
<div class="clear_it"></div>
<hr />
<div class = "full_text_box">
<h2 class="heading_background">Floating Text Around Images With CSS</h2>
<div class="float_img_right"><img src="../images/165303main_image_feature_719_ys_4.jpg" width="273" height="245" /></div>
You will learn how to float text around an image -- like this one: If we continue writing text, it will eventually go under the images - but first it fills the space beside it. <p>In this case the image was "floated" to the right -- so the text starts off on the left side of the picture (which was pushed to the right by the "float right") -- and the text fills up the space to the left, until it reaches past the picture - then it starts to fill up all the available space.. We are just getting to the bottom of the picture here </p>
<p>So the next lot of text will spread out under the picture - as you can see here. </p>
</div>
</td>
<td valign="top">
<div class="right-images"><a href="file:///e|/peter-vision%20college%20stuff%2016%20june%202008/www%20students%20disk/www/web%20design/css%20button%20exercise/html/under-construction.html"><img src="../images/tiger_mowmow.jpg" width="150" height="113" border="1" align="top" /></a>
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>