CSS3 XHTML Template

Since the implementation of CSS3 into some of the modern browsers, eg. Webkit based browsers and Firefox we’re starting to see more and more websites use CSS3 to style the pages. I have made an example of how we can use “Rounded Corners” in CSS3 in a modern layout. I have provided the download at the bottom of the page.

The layout is a standard two column layout with a header, two menus and a footer – I have rounded the corners using the CSS3 standard of border-radius and added sample dummy content to the pages. Feel free to modify and use this template as you wish.
The CSS file;

* {
	padding: 0;
	margin: 0;
}
body {
	padding: 0px;
	margin: 0px;
	background: #FFFFFF url(images/bg.gif) repeat-x;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
}

#tmenu a {
	color: #FFF;
}

a {
	color: #000000;
}

h1 {
	font-size: 18px;
	margin-bottom: 4px;
}

#wrapper {
	width: 850px;
	margin: 0 auto;
	padding: 8px;
	background: transparent;
}

#header {
	height: 70px;
	background: #464548;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
}

#logo a img {
	border: 0px;
}

#main {
	background: #f4f4f4;
	overflow: auto;
	padding: 10px;
}

#footer {
	background: #464548;
	padding: 5px;
	color: #FFF;
	font-size: 12px;
	height: 50px;
	text-align: right;
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
}

#footer p {
	margin-top: 15px;
	margin-right: 10px;
}

#body {
	float:left;
	background: #FFF;
	width: 550px;
	padding: 10px;
	color: #464548;
	min-height: 300px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
}

.block {
	background: #c85e35;
	min-height: 100px;
	width: 230px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	padding: 10px;
	color: #f4f4f4;
}

.block h1 {
	font-size: 14px;
	font-weight: bold;
}

#right_side {
	margin-left: 10px;
	float:left;
	width: 200px;
}

#logo {
	margin-top: 4px;
	margin-left: 4px;
	width: 300px;
	float:left;
}

#search {
	background: #c05639;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	min-height: 25px;
	float:right;
	margin-top: 10px;
	margin-right: 10px;
	padding: 4px;
}

#search input {
	padding: 2px;
	border: 0px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	background: #FFF;
	float:left;
	margin-right: 4px;
	margin-top: 2px;
}

#lmenu {
	margin-top: 10px;
	margin-left: 10px;
}

#lmenu ul li {
	display: inline;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 8px;
	background: #FFF;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
}

.activated {
	background: #464548;
	font-weight: bold;
}

#tmenu {
	float:right;
	margin-top: -10px;
}

#tmenu ul li {
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 8px;
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	background: #464548;
	color: #FFF;

}

The XHTML code to go along with the stylesheet;

<!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>Template Website</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	</head>
	<body>
		<div id="bgwrap">
		<div id="wrapper">
			<div id="header">
				<div id="logo">
					<a href="#"><img src="images/logo.jpg" alt="Logo" /></a>
				</div>
				<div id="search"><input type="text"></input><input type="submit"></input></div>
			</div>
			<div id="main">
				<div id="tmenu">
					<ul>
						<li class="activated"><a href="#">Home</a></li>
						<li><a href="#">Products</a></li>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Downloads</a></li>
					</ul>
				</div>
				<div id="lmenu">
					<ul>
						<li class="activated"><a href="#">Home</a></li>
						<li><a href="#">Latest News</a></li>
					</ul>
				</div>
				<div id="body">
					<h1>Lorem Ipsum</h1>
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
					egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
					Donec eu libero sit amet quam egestas semper.</p>
					<br />
					<h1>Lorem Ipsum</h1>
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
					egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
					Donec eu libero sit amet quam egestas semper.</p>
					<br />
				</div>
				<div id="right_side">
					<div class="block">
						<h1>Lorem Ipsum</h1>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
						turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
						amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
						est. Mauris placerat eleifend leo.</p>
					</div>
					<br />
					<div class="block">
						<h1>Lorem Ipsum</h1>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
						turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
						amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
						est. Mauris placerat eleifend leo.</p>
					</div>
				</div>
			</div>
			<div id="footer">
				<p>&copy; 2002 - 2009 Your Comapany. Design By <a href="http://www.stevenmcmillan.co.uk">SM</a></p>
			</div>
		</div>
		</div>
	</body>
</html>

More information

Also it is worth noting that CSS3 standards have not been implemented yet in Internet Explorer, you will not see any CSS3 effects such as rounded corners in IE. If you wish to view the differences that CSS3 provides then it is worth opening up the template both in IE and Firefox at the same time.

Once implemented in all the latest browsers this will save development time and effort when developing some graphics for websites. It is also worth mentioning that CSS3 is much more than rounded corners, there is a whole list of features that make things a whole lot easier and richer for web developers. If you wish to view the full effects of CSS3 then it is worth visiting this website here as it contains multiple examples of how it can be used.

You can view a screenshot of the template I created by clicking the thumbnail to the left hand side.
Download package for the template file is here

Enjoy

About Steve

Web Developer, IT enthusiast & PC Gamer.
This entry was posted in Code and tagged , , . Bookmark the permalink.

One Response to CSS3 XHTML Template

  1. Ian says:

    Not a bad little tutorial, thanks for that!

    Ian

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>