DesignersTalk - View Single Post

emil · 25-08-2005, 09:03

try this

HTML Code:


<!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" xml:lang="en" lang="en">
<head>
<title>exp.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">

body {
	margin:0px;
	padding:0px;
	background: url(bgtile.gif) center repeat-y  #ccc;
	text-align:center; /*to align divs in center*/
}
div {text-align:left;} /*to reset text alignment in divs */

h2, p {margin:0px;} /*these are just to make everything stick together in ff */

#container {width:500px; margin:auto;} /*margin auto to align stuff in center*/
	
#header {
	height: 47px;
	background: #EEE; /*background just to see where everything goes */
	}
	
#content {
	background:#38A; /*background just to see where everything goes */
	}
	
#footer {
	padding: 20px;
	background: #123; /*background just to see where everything goes */
	}
	
#nav {
	margin: 0px;
	padding: 0px;
	height: 41px;
	list-style-type: none;
	}
	
#nav li {
	margin: 5px;
	padding: 0px;
	float:left;
	background:#C13;
	}
	
#nav a {
	padding: 41px 0 0 0;
	
	}
	
	
#thome a {
	width: 47px;
	background: url(home.gif) top left no-repeat;
	}

#tcourse a {
	width: 58px;
	background: url(course.gif) top left no-repeat;
	}

#twork a {
	width: 96px;
	background: url(work.gif) top left no-repeat;
	}
	
#tstudents a {
	width: 73px;
	background: url(students.gif) top left no-repeat;
	}
	
#tresources a {
	width: 82px;
	background: url(resources.gif) top left no-repeat;
	}
	
#tcontact a {
	width: 66px;
	background: url(contact.gif) top left no-repeat;
	}
</style>
</head>

<body>
<div id="container">

	<div id="header">

		<ul id="nav">
			<li id="thome"><a href="#" class="selected">Home</a></li>
			<li id="tcourse"><a href="#">Course</a></li>
			<li id="twork"><a href="#">Coursework Examples</a></li>
			<li id="tstudents"><a href="#">Students</a></li>
			<li id="tresources"><a href="#">Resources</a></li>
			<li id="tcontact"><a href="#">Contact</a></li>
		</ul>
	</div>

	<div id="content"> 
		<h2>CONTENT</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type   and scrambled it to make a type specimen book. It has survived not only five   centuries, but also the leap into electronic typesetting, remaining essentially   unchanged. It was popularised in the 1960s with the release of Letraset sheets   containing Lorem Ipsum passages, and more recently with desktop publishing software  like Aldus PageMaker including versions of Lorem Ipsum. 
	  </p>
  	</div>

	<div id="footer"> 
		...footer content... ...footer content... ...footer content...   ...footer content... 
	</div>

</div>
</body>
</html>