Class 4 – MTV Example Layout

Posted: March 7th, 2009 | Author: | Filed under: css, xhtml | Tags: | No Comments »

Here is the example code for the general high-level layout of the MTV Layout Assignment.   This example was meant to show you the general approach you should take when trying to convert a design comp into XHTML and CSS.  I’ve shown how to lay out the main parts of the page using the basic float and clear technique, but haven’t gone into detail of how to then subdivide those parts.  You can view a live version of this example code here.

The XHTML file, index.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>MTV Assignment Layout</title>
	<link type="text/css" rel="stylesheet" href="styles/mtv_layout.css" />
  </head>
  <body>
	<div id="container">

		<div id="header_box">Header</div>
		<div id="topnav_box">Top Nav Buttons</div>
		<div id="left_box">Left Box</div>
		<div id="right_box">Right Box</div>
		<div class="clear"></div>

	</div>
  </body>

</html>

And here is the CSS file, styles/mtv_layout.css:

div#container {
	background-image: url(../images/mtv_screenshot.png);
	width: 760px;
	height: 1000px;
}
div.clear {
	clear: both;
}
div#header_box {
	height: 72px;
	background-color: yellow;
	opacity: 0.5;
}
div#topnav_box {
	height: 32px;
	background-color: blue;
	opacity: 0.5;
}
div#left_box  {
	float: left;
	margin-top: 10px;
	width: 448px;
	height: 800px;
	background-color: pink;
	opacity: 0.5;
}
div#right_box {
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	width: 302px;
	height: 800px;
	background-color: orange;
	opacity: 0.5;
}

Related posts:

  1. Class 3 – The Secret to Layout: Float and Clear
  2. Class 4 – Formula for Calculating Widths of Columns in Layout

Leave a Reply