File: //home/seopositiveltd.co.uk/tutorials-sub/category/htmlxhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>
html/xhtml « SEO Positive: SEO Tutorials, PPC Pay Per Click Tutorials, Web Design & Web Development Tutorials</title>
<link rel="canonical" href="https://www.seopositiveltd.co.uk/tutorials-sub/category/htmlxhtml" />
<link rel="stylesheet" href="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/style.css" type="text/css" media="screen"/>
<link rel="pingback" href="https://tutorials.seopositiveltd.co.uk/xmlrpc.php"/>
<!--[if IE 6]>
<link rel="stylesheet" href="/wp-content/themes/seopositive/ie6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/wp-content/themes/seopositive/ie7.css" type="text/css" media="screen" />
<![endif]-->
<script src="../../ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" id="contact-form-7-css" href="https://tutorials.seopositiveltd.co.uk/wp-content/plugins/contact-form-7/styles.css?ver=2.4.2" type="text/css" media="all"/>
<script type="text/javascript" src="https://tutorials.seopositiveltd.co.uk/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script>
<link rel="index" title="SEO Positive: SEO Tutorials, PPC Pay Per Click Tutorials, Web Design & Web Development Tutorials" href="https://tutorials.seopositiveltd.co.uk"/>
<script src="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/js/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body class="archive category category-htmlxhtml">
<div id="wrapper">
<div class="hidden"></div>
<div id="header">
<div class="hidden">
</div>
<div id="logo"><a href="https://www.seopositive.co.uk/"></a></div>
<div id="header-info">
<div class="menu-top-container"><ul id="menu-top" class="menu"><li id="menu-item-4228" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4228"><a href="https://my.seopositive.co.uk/">Client Login</a></li>
<li id="menu-item-4227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4227"><a href="https://www.seopositive.co.uk/careers.php">Careers</a></li>
<li id="menu-item-4229" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4229"><a href="https://www.seopositive.co.uk/partners.php">Partners</a></li>
</ul></div>
<div class="clear"></div>
<div class="call-us"> 0800 088 6000</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div id="content-container">
<div id="content" class="narrowcolumn" role="main">
<ul id="menu-main">
<li><a href="/">Home</a>
<ul class="first"><li><a href="/">Home</a></li></ul>
</li>
<li><a href="../../about-us">About us</a>
<ul><li><a href="../../about-us">About us</a></li></ul>
</li>
<li><a>Services</a>
<ul class="dropdown"><li><a>Services</a></li></ul>
<ul class="services-bg">
<ul>
<li><a href="../../search-engine-optimisation">Search Engine Optimisation</a></li>
<li><a href="../../pay-per-click">Pay Per Click</a></li>
<li><a href="https://www.webdesignpositive.co.uk/">Website Design</a></li>
<li><a href="../../website-design-portfolio">Design Portfolio</a></li>
</ul>
<ul>
<li><a href="../../email-marketing">Email Marketing</a></li>
<li><a href="../../reputation-management">Reputation Management</a></li>
<li><a href="../../link-building">Link Building</a></li>
<li><a href="../../hosting">Hosting</a></li>
</ul>
<div class="clear"></div>
</ul>
</li>
<li><a href="../../search-engine-optimisation">SEO Services</a>
<ul><li><a href="../../search-engine-optimisation">SEO Services</a></li></ul>
</li>
<li><a href="../../pay-per-click">PPC Services</a>
<ul><li><a href="../../pay-per-click">PPC Services</a></li></ul>
</li>
<li><a>Testimonials</a>
<ul class="dropdown"><li><a>Testimonials</a></li></ul>
<ul class="testimonials-bg">
<ul>
<li><a href="../../seo-testimonials">Search Engine Optimisation</a></li>
<li><a href="../../ppc-testimonials">Pay Per Click</a></li>
<li><a href="../../web-design-testimonials">Website Design</a></li>
</ul>
<div class="clear"></div>
</ul>
</li>
<li><a href="../../awards">Awards</a>
<ul><li><a href="../../awards">Awards</a></li></ul>
</li>
<li><a href="../../contact-us">Contact us</a>
<ul><li><a href="../../contact-us">Contact us</a></li></ul>
</li>
<li><a>Blog</a>
<ul class="last"><li><a href="../../blog">Blog</a></li></ul>
</li>
</ul>
<div id="main-content">
<div id="content-left">
<div class="post-677 post type-post hentry category-htmlxhtml category-javascript tag-image-change tag-select-field" id="post-677">
<h2><a href="/" rel="bookmark" title="Permanent Link to Change Image Using Select Box and Javascript">Change Image Using Select Box and Javascript</a></h2>
<hr/>
<p><small>March 17th, 2011 <!-- by Peter --></small></p>
<div class="entry">
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><iframe src="https://api.tweetmeme.com/button.js?url=http%3A%2F%2Ftutorials.seopositiveltd.co.uk%2Fchange-image-using-select-box-and-javascript.php&style=normal" height="61" width="50" frameborder="0" scrolling="no"></iframe></div>
<p>This tutorial will show you how to change an image placeholder into a different image using a simple select field and a small bit of Javascript.</p>
<p>This could be used for instance on a product page where you have a different colour select option for an item and you want the image to change to match the select box.</p>
<p>First have your images ready, I have a blank.gif image, which is the main image that shows on page load, then I have red.gif and blue.gif that the select box will change it to.</p>
<p>Now add the following javascript code to your header:</p>
<p></p>
<p>This javascript function bascially sets up two variables: <strong>image </strong>and <strong>change</strong>. It sets the <strong>image </strong>variable to the id: <strong>imageToSwap</strong> and the <strong>change </strong>variable to the id: <strong>colour</strong>. It then makes the object’s search path that has the <strong>image </strong> ID the same value as the value of the object that has the <strong>colour </strong>id.</p>
<p>So in the page you will need to add the following image placeholder which has the <strong>imageToSwap</strong> id and the search path is whatever your default image is:</p>
<p></p>
<p>Now all you need is to add the select box with the <strong>colour</strong> id as follows:</p>
<p></p>
<p>Now when you select either red or blue the image will change to that of its option value.</p>
<p><strong>Note:</strong> You will need to add the full path if the image is not in the same directory.</p>
</div>
<p class="postmetadata">Tags: <a href="/" rel="tag">image change</a>, <a href="../../tutorials-sub/tag/select-field" rel="tag">select field</a><br/> Posted in <a href="../../tutorials-sub/category/htmlxhtml" title="View all posts in html/xhtml" rel="category tag">html/xhtml</a>, <a href="../../tutorials-sub/category/javascript" title="View all posts in javascript" rel="category tag">javascript</a></p>
</div>
<div class="post-653 post type-post hentry category-photoshop category-uncategorized category-css category-htmlxhtml tag-line-break" id="post-653">
<h2><a href="/" rel="bookmark" title="Permanent Link to Create Subtle Indented Line Break">Create Subtle Indented Line Break</a></h2>
<hr/>
<p><small>March 10th, 2011 <!-- by Peter --></small></p>
<div class="entry">
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><iframe src="https://api.tweetmeme.com/button.js?url=http%3A%2F%2Ftutorials.seopositiveltd.co.uk%2Fcreate-subtle-indented-line-break.php&style=normal" height="61" width="50" frameborder="0" scrolling="no"></iframe></div>
<p>Using Photoshop and CSS this tutorial will show you how to create a simple line break that appears indented, like that shown below, or like the ones on this website:</p>
<p></p>
<p>First in your photoshop paste a screenshot of your website, or simply have the background that the line break will sit on viewable. Note: This will not work on a white background, you will need to simply create a grey line break for that.</p>
<p>Now create a <strong>new layer</strong>, select the <strong>pencil tool</strong> on <strong>1px brush size</strong> and select a foreground colour that is slightly darker than your current background colour. In the example the background colour is <strong>#17a884</strong> and the foreground colour is <strong>#096a4f</strong>.</p>
<p>While holding down <strong>Shift</strong> draw a horizontal line. Now press <strong>Alt + Down arrow</strong> to copy this layer, press <strong>CTRL + U</strong> and bring the <strong>lightness </strong>to <strong>+100</strong> to make into solid white. Now you can simply bring the opacity of that new white line layer down to suit, the example is <strong>55%</strong>, but this will vary depending on how dark the background is.</p>
<p>Tweak the opacity and possibly darken the first layer to suit and once happy you can then add the css for your line break, as shown below:</p>
<p><strong><code>hr, .linebreak {<br/>
width: 100%;<br/>
clear: both;<br/>
border: none;<br/>
border-top: 1px solid #096a4f;<br/>
background: #7fb1a3;<br/>
height: 1px;<br/>
font-size: 1px;<br/>
margin: 15px 0 15px 0;<br/>
}</code></strong></p>
<p>This is the ideal css to ensure the linebreak works correctly and this can then be used with either the <strong>hr</strong> tag or a div of <strong>class=”linebreak”</strong>. Simply flatten your photoshop image and colour pick the colours, change the <strong>background colour</strong> to the white line colour and the <strong>border-top</strong> colour to the first coloured layer.</p>
</div>
<p class="postmetadata">Tags: <a href="/" rel="tag">line break</a><br/> Posted in <a href="../../tutorials-sub/category/photoshop" title="View all posts in Photoshop" rel="category tag">Photoshop</a>, <a href="../../tutorials-sub/category/uncategorized" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a>, <a href="../../tutorials-sub/category/css" title="View all posts in css" rel="category tag">css</a>, <a href="../../tutorials-sub/category/htmlxhtml" title="View all posts in html/xhtml" rel="category tag">html/xhtml</a></p>
</div>
<div class="post-631 post type-post hentry category-photoshop category-uncategorized category-css category-htmlxhtml tag-css-sprites" id="post-631">
<h2><a href="../../tutorials-sub/combine-images-into-css-sprites" rel="bookmark" title="Permanent Link to Combine Images Into CSS Sprites">Combine Images Into CSS Sprites</a></h2>
<hr/>
<p><small>March 8th, 2011 <!-- by Peter --></small></p>
<div class="entry">
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><iframe src="https://api.tweetmeme.com/button.js?url=http%3A%2F%2Ftutorials.seopositiveltd.co.uk%2Fcombine-images-into-css-sprites.php&style=normal" height="61" width="50" frameborder="0" scrolling="no"></iframe></div>
<p>Combining images into single files and pointing to them using CSS background positioning can speed up your site, stop the need to preload hover images and keeps files more compact. This short tutorial will show how this technique is done.</p>
<p>Firstly when saving your images, create a new document and place each one of your images onto this ensuring they all sit next to one another, as this makes it easier to point to its position in the css, like that shown below.</p>
<p></p>
<p>Now you need to point to the image in your CSS and then you can position the image to choose your desired one.</p>
<p><strong><br/>
<code>#my-image {<br/>
background: url("sprite.jpg") no-repeat;<br/>
background-position: 0 0;<br/>
width: 100px;<br/>
height: 100px;<br/>
}</code></strong></p>
<p>This CSS will show only Image 1 in the sprite, as the <strong>background-position: 0 0</strong>, is pointing to the top left of the image and the size of each of the images are <strong>100px x 100px</strong>.</p>
<p>If I wanted to show <strong>Image 5</strong>, it would be <strong>background-position: 100px -100px</strong>. So the <strong>backgound-position</strong> will basically go <strong>100px horizontally</strong> along the image and then <strong>-100px vertically</strong> as image 5 is below image 1. If Image 4 was 20px in width than it would have been <strong>background-position: 20px -100px</strong>.</p>
<p>You need to find out the size of each of the images in the sprite to ensure the correct positioning, width and height is entered.</p>
</div>
<p class="postmetadata">Tags: <a href="/" rel="tag">css sprites</a><br/> Posted in <a href="../../tutorials-sub/category/photoshop" title="View all posts in Photoshop" rel="category tag">Photoshop</a>, <a href="../../tutorials-sub/category/uncategorized" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a>, <a href="../../tutorials-sub/category/css" title="View all posts in css" rel="category tag">css</a>, <a href="../../tutorials-sub/category/htmlxhtml" title="View all posts in html/xhtml" rel="category tag">html/xhtml</a></p>
</div>
<div class="post-610 post type-post hentry category-htmlxhtml category-jquery category-javascript tag-anchor-points" id="post-610">
<h2><a href="../../tutorials-sub/slow-page-scroll-with-jquery-anchors" rel="bookmark" title="Permanent Link to Slow Page Scroll With JQuery & Anchors">Slow Page Scroll With JQuery & Anchors</a></h2>
<hr/>
<p><small>March 1st, 2011 <!-- by Peter --></small></p>
<div class="entry">
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><iframe src="https://api.tweetmeme.com/button.js?url=http%3A%2F%2Ftutorials.seopositiveltd.co.uk%2Fslow-page-scroll-with-jquery-anchors.php&style=normal" height="61" width="50" frameborder="0" scrolling="no"></iframe></div>
<p>This tutorial will show how to create anchor links and using some jquery we will make those links into a nice slow tansition instead of jumping between anchors.</p>
<p>Firstly create your anchors points in your html as shown below:</p>
<p></p>
<p>To test it works simply put a div in the middle with a height larger than your screen size, like that below:</p>
<p></p>
<p>When you view this html code in the browser it should just jump from the top to the bottom and vice versa when you click the links. To make the links into a smooth transition you will first need to point to the latest version of jquery, <a href="../../ajax/libs/jquery/1.4.2/jquery.min.js" target="_blank">click here</a> to download.</p>
<p>You now need to create a new javascript file and add the following code, <a href="https://tutorials.seopositive.co.uk/wp-content/uploads/2011/03/smoothscrolling.js" target="_blank">click here</a> to view the code.</p>
<p>You can also adjust the speed of the transition. Simply change the <strong>ss.STEPS</strong> at the bottom of the code to a higher amount to slow the transition and a lower amount to speed it up, it is currently set at 50.</p>
</div>
<p class="postmetadata">Tags: <a href="/" rel="tag">anchor points</a><br/> Posted in <a href="../../tutorials-sub/category/htmlxhtml" title="View all posts in html/xhtml" rel="category tag">html/xhtml</a>, <a href="../../tutorials-sub/category/jquery" title="View all posts in jQuery" rel="category tag">jQuery</a>, <a href="../../tutorials-sub/category/javascript" title="View all posts in javascript" rel="category tag">javascript</a></p>
</div>
<div class="post-587 post type-post hentry category-photoshop category-css category-htmlxhtml category-website-design tag-css-position tag-float-image" id="post-587">
<h2><a href="/" rel="bookmark" title="Permanent Link to Float an Image in The Corner of a Website">Float an Image in The Corner of a Website</a></h2>
<hr/>
<p><small>February 22nd, 2011 <!-- by Peter --></small></p>
<div class="entry">
<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><iframe src="https://api.tweetmeme.com/button.js?url=http%3A%2F%2Ftutorials.seopositiveltd.co.uk%2Ffloat-an-image-in-the-corner-of-a-website.php&style=normal" height="61" width="50" frameborder="0" scrolling="no"></iframe></div>
<p>This tutorial will show how to make an image float in the corner of a website, for instance, to highlight a feature or button, like that shown below.</p>
<p></p>
<p>First create your corner image and it’s best to create the image as a <strong>transparent png</strong> so that it can float on top of the page on a low res screen without looking odd (unless it is a solid image anyway).</p>
<p></p>
<p>Now open your <strong>css file </strong>and you will need the following css for your image.</p>
<p><code><strong>#float-image {<br/>
position: absolute;<br/>
top: 0;<br/>
right: 0;<br/>
width: 114px;<br/>
height: 118px;<br/>
background: url(images/misc/image-name.png) no-repeat;<br/>
display: block;<br/>
}</strong></code></p>
<p>This code will make whatever you set as<strong> id=float-image</strong> to be position absolute on the page to the top right corner, you may also need a <strong>z-index</strong> of say <strong>100 </strong>encase the image floats below any other divs.</p>
<p>If you want the image to constantly be fixed at the top right corner even when scrolling then simply change <strong>position: absolute</strong> to <strong>position: fixed</strong>.</p>
</div>
<p class="postmetadata">Tags: <a href="/" rel="tag">css position</a>, <a href="/" rel="tag">float image</a><br/> Posted in <a href="../../tutorials-sub/category/photoshop" title="View all posts in Photoshop" rel="category tag">Photoshop</a>, <a href="../../tutorials-sub/category/css" title="View all posts in css" rel="category tag">css</a>, <a href="../../tutorials-sub/category/htmlxhtml" title="View all posts in html/xhtml" rel="category tag">html/xhtml</a>, <a href="../../tutorials-sub/category/website-design" title="View all posts in website design" rel="category tag">website design</a></p>
</div>
<div class="navigation">
<div class="alignleft"><p><a href="/">« Older Entries</a></p></div>
<div class="alignright"><p></p></div>
</div>
<div class="clear"></div>
<hr/>
</div>
<div id="sidebar">
<h3 class="widget-title">Categories</h3> <ul>
<li class="cat-item cat-item-10"><a href="../../tutorials-sub/category/apache" title="View all posts filed under apache">apache</a>
</li>
<li class="cat-item cat-item-3"><a href="../../tutorials-sub/category/brain-candy" title="View all posts filed under Brain Candy">Brain Candy</a>
</li>
<li class="cat-item cat-item-214"><a href="../../tutorials-sub/category/cms" title="View all posts filed under CMS">CMS</a>
</li>
<li class="cat-item cat-item-66"><a href="../../tutorials-sub/category/other-technology/cold-fusion" title="View all posts filed under cold fusion">cold fusion</a>
</li>
<li class="cat-item cat-item-29"><a href="../../tutorials-sub/category/command-line-editors" title="View all posts filed under Command Line Editors">Command Line Editors</a>
</li>
<li class="cat-item cat-item-206"><a href="../../tutorials-sub/category/pay-per-click-ppc/conversion-tracking-pay-per-click-ppc" title="View all posts filed under Conversion Tracking">Conversion Tracking</a>
</li>
<li class="cat-item cat-item-11"><a href="../../tutorials-sub/category/css" title="View all posts filed under css">css</a>
</li>
<li class="cat-item cat-item-133"><a href="../../tutorials-sub/category/pay-per-click-ppc/display-network" title="View all posts filed under Display Network">Display Network</a>
</li>
<li class="cat-item cat-item-174"><a href="../../tutorials-sub/category/google-1" title="View all posts filed under Google +1">Google +1</a>
</li>
<li class="cat-item cat-item-132"><a href="../../tutorials-sub/category/pay-per-click-ppc/google-adwords-2" title="View all posts filed under Google Adwords">Google Adwords</a>
</li>
<li class="cat-item cat-item-115"><a href="../../tutorials-sub/category/web-analytics/google-analytics" title="View all posts filed under google analytics">google analytics</a>
</li>
<li class="cat-item cat-item-102"><a href="../../tutorials-sub/category/shopping-feeds/google-product-feed" title="View all posts filed under Google Product Feed">Google Product Feed</a>
</li>
<li class="cat-item cat-item-190"><a href="../../tutorials-sub/category/shopping-feeds/google-shopping-shopping-feeds" title="View all posts filed under Google Shopping">Google Shopping</a>
</li>
<li class="cat-item cat-item-200"><a href="../../tutorials-sub/category/google-webmaster" title="View all posts filed under Google Webmaster">Google Webmaster</a>
</li>
<li class="cat-item cat-item-12 current-cat"><a href="../../tutorials-sub/category/htmlxhtml" title="View all posts filed under html/xhtml">html/xhtml</a>
</li>
<li class="cat-item cat-item-128"><a href="../../tutorials-sub/category/illustrator" title="View all posts filed under Illustrator">Illustrator</a>
</li>
<li class="cat-item cat-item-13"><a href="../../tutorials-sub/category/javascript" title="View all posts filed under javascript">javascript</a>
</li>
<li class="cat-item cat-item-42"><a href="../../tutorials-sub/category/joomla" title="View all posts filed under joomla">joomla</a>
</li>
<li class="cat-item cat-item-22"><a href="../../tutorials-sub/category/jquery" title="View all posts filed under jQuery">jQuery</a>
</li>
<li class="cat-item cat-item-21"><a href="../../tutorials-sub/category/jquery-tutorial" title="View all posts filed under jQuery Tutorial">jQuery Tutorial</a>
</li>
<li class="cat-item cat-item-27"><a href="../../tutorials-sub/category/linux" title="View all posts filed under Linux">Linux</a>
</li>
<li class="cat-item cat-item-41"><a href="../../tutorials-sub/category/mootools" title="View all posts filed under mootools">mootools</a>
</li>
<li class="cat-item cat-item-14"><a href="../../tutorials-sub/category/mysql" title="View all posts filed under mysql">mysql</a>
</li>
<li class="cat-item cat-item-71"><a href="../../tutorials-sub/category/mysql/mysqli" title="View all posts filed under MySQLi">MySQLi</a>
</li>
<li class="cat-item cat-item-131"><a href="../../tutorials-sub/category/pay-per-click-ppc" title="View all posts filed under Pay Per Click PPC">Pay Per Click PPC</a>
</li>
<li class="cat-item cat-item-67"><a href="../../tutorials-sub/category/other-technology/perl" title="View all posts filed under perl">perl</a>
</li>
<li class="cat-item cat-item-19"><a href="../../tutorials-sub/category/photoshop" title="View all posts filed under Photoshop">Photoshop</a>
</li>
<li class="cat-item cat-item-9"><a href="../../tutorials-sub/category/php" title="View all posts filed under php">php</a>
</li>
<li class="cat-item cat-item-51"><a href="../../tutorials-sub/category/php/php-framework" title="View all posts filed under php framework">php framework</a>
</li>
<li class="cat-item cat-item-69"><a href="../../tutorials-sub/category/php/programming-php" title="View all posts filed under Programming PHP">Programming PHP</a>
</li>
<li class="cat-item cat-item-169"><a href="../../tutorials-sub/category/robots-txt" title="View all posts filed under robots.txt">robots.txt</a>
</li>
<li class="cat-item cat-item-134"><a href="../../tutorials-sub/category/pay-per-click-ppc/search-network" title="View all posts filed under Search Network">Search Network</a>
</li>
<li class="cat-item cat-item-23"><a href="../../tutorials-sub/category/seo" title="View all posts filed under seo">seo</a>
</li>
<li class="cat-item cat-item-101"><a href="../../tutorials-sub/category/shopping-feeds" title="View all posts filed under Shopping Feeds">Shopping Feeds</a>
</li>
<li class="cat-item cat-item-1"><a href="../../tutorials-sub/category/uncategorized" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
<li class="cat-item cat-item-28"><a href="../../tutorials-sub/category/unix" title="View all posts filed under Unix">Unix</a>
</li>
<li class="cat-item cat-item-114"><a href="../../tutorials-sub/category/web-analytics" title="View all posts filed under web analytics">web analytics</a>
</li>
<li class="cat-item cat-item-62"><a href="../../tutorials-sub/category/website-design" title="View all posts filed under website design">website design</a>
</li>
<li class="cat-item cat-item-39"><a href="../../tutorials-sub/category/wordpress" title="View all posts filed under wordpress">wordpress</a>
</li>
</ul>
<h3 class="widget-title">Archives</h3> <ul>
<li><a href="../../tutorials-sub/2011/11" title="November 2011">November 2011</a></li>
<li><a href="../../tutorials-sub/2011/10" title="October 2011">October 2011</a></li>
<li><a href="../../tutorials-sub/2011/09" title="September 2011">September 2011</a></li>
<li><a href="../../tutorials-sub/2011/08" title="August 2011">August 2011</a></li>
<li><a href="../../tutorials-sub/2011/07" title="July 2011">July 2011</a></li>
<li><a href="../../tutorials-sub/2011/04" title="April 2011">April 2011</a></li>
<li><a href="../../tutorials-sub/2011/03" title="March 2011">March 2011</a></li>
<li><a href="../../tutorials-sub/2011/02" title="February 2011">February 2011</a></li>
<li><a href="../../tutorials-sub/2011/01" title="January 2011">January 2011</a></li>
<li><a href="../../tutorials-sub/2010/12" title="December 2010">December 2010</a></li>
<li><a href="../../tutorials-sub/2010/11" title="November 2010">November 2010</a></li>
<li><a href="../../tutorials-sub/2010/10" title="October 2010">October 2010</a></li>
<li><a href="../../tutorials-sub/2010/09" title="September 2010">September 2010</a></li>
<li><a href="../../tutorials-sub/2010/08" title="August 2010">August 2010</a></li>
<li><a href="../../tutorials-sub/2010/07" title="July 2010">July 2010</a></li>
<li><a href="../../tutorials-sub/2010/06" title="June 2010">June 2010</a></li>
<li><a href="../../tutorials-sub/2010/05" title="May 2010">May 2010</a></li>
</ul>
<h3 class="widget-title">Blogroll</h3>
<ul class="xoxo blogroll">
<li><a href="https://www.seopositive.co.uk/cheap-seo.php">Cheap SEO</a></li>
<li><a href="https://www.integratedcctv.co.uk/" title="Integrated CCTV, Security, news and reviews">Integrated CCTV</a></li>
<li><a href="https://www.payperclick.org/">Pay Per Click Management</a></li>
<li><a href="https://www.payday-loans.co.uk/">Payday Loans</a></li>
<li><a href="https://www.seopositive.co.uk/pay-per-click.php">PPC Marketing</a></li>
<li><a href="https://www.searchengineoptimisation.org.uk/">Search Engine Optimisation</a></li>
<li><a href="https://www.seopositive.co.uk/">SEO</a></li>
<li><a href="https://www.seopositive.co.uk/blog">SEO Blog</a></li>
<li><a href="https://www.seopositive.net/">SEO Positive</a></li>
<li><a href="https://my.seopositive.co.uk/">SEO Positive</a></li>
<li><a href="https://news.seopositive.co.uk/">SEO Positive News</a></li>
<li><a href="https://tutorials.seopositive.co.uk/">SEO Positive Tutorials</a></li>
<li><a href="https://www.promocodes.co.uk/">voucher codes website</a></li>
<li><a href="https://www.seopositive.co.uk/website-design.php">Website Design Company</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer" role="contentinfo">
<div id="footer-content">
<div class="footer-section">
<h3>Additional Pages</h3>
<div class="menu-additional-pages-container"><ul class="menu" id="menu-additional-pages"><li class="menu-item menu-item-type-custom menu-item-645" id="menu-item-645"><a href="../../my-sub/index">Client Login</a></li>
<li class="menu-item menu-item-type-post_type menu-item-44" id="menu-item-44"><a href="../../terms">Terms & Conditions</a></li>
<li class="menu-item menu-item-type-post_type menu-item-270" id="menu-item-270"><a href="../../privacy-policy">Privacy Policy</a></li>
<li class="menu-item menu-item-type-custom menu-item-2699" id="menu-item-2699"><a href="../../tutorials-sub/index">Tutorials</a></li>
</ul></div></div>
<div class="footer-section">
<h3>Sitemaps & Feeds</h3>
<div class="menu-sitemaps-feeds-container"><ul class="menu" id="menu-sitemaps-feeds"><li class="menu-item menu-item-type-post_type menu-item-697" id="menu-item-697"><a href="../../sitemap">Sitemap</a></li>
<li class="menu-item menu-item-type-custom menu-item-699" id="menu-item-699"><a href="https://www.seopositiveltd.co.uk/sitemap.xml">XML Sitemap</a></li>
<li class="menu-item menu-item-type-custom menu-item-2740" id="menu-item-2740"><a href="../../blog">Blog</a></li>
<li class="menu-item menu-item-type-custom menu-item-2761" id="menu-item-2761"><a href="../../news-sub/index">News</a></li>
</ul></div></div>
<div class="footer-section footer-section-big">
<h3>Our Address</h3>
<p><strong>Chelmsford Head Office</strong><br/>Milstrete House<br/>29 New Street<br/>Chelmsford<br/>CM1 1NT</p>
</div>
<div class="footer-section">
<h3> </h3>
<p><strong>London Head Office</strong><br/>3rd Floor<br/>1 Ropemaker Street<br/>London<br/>EC2Y 9HT</p>
</div>
<div class="footer-section footer-section-small no-padding-right">
<h3>Social Links</h3>
<a href="/" target="_blank" rel="nofollow"></a>
<a href="https://twitter.com/seopositiveltd" target="_blank" rel="nofollow"></a>
<a href="https://www.youtube.com/user/seopositive" target="_blank" rel="nofollow"></a>
<h3>W3C Compliant</h3>
</div>
<div class="clear"></div>
</div>
<div id="footer-btm">
<p>© Copyright 2010 SEO Positive Ltd | Registered company in England & Wales | Company Number: 06643590 | VAT Number: 974449769</p>
</div>
</div>
</div>
<script src="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/js/jqueryui.js" type="text/javascript"></script>
<script src="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/js/jquery.anythingslider.js" type="text/javascript"></script>
<script src="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/js/mac-screen-slider.js" type="text/javascript"></script>
<script src="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/js/class.horinaja.jquery.js" type="text/javascript"></script>
<script src="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/js/javascript.js" type="text/javascript"></script>
<script src="https://tutorials.seopositiveltd.co.uk/wp-content/themes/seopositive/js/read-more.js" type="text/javascript"></script>
<script type="text/javascript" src="https://tutorials.seopositiveltd.co.uk/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.47"></script>
<script type="text/javascript" src="https://tutorials.seopositiveltd.co.uk/wp-content/plugins/contact-form-7/scripts.js?ver=2.4.2"></script>
</body>
</html>