Adsense Style Layout - Using The Divine Ratio
This is a PROGRESSIVE lesson. Here is the html and css for the tutorial. At each step UPDATE your html and css files to see the progressive changes to the web page. If your're too lazy or in a hurry just skip everything and go to step 11...that's the completed version
- step 1. Container div
- step 2. Top Banner div
- step 3. Top Adsense Ad code
- step 4. Adding Main Content div
- step 5. Adding Paragraghs to Main Content
- step 6. h1 and h2 Header
- step 7. Creating Navigation div
- step 8. Creating Links For Menu
- step 9. Category Headers For Menu
- step 10. Footer div
- step 11. Adsense - 336 X 280 block
Overview of Tutorial
Your not a web designer but you need to publish adsense websites so you can get rich. So..you still need your web site to look clear and intuitive, right? But you don't have a clue how to create a nice simple adsense web layout.
Without getting into silly and lengthy "graphic design discussions" we will provide a solution to create a simple effective, CSS driven web page using the "divine proportion or divine ratio" as a basis to calculate the width dimension of web page elements.
That sounds pretty "mystical" but don't worry - it's just a concept..a pretty powerful concept that creates order, balance and visual comfort to any design. The divine proportion is simply a ratio that allocates logical and visually pleasing graphical space to design elements. So, we'll use the divine proportion or divine ratio ( width/1.618) , for example to build a web page around an adsense ad. I'm sure DaVinci never intended it for that but what the hell...and remember...
Nobody Cares About Your Design!
Really, no one does, except you and other web designers perhaps. Boo hoo. Most people browse the web looking for information. They don't care if your web design is pretty and colorful.
The funny thing is if your web page layout page poorly designed, it's very likely your visitors will be "annoyed" because something is "not right" . Maybe the layout is so poorly designed or cluttered that they "hit the back button" pronto. This tutorial solves that problem - giving you a simple web layout that you can copy and paste and immediately display inbrowsers: IE6 and above, Mozilla as well as Safari
Our Adsense Web Structure
We'll build our template around the 468 pixel graphic banner . You'll need and adsense account to access to code for the 468x60 image ad.
Since the adsense banner width is fixed we'll build our page around the banner, using the divine ratio to calculate the major sections of the web page. Take a look at the basic web structure we'll be building:
It's a very simple 2 column layout with a top header and footer(footer not in the graphic but will be included in the actual page.) Notice the widths? These are not random dimensions but calculated using the divine ratio to establish a pleasing logical and balanced asymetrical look and feel - despite the simplicity within the design.
How to Follow This Tutorial
To follow through this tutorial you only create two main files - a .html file and a style sheet - style.css. Create a folder on your desktop - at each step simply overwrite the new code into each file to see the new changes. Mke sure you copy both files at each step.
We'll create the HTML and CSS for the containing element (div called container) to hold all web page elements - but how wide should it be?
We'll "back into" our width by simply taking 468 ( adsense banner width) x 1.618 ( divine ratio)= 757 pixels.
So our container will be 757 pixels wide.
Step 1. HTML and CSS to set up the basic container div
HTML - Copy and paste this into notepad as a .html file - name it anything relevant..
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
</div >
</body>
</html>
CSS Copy and paste this into a notepad file and name style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
We've aded background colors to the container elementto clearly define the graphical space - these can be taken out anytime. We also added the height selector to give initial volume to the design. We'll remove this later as the natural content will define the size of the container.
Step 2. Adding Top Banner div - HTML and CSS
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top"></div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#ccc;
}
Step 3. Adding The Top Adsense Ad Banner HTML and CSS
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#ccc;
}
div#top .adbanner{ float:right;
background:eee;
width:468px;
height:60px;
}
Note: you MUST have an adsense account to include real adsense code, simply copy and paste the adsense code per the above HTML instructions - ie..where it says"place your 468x280 image code here". If you don't, you can still follow through with the tutorial and build the web page.
Step 4. Adding Main Content div
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#ccc;
}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#dde;
}
Note: We added dummy text to the div called main. A div with no content would not display anything in the browser unless we gave it a height which we want to avoid. We want the div to expand to the size of the content. Stay tuned we'll make some cool adjustments to our content area...
Step 5. Adding Paragraghs to Main Content
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#ccc;
}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#dde;
}
p{
text-align:left;
line-height:18px;
margin:8px;
}
Note: Text align "left" and a bit of margin for "breathing room" was added to the paragraph.
Step 6. Adding h1 and h2 Header
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">
<h1>How To Do Something </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Planning Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Buying Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#ccc;
}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#dde;
}
p{
text-align:left;
line-height:18px;
margin:8px;
}
h1{
font-size:18px;
text-align:left;
margin:8px;
}
h2{
font-size:15px;
text-align:left;
margin:8px;
}
Note: we added a few paragraphs to demonstrate how div#main will stretch vertically when more content is added - in other words - the containing element stretches to accomodate the content - avoid setting the height property when content will be added frequently...
Step 7. Creating Navigation div
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">
<h1>How To Do Something </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Planning Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Buying Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
</div >
<div id="nav" >
nav menu goes here
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#ccc;
}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#dde;
}
p{
text-align:left;
line-height:18px;
margin:8px;
}
h1{
font-size:18px;
text-align:left;
margin:8px;
}
h2{
font-size:15px;
text-align:left;
margin:8px;
}
div#nav{ float:right; width:289px; background:#333; }
Step 8. Creating Links For Our Menu
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">
<h1>How To Do Something </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Planning Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Buying Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
</div >
<div id="nav" >
<ul >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#eee;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#ccc;
}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#dde;
}
p{
text-align:left;
line-height:18px;
margin:8px;
}
h1{
font-size:18px;
text-align:left;
margin:8px;
}
h2{
font-size:15px;
text-align:left;
margin:8px;
}
div#nav{ float:right; width:289px; background:#666; }
ul {width:289px;list-style:none;margin:0 0 2px 0;padding:0 0 0px 0;}
li{ text-align:left;margin:0;padding:2px 0 2px 0;text-indent:5px;}
a:link{color:#fff;font-weight:bold;text-decoration:none;}
a:visited{color:#fff;font-weight:bold;text-decoration:none;}
a:hover{color:#ddd;font-weight:normal;text-decoration:underline;}
Step 9. Category Headers For Your Menu
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">
<h1>How To Do Something </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Planning Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Buying Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Recommending Something </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
</div >
<div id="nav" >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#fff;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#fff;
}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#fff;
}
p{
text-align:left;
line-height:18px;
margin:8px;
}
h1{
font-size:18px;
text-align:left;
margin:8px;
}
h2{
font-size:15px;
text-align:left;
margin:8px;
}
div#nav{ float:right; width:289px; background:#fff; }
ul {width:289px;list-style:none;margin:0 0 2px 0;padding:0 0 0px 0;}
li{ text-align:left;margin:0;padding:2px 0 2px 0;text-indent:5px;}
a:link{color:#333;font-weight:bold;text-decoration:none;}
a:visited{color:#666;font-weight:bold;text-decoration:none;}
a:hover{color:#ccc;font-weight:normal;text-decoration:underline;}
.linkCategory {margin:0; padding:2px 0 2px 0; background:#eee;font-color:#333; font-weight:bold;font-size:13px;}
Note: To show a practical application of how a real menu might be used we stacked 3 menu categories. You can see that the html is the same for each category and is very "portable". Study the example to see the list is built into a menu. Also, we change the background colors to keep the page as uncluttered as possible.
Step 10. Adding The Footer div
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top">
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">
<h1>How To Do Something </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Planning Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Buying Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Recommending Something </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
</div >
<div id="nav" >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
</div >
<div id="footer" >
www.yourwebsite.com all rights reserved 2008
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#fff;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#fff;
}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#fff;
padding:0 0 15px 0;
}
p{
text-align:left;
line-height:18px;
margin:8px;
}
h1{
font-size:18px;
text-align:left;
margin:8px;
}
h2{
font-size:15px;
text-align:left;
margin:8px;
}
div#nav{ float:right; width:289px; background:#fff; }
ul {width:289px;list-style:none;margin:0 0 2px 0;padding:0 0 0px 0;}
li{ text-align:left;margin:0;padding:2px 0 2px 0;text-indent:5px;}
a:link{color:#333;font-weight:bold;text-decoration:none;}
a:visited{color:#666;font-weight:bold;text-decoration:none;}
a:hover{color:#ccc;font-weight:normal;text-decoration:underline;}
.linkCategory {margin:0; padding:2px 0 2px 0; background:#eee;font-color:#333; font-weight:bold;font-size:13px;}
div#footer{clear:both;margin:0 auto;padding:10px; width:500px; border-top:1px dotted #ddd;}
Note:
====Step 11. Adding the Adsense - 336 X 280 block plus page header
HTML- Update your .html file with this
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top"> <h1>www.yourwebsite.com</h1>
<div class="adbanner">place your 468x280 image code here.</div>
</div >
<div id="main">
<h1>How To Do Something </h1>
<p>copy and paste 336x280adsense code here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Planning Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Buying Something</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<h2> Recommending Something </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
</div >
<div id="nav" >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
<ul >
<li class="linkCategory" >LINK CATEGORY</li >
<li ><a href="#" >consectetuer adipiscing elit</a></li >
<li ><a href="#" >Mauris quam</a></li >
<li ><a href="#" >ipsum dolor sit amet</a></li >
<li ><a href="#" >Donec id lectus id sem venenatis</a></li >
</ul >
</div >
<div id="footer" >
www.yourwebsite.com all rights reserved 2008
</div >
</div >
</body>
</html>
CSS - Update style.css
body {
text-align:center;
font-family:verdana;
font-size:11px;
}
div#container {
margin:0 auto;
width:757px;
height:500px;
background:#fff;
}
div#top{
margin:0 auto;
width:757px;
height:100px;
background:#fff;
}
div#top h1{ float:left;width:285px;font-size:19px;margin:0;padding:0;}
div#top .adbanner{ float:right;
background:#eee;
width:468px;
height:60px;
}
div#main{ float:left;
width:468px;
background:#fff;
padding:0 0 15px 0;
}
p{
text-align:left;
line-height:18px;
margin:8px;
}
h1{
font-size:18px;
text-align:left;
margin:8px;
}
h2{
font-size:15px;
text-align:left;
margin:8px;
}
div#nav{ float:right; width:289px; background:#fff; }
ul {width:289px;list-style:none;margin:0 0 2px 0;padding:0 0 0px 0;}
li{ text-align:left;margin:0;padding:2px 0 2px 0;text-indent:5px;}
a:link{color:#333;font-weight:bold;text-decoration:none;}
a:visited{color:#666;font-weight:bold;text-decoration:none;}
a:hover{color:#ccc;font-weight:normal;text-decoration:underline;}
.linkCategory {margin:0; padding:2px 0 2px 0; background:#eee;font-color:#333; font-weight:bold;font-size:13px;}
div#footer{clear:both;margin:0 auto;padding:10px; width:500px; border-top:1px dotted #ddd;}
Note: you MUST have an adsense account to include real adsense code, simply copy and paste the adsense code per the above HTML instructions - ie..where it says"copy and paste 336x280adsense code here". If you don't, you can still follow through with the tutorial and build the web page.
Whoops...forgot to add the name of the website so we placed it up top - within the selector : div#top h1 .Adjustments were needed to prevent the contextual selector div#top h1 from inheriting the properties of the plain h1 tag. We needed to explicitly set margin and padding to"0" to prevent div#top h1 from colliding with the adsense ad directly to the right. Study the example...
Adsense Style Layout - Summary
That's it...a fully functional web page that is ready to display adsense ads.
Of course the next real challenge is picking a profitable niche and writing compelling, fascinating content that targets your niche and drives tons of traffic to your website.
Review the web building process: build web site free
Was this helpful? Leave a comment...
Please leave your comment...name or email is not required. If you leave your email we WILL respect your privacy and not spam you. We may update you occasionally with value added info related to web building, web design, CSS, HTML. Thanks!
Comments...
Comment posted on : 9/9/2008 10:31:01 PM
Awesome!! It took me like 3 minutes to, create a template on my laptop. I've been looking for a "how to make your own website" tutorial and this is one of the easiest...
poster: Stiv
--------------------------------------------------------
Comment posted on : 12/23/2009 10:43:27 PM
poster: inhoudsopgave
--------------------------------------------------------