My Template - Windows Vista Forum

ProCookie · #1 12-20-2007, 04:01 PM

Hey Guys, just to let you know my new web layout that i have been working on is available for anyone to download.

Its a fully valid XHTML 1.0 Strict template with a full CSS layout no tables, no bad code and no mess.

Compatible will all browsers fully customisable with a 200px sidebar and an 800px main content box.

So if your planning on making a new site but can be bothered with the lengthy process of writing all that code you can try my preset.

Use it as you please, all i ask is that you keep the design by procookie in the bottom corner.

If you would like the PSD files so you can customise the default graphics just ask, or you could just replace them its up to you.

Click here for a live demo

and here's the source code

Enjoy

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Free Webiste Template From ProCookie.co.uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content=""/>
<meta name="Keywords" content=""/> 
<meta name="author" content="Anthony Cook"/>

<style type="text/css">

/* Copyright Anthony Cook 2008 */ 

/* Body */

body {
	background-image:url(http://www.procookie.co.uk/images/background.jpg);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin:0px;
}


/* Layout */

.head {
	background:url(http://www.procookie.co.uk/images/header.png) repeat-x;
	width:100%;
	height:82px;
	text-align:center;
    display:block;
}

.inner-container {
	border: 2px solid #D7D7D2;
	background: #FFF;
	font-size: 11px;
	margin: 0 auto;
	padding: 10px;
	width: 1024px;
	
}

.main {
	border-top: 4px solid #FFF;
	padding: 8px 12px 0 0;
}

.navigation {
	float: left;
	width: 210px;
}

.content {
	float: right;
	width: 790px;
	padding-left:15px;
}

.footer {
	font: bold 1em sans-serif;
	text-align:right;
	margin-top: 5px;

}

.clearer {
	clear: both; 
	font-size: 0;
}

/* Navigation */

.nav {
	font-family:"Trebuchet MS",Arial,sans-serif;
	font-size:13px;
	font-weight:bold;
	color:#FFFFFF;
	word-spacing:15px;
	padding-top:15px;
	text-align:left;

}

.nav a:link {
	color: #FFFFFF;
	text-decoration: none;
}
.nav a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
.nav a:hover {
	text-decoration: none;
	color: #00FF00;
}
.nav a:active {
	text-decoration: none;
	color: #00FF00;
}

.navfont {
	background-color:#C7F5A5;
	border:#66FF00 1px;
	padding:5px;
	font-size:11px;
	font-weight:bold;
}


/* Headings */

h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:20px;
	color:#009900;
}

h2 {
	background-color:#C7F5A5;
	border:#009900 1px;
	padding:5px;
	font-size:11px;
	font-weight:bold;
}

h3 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
}

h3 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:italic;
}


/* Links */

a:link {
	color: #009900;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #009900;
}
a:hover {
	text-decoration: none;
	color: #00CC00;
}
a:active {
	text-decoration: none;
	color: #009900;
}


</style>

</head>

<body>

<div class="head nav">

<img src="http://www.procookie.co.uk/images/pro.png" alt="Website Logo" width="210" height="45" />

<span class="nav">
  <a href="http://www.procookie.co.uk/">Home</a> 
  <a href="http://www.procookie.co.uk/">Resources</a>
  <a href="http://www.procookie.co.uk/">Tutorials</a> 
  <a href="http://www.procookie.co.uk/">About</a> 
  <a href="http://www.procookie.co.uk/">Contact</a>  
  
  </span>
  
 </div>

<div class="inner-container">

<div class="navigation">

<div class="navfont">Sidebar Header</div>

<p>A 200px Sidebar with a 800px main content box all styled with CSS and no tables.</p>

<div class="navfont">Valid Code</div>

<p>Fully Valid XHTML 1.0 Strict and CSS Sytling.</p>

<div class="navfont">Comments</div>

<p>Comments in the source code for easy navigation.</p>

<div class="navfont">PSD Files Avalible</div>

<p>Phtoshop document files Avalible so you can customize the look anf feel of the template</p>

</div>
  
<div class="content">

<h2>Welcome To This Free XHTML 1.0 Strict Template</h2>

<p>You can use this template as you wish all i ask is that you leave the &quot;design by procookie&quot; link on the copyright information in the right hand corner of the screen. I would love to know how my template is being used so if you have time please contact me from the contact details avalible at <a href="http://www.procookie.co.uk">procookie.co.uk</a></p>
<p>Thank you for using my layout and good luck with your project.</p>
<p>ProCookie</p>
<p>&nbsp;</p>
<h2>Lorem ipsum </h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim   veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum   dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,   sunt in culpa qui officia deserunt mollit anim id est laborum</div>

<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" style="border:0;width:88px;height:31px"/></a>
        
 	<a href="http://jigsaw.w3.org/css-validator/">
  		<img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!" /> </a>
 </p>
        
  


</div>

<div class="clearer"></div>

<div class="footer">Copyright Your Name Design By <a href="http://www.procookie.co.uk">ProCookie</a></div>

</div>

</body>

</html>

crabby · #2 12-20-2007, 04:49 PM

Yum

*gobble gobble gobble*

*burp*

crabby

felix8406 · #3 12-20-2007, 05:36 PM

Looks good. Excellent job. I said before and will say it again, "Mr. ProCookie has talent."

ProCookie · #4 12-20-2007, 05:52 PM

thank you!!

Sandi · #5 12-21-2007, 05:07 PM

Nice graphics, and it looks great.

I would suggest using percentages for screen width instead of pixels though, I don't care to have a scrollbar on the bottom in 1024 screen mode.

Vistanoob · #6 12-21-2007, 05:24 PM

Right on!! Your blog is excellent too, so informative.

JoshW02@hotmail.co.uk · #7 12-21-2007, 06:17 PM

Sweet thanks I may use it if I ever make a website when I get my new laptop!

ProCookie · #8 12-21-2007, 07:20 PM

Thanks for you nice comments guys, Also Sandi what are the benefits of using % instead of pixels? I used pixels because of a 100% height bug in Firefox.

JoshW02@hotmail.co.uk · #9 12-21-2007, 07:25 PM

Who uses FF?

Vistanoob · #10 12-21-2007, 08:13 PM

I use Firefox, have used it since 2004 and have been perfectly happy with it. I find it faster. Lots use it you would be surprised.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

User:
Pass:
Remember Me?