HTML/CSS Stylesheet Tutorial
 by AkenaDesign

2.

HTML

In this section I create div layers for the elements of the web page: header, menu, left-column, right-column, and footer.

The <br clear:both> is used in conjunction with floating elements. Explained below.

 

CSS

The div layers are positioned according to CSS definitions.

The header div is simply defined to be 600px wide (the width or our page content) and 176px high.

The menu is defined with margin 10px 0; This definition utilizes CSS short hand and translates to top and bottom margins of 10 and left and right margins of 0.

I use float:left to allow the left and right columns to behave like columns and tile horizontally next to each other.

For a detailed explanation of positioning I reccommend BarelyFitz's CSS positioning tutorial.

© 2011 Akena Design. All Rights Reserved. 

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html>
<html>
<head>
  <!-- Site Design and Progamming by Ken Johnson -->
  <meta charset=utf-8 />
  <title>Where are the Lincoln Cabs?</title>
  <!--[if IE]>
  <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  
  <!-- Favicon -->
  <link rel="shortcut icon" href="favicon.ico">
  
  <!-- Meta -->
  <meta name="KEYWORDS" content="downtown, lincoln ne, cab, taxi, ride home, safe ride,">
  <meta name="DESCRIPTION" content="Our goal at wherearethelincolncabs.com 
                 is to lower the incidence of drunken driving and provide Lincolnites 
                 with proper transportation into the evening hours, through a safe, 
                 economical, efficient taxi or public transportation service.">
  <meta name="ROBOTS" CONTENT="index, follow">
  <meta name="REVISIT-AFTER" CONTENT="1 Week">
               
  <!-- Stylesheets -->
  <link rel="stylesheet" href="includes/style2.css">
  <!-- http://jquery.com/ -->
</head>

<body>
  <div class="page">
      <div class="header">Header</div>
      <div class="menu">Menu</div>
      <div class="left-column">Left</div>
      <div class="right-column">Right</div>
      <br style="clear:both;">
      <div class="footer">Footer</div>
  </div>
</body>
</html>

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
/********************************************************************************
Tutorial CSS Stylesheet
Title: Where are the Lincoln Cabs
Stylesheet 2
Author: Ken Johnson
Created 1/13/2011

*********************************************************************************/


*{margin:0; padding:0;} /* clear all default CSS */


body {
	background-color: #2b2b2b;
	text-align:center;
}

.page{
	width: 600px;
	margin: auto;
	background-color: #fff;
	text-align: left;
}

.header{
 width:600px;
 height: 176px;
 background-color: #f5c44b;
}

.menu{
 height: 30px;
 margin: 10px 0;
 background-color: #6666cc;
}

.left-column{
	float:left;
	width: 390px;
	margin-right: 10px;
	min-height:300px;
	background-color: #ff9933;
}

.right-column{
	float:left;
	width: 200px;
	min-height:200px;
	background-color: #669933;
}

.footer{
	width: 600px;
	height: 150px;
	background-color:#585858;
	margin-top: 10px;
}