website design
New Website Live: UKVauxhallSpares.co.uk
0
I’m pleased that the UK Vauxhall Spares website is finished and published today. The site uses HTML, PHP, JQuery and CSS3.
More content to be added in the next few months to coincide with an Online ad campaign.
Make a background image into a link or make the whole DIV clickable
0<div onclick="location.href='http:/ / pmlmedia.co.uk';" style="cursor: pointer;"></ div>
…or you could use this CSS trick which makes a background image into a link…
Add a hyperlink in the div somewhere to place a text link in your div…
<a href=’http://pmlmedia.co.uk’ title=’Professional Website Development’ id=’pmlmedia-logo’>PMLMEDIA</a>
…then set the id of the link to be a block element, set to display the background image and set the text of the link to indent way off the screen….
#pmlmedia-logo {
background-image:url(images/logo.png);
display:block;
height:58px;
text-indent:-9999px;
width:200px;
}
Fix Page Shift with Overflow-y: hidden
0Ever had your page layout shift down when your page loads before the elements snap back into position?
Fix this by adding the ‘overflow:’ or ‘overflow-y:’ property to the wrapper that contains your elements that are jumping around onLoad and use the value ‘hidden’ or ‘scroll’ to stop your browser automatically setting this to ‘auto’.
#navwrapper {Overflow-y:hidden;}
Multiple instances of CurvyCorners on your web page
0To have multiple instances of CurvyCorners on a page you need to add all the DIVs that require curvy corners as Variables in the JavaScript in the Head of your document.
To add nice curvy corners to your layout, simply upload the curvycorners javascript to your site’s scriptfolder.
Then call the script library in the head of your document like this…
<script type=”text/JavaScript” src=”./scripts/curvycorners.js”></script>
…then run the script in your page by adding this script to the head of your document…Notice that “lsidebar” and “mainwrap” etc are the IDs of the DIVs that you want curvy.
<script type=”text/JavaScript”>
window.onload = function() {
var settings = {
tl: { radius: 8 },
tr: { radius: 8 },
bl: { radius: 8 },
br: { radius: 8 },
antiAlias: true
}
var divObj1 = document.getElementById(“lsidebar”);
var divObj2 = document.getElementById(“mainwrap”);curvyCorners(settings, divObj1, divObj2);
}
</script>
To add curves to other DIVs you need to just add another variable…e.g…
var divObj3 = document.getElementById(“div-id-here”);
…and add the name of the variable into the settings…e.g…
curvyCorners(settings, divObj1, divObj2, divObj3);
Use Mod Rewrite to append www to URLs
0
This is how to add www to the start of all your URLs in your website.
Simply edit your .htaccess file…
# Redirect adding leading www to root domain if not subdomain specified
RewriteCond %{HTTP_HOST} ^domain\.com
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]
You can also add a trailing slash to URL’s to increase performance. When a trailing slash is added to the end of a URL that does not end in a file extension, it tells the server to look only for that directory name.
rewriteCond $1 !/$
rewriteCond %{REQUEST_FILENAME}/ -d
rewriteRule (.+) http://www.domain.com/$1/ [R=301,L]
