HTML/XHTML:CSS Layouts:Div Center 800

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <
Icon Objective.png

Objective

By the end of this exercise you should be able to demonstrate how to:

  • create a container of minimum width 800 on a web page using div tags and cascading styles
  • create a left graphic in a container


Basic container

css800.htm

<!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=utf-8" />
<title>Using Css and div tags to set an 800px area</title>
<link rel="stylesheet" type="text/css" href="css800b.css" />
</head>
<body>
<div id="container">
<div id="content">
content in here
<br />
<br />
</div>
</div>
</body>
</html>

css800.css

body {
	margin:0 0 0 0;
}
#container {
	width: 90%;
	max-width: 1200px;
	min-width: 800px;
	margin: 0 auto 0;
	padding: 0;
	border: 0;
	border-left:20px #99CCFF inset;
	border-right:20px  #99CCFF outset;
}

And the result

XHTML CSS800a.png

Notes: maximum width is not supported in all browsers (e.g. IE 6 and below) so the width will be fixed at 800.

Adding a graphic on the left hand margin

Hole image (Hole.png) Hole.png

css800z.css

#content { 	margin: 0; 	padding: 20px; 	border: 0; }
#wrapper { 	width: 90%; 	max-width: 1200px; min-width: 800px; margin: 0 auto 0; padding: 0; border: 0;}
#wrapleft {
	margin: 0 20px 0 0;
	padding: 0;
	border: 0;
	background: url(hole.png) repeat-y left;
}

css800z.htm

XHTML CSS800.png

Icon References.png References


HTML/XHTML:CSS Layouts:Div Center 800. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 12, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML/XHTML%3ACSS_Layouts%3ADiv_Center_800    (zotero)