VirtualMV/HTML/Basic/Layout/CSS
From WikiEducator
< VirtualMV | HTML/Basic | Layout
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.
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
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
- 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
- File > New
CSS Examples
Fixing height problems with some div's.
References
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/HTML/Basic/Layout/CSS. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Layout/CSS (zotero)
|