SFDV2001 Web Development: Lab 2

Lab 2

Float Example and Exercises

fold

Table of Contents

Float Example and Exercises

The CSS

The HTML Code

Exercises on float

The CSS

div#nav {
    float: left;
    width: 100px;
    border: thin ridge;
    border-color: #339933;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 3px;
    background-color: #ffffcc;
    color: teal;
    clear: right;
    margin:5px;
    padding:5px;
    position:fixed;
    top:10px;
    left:10px;
}
 
a {
    color: teal;
}
 
a:hover {
    background-color:#ccff66;
    color:blue;
}
 
#main{
    margin-left: 125px;
}

The HTML 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>
  <title>Float example</title>
  <meta name="generator" content="HippoEDIT" />
  <meta name="author" content="Sur College" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="style3.css">
 </head>
 
 <body>
 
  <div id="nav">
       <a href="labs.html">Labs</a>
      <br /><br />
      <a href="lectures.html">Lectures</a>
      <br /><br />
      <a href="assignments.html">Assignments</a>
      <br /><br />
      <a href="tools.html">Tools</a>
      <br /><br />
      <a href="course_info.html">Course Information</a>
  </div>
 
  <div id="main">
<h1>SFDV2001 Web Development</h1>    
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
<p> This is alternative website for SFV2001</p>
 
ADD MORE LINES TO SEE IF FLOAT IS ACTUALLY WORKING
</div>
 
 </body>

Exercises on float

Modify the above CSS and HTML code such that the navigation menu appears on the right
Modify the above CSS and HTML code such that the navigation menu appears on the top as an horizontal menu

page_revision: 6, last_edited: 1255757665|%e %b %Y, %H:%M %Z (%O ago)

Edit Tags History Files Print Site tools + Options

SFDV2001 Web Development

SFDV2001 @ Sur College

Page tags

Add a new page

Float Example and Exercises

The CSS

The HTML Code

Exercises on float