VirtualMV/HTML/Basic/Layout/CSS

From WikiEducator
Jump to: navigation, search


Internet & Web Development ( Introduction  |  Advanced )
OverviewPersonal Learning Environment  |  What is HTML?  |  Web authoring  |  Resources  |  Help DeskTutorial.png
Creating a basic web siteHTML editor  |  Basic tags  |  Head tag  |  Linking pages  |  Formating and lines  |  Lists  |  Tables  |  Special characters  |  Page icon
Multimediagraphics and images  |  Connected media  |  Audio  |  Video  |  Image map
Cascading style sheetsInline, embedded, linked  |  Language  |  Example
Web page layoutTables  |  CSS  |  iFrame  |  Frames  |  Other  |  Responsive
FrameworkTours of Hawke's Bay
FormsExample  |  mailto  |  Add Google
MiscGoogle



Overview

In the past tables were used to do much of the layout on a web page, however, using the Div tag in association with Cascading Style Sheets (CSS) is becoming the accepted way to layout a web page. Web page authoring tools such as Microsoft's Expression Web and Adobe's Dreamweaver provide templates you can use to simplify this task.

VmvIcon Objectives.png

: DIV/CSS Layouts

By the end of this page you will be able to:

  1. Understand some Web Page Layout techniques using the DIV tag and CSS
  2. Understand where to access DIV/CSS templates in common web authoring tools

Center column layout

  • For the body:
    • It is good practice to zero the margin and padding to allow for different browser defaults
    • Text-align: center will center the container in IE5+ browsers
  • For the container:
    • Text-align: Left will override the body center setting

OneCol.htm 

<html>
<head>
<title>Single centered column layout</title>
<style type="text/css">
<!--
body       { margin: 0; padding: 0;	text-align: center; }
#container { width: 85%; margin: 0 auto; border: 1px solid #000000; text-align: left;}
#content   { padding: 0 20px; }
-->
</style>
</head>
<body>
<div id="container">
  <div id="content">
   ... Place your content in here ...
  </div>
</div>
</body>
</html>

Two column layout

Two column layout

TwoCol.htm 

<html>
<head>
  <title>Two column layout</title>
<style type="text/css">
<!--
  #container { position: relative; width: 100%; }
  #left_col { width: 200px; position: absolute; left: 0px; top: 0px; }
  #page_content { margin-left: 200px; }
 -->
</style></head>
<body>
  <div id="container">
    <div id="left_col">
    </div>
    <div id="page_content">
    </div>
 </div>
 </body>
</html>

Three column layout

ThreeCol.htm 

<html>
<head>
  <title>Three column layout</title>
  <style type="text/css">
    <!--
    #container { position: relative; width: 100%; }
    #left_col {width: 200px; position: absolute; left: 0px; top: 0px; }
    #right_col {width: 200px; position: absolute; top: 0px; right: 0px; }
    #page_content { margin-right: 200px; margin-left: 200px; }
    -->
  </style></head>
<body>
  <div id="container">
    <div id="left_col"></div>
    <div id="page_content"></div>
    <div id="right_col"></div>
  </div>
</body>
</html>

Exercise

  1. Create a small three page web site using the DIV/CSS styles shown above

CSS Layouts

  • Microsoft Expression Web
    • File > New > Page (tab) > CSS Layouts
  • Adobe Dreamweaver
    • File > New
      • Page Type: HTML Layout: Choose the CSS layout you want

CSS Examples

Centering a block

Fixing height problems with some div's.


VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/HTML/Basic/Layout/CSS. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 23, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Layout/CSS    (zotero)

Retrieved from "https://wikieducator.org/index.php?title=VirtualMV/HTML/Basic/Layout/CSS&oldid=904650"