The code below offers a simple example, which you can build upon, of using jQuery to validate your forms. I have added a few comments in green to explain what is going on.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Validate form</title>
<!-- Get jQuery from Google -->
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<!-- Get the validation library from Microsoft -->
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
/* apply validation rules to myform */
$("#myform").validate(
{
rules:
{
/* apply a simple rule to contactname */
contactname: "required",
/* apply more rules to email */
email:
{
required: true,
email: true
}
},
/* provide special messages to contactname */
messages:
{
contactname: "Please enter a contact name"
}
});
});
</script>
<style type="text/css">
body
{
font-family:sans-serif;
}
</style>
</head>
<body>
<form method="post" action="" id="myform">
<label for="name">Name:</label>
<!-- Adding the class "required" works makes coincides with the jQuery call for this field -->
<input type="text" size="20" name="contactname" id="contactname" value="" class="required" /><br />
<label for="email">Email:</label>
<!-- Adding the class "required email" works makes coincides with the jQuery call for this field -->
<input type="text" size="20" name="email" id="email" value="" class="required email" /><br />
<label for="message">Message:</label>
<!-- No validation required for the message -->
<textarea rows="5" cols="20" name="message" id="message"></textarea><br />
<input type="submit" value="Submit" name="submit" />
</form>
</body>
</html>
Friday, 27 August 2010
CSS Box gradient - cross browser
Here is a nice small example of how to get box gradients (using CSS) working across most browsers. Don't be put off by the silly stuff you need for IE. Just replace the colour values.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box gradient</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
min-height:100px;
width:400px;
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>Box gradient</h1>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box gradient</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
min-height:100px;
width:400px;
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>Box gradient</h1>
</div>
</body>
</html>
Rotating boxes without images
Most rotating box CSS examples do not work cross browser. I like to try and avoid simulating this with, for example, pictures created at an angle in a good graphics package (like GIMP). Today however, I found this web page http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Not all the functionality works at this stage, but enough to get going. You'll need to get hold of the JavaScript libraries first. You can also take off the backgrounds and just use the technique for rotating text. My example below is a simple one.
See demo.
<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>
Wednesday, 25 August 2010
Simple layout #2
Here is the second design template. There is no real content area. I've left it down to you how you want the main content to display.
See demo.
Well, here goes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
margin-left:120px;
font-size:4em;
font-weight:lighter;
color:#FFFFFF;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
}
#nav ul
{
margin:0 auto;
width:920px;
}
#nav ul li
{
float:left;
list-style:none;
}
#nav ul li a
{
width: 100px;
height:28px;
padding-top:8px;
padding-bottom:4px;
padding-left:30px;
padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li a:hover
{
background:#FF0000;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
<div id="footer">
<div id="nav">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
</div>
</div>
</body>
</html>
See demo.
Well, here goes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
margin-left:120px;
font-size:4em;
font-weight:lighter;
color:#FFFFFF;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
}
#nav ul
{
margin:0 auto;
width:920px;
}
#nav ul li
{
float:left;
list-style:none;
}
#nav ul li a
{
width: 100px;
height:28px;
padding-top:8px;
padding-bottom:4px;
padding-left:30px;
padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li a:hover
{
background:#FF0000;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
<div id="footer">
<div id="nav">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
</div>
</div>
</body>
</html>
Thursday, 19 August 2010
How to add interesting fonts to your page
You must have seen websites where the title or main text had a great font and thought, that's what I want for my site. Well here is how to do it.
See demo.
The first thing you need is to find the font that you want to use. I would recommend sites such as http://openfontlibrary.org/ Here at least you shouldn't get into licensing trouble. Once you have identified the font you'd like to use, you need to download it. You will probably get a .ttf file which is fine.
Not all browsers handle fonts in the same way so you need to have multiple formats of the font and the necessary code to embed it in your page reliably. To do this we use fontsquirrel fontface generator at http://www.fontsquirrel.com/fontface/generator. Check the 'Agreement' box first. Click on the 'Add fonts' button and upload your font. You will then be returned with a kit. The kit contains the fonts in all the formats you need and the necessary CSS code you need to embed it in your page.
Here is an example of the results:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Nice fonts</title>
<style type="text/css">
@font-face
{
font-family: 'KarmaRegular';
src: url('fonts/karma-webfont.eot');
src: local('☺'), url('fonts/karma-webfont.woff') format('woff'), url('fonts/karma-webfont.ttf') format('truetype'), url('fonts/karma-webfont.svg#webfont4iIQLJby') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-family: 'KarmaRegular';
font-size:4em;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
See demo.
The first thing you need is to find the font that you want to use. I would recommend sites such as http://openfontlibrary.org/ Here at least you shouldn't get into licensing trouble. Once you have identified the font you'd like to use, you need to download it. You will probably get a .ttf file which is fine.
Not all browsers handle fonts in the same way so you need to have multiple formats of the font and the necessary code to embed it in your page reliably. To do this we use fontsquirrel fontface generator at http://www.fontsquirrel.com/fontface/generator. Check the 'Agreement' box first. Click on the 'Add fonts' button and upload your font. You will then be returned with a kit. The kit contains the fonts in all the formats you need and the necessary CSS code you need to embed it in your page.
Here is an example of the results:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Nice fonts</title>
<style type="text/css">
@font-face
{
font-family: 'KarmaRegular';
src: url('fonts/karma-webfont.eot');
src: local('☺'), url('fonts/karma-webfont.woff') format('woff'), url('fonts/karma-webfont.ttf') format('truetype'), url('fonts/karma-webfont.svg#webfont4iIQLJby') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-family: 'KarmaRegular';
font-size:4em;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Wednesday, 18 August 2010
Simple layout #1
Welcome to the first in a series of simple layouts which you I would like to share with you. Do what you will with them, just remember us when you need a new website. We like to keep things simple, fast and readable. Sadly the bottom corners of the right hand div don't display correctly in IE. Not even using CSSPIE, but as this is only an example I though it best not to add any code to work. It would only clutter the important parts up.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple layout 1</title>
<style type="text/css">
body
{
margin:0;
font-family:Georgia, serif;
background:#C23F67;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
}
#leftHand, #rightHand
{
float:left;
}
#leftHand
{
width:600px;
}
#rightHand
{
width:320px;
background:#000000;
min-height:400px;
margin-bottom:20px;
position:relative;
border-radius:0 0 20px 20px;
behavior:url(scripts/PIE.htc);
}
#footer
{
clear:left;
width:100%;
min-height:100px;
border-top:1px solid #FFFFFF;
}
#logo
{
font-style:italic;
font-size:20em;
text-align:center;
margin:90px;
}
h1
{
margin-top:40px;
font-size:6em;
font-weight:lighter;
}
p
{
text-align:justify;
margin-right:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftHand">
<h1>header</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="rightHand">
<span id="logo">I</span>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple layout 1</title>
<style type="text/css">
body
{
margin:0;
font-family:Georgia, serif;
background:#C23F67;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
}
#leftHand, #rightHand
{
float:left;
}
#leftHand
{
width:600px;
}
#rightHand
{
width:320px;
background:#000000;
min-height:400px;
margin-bottom:20px;
position:relative;
border-radius:0 0 20px 20px;
behavior:url(scripts/PIE.htc);
}
#footer
{
clear:left;
width:100%;
min-height:100px;
border-top:1px solid #FFFFFF;
}
#logo
{
font-style:italic;
font-size:20em;
text-align:center;
margin:90px;
}
h1
{
margin-top:40px;
font-size:6em;
font-weight:lighter;
}
p
{
text-align:justify;
margin-right:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftHand">
<h1>header</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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="rightHand">
<span id="logo">I</span>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the title overlap the content container
There are times when you would like the content to be contained in a box. Sometimes you would like the header to overlap the top of that box. Here is how to do it. The crucial lines here are position:relative; top:40px; within the h1 CSS reference.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>
Tuesday, 17 August 2010
Resize Background Image
I've often seen background images being resized on designer websites and wondered, how do they do that? Anyway, here's how.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
background:#FFFFFF;
color:#A3A3A3;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df.jpg" alt="windFarm" />
<br /><br />
<div id="mainContent">
<h1>Hello World!</h1>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
background:#FFFFFF;
color:#A3A3A3;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df.jpg" alt="windFarm" />
<br /><br />
<div id="mainContent">
<h1>Hello World!</h1>
</div>
</body>
</html>
jQuery Image Overlay
I've been looking for a nice, simple image overlay. One which wouldn't make me create unnecessary code around my images. I found this one called jcaption. It's a very simple implementation, so I thought I'd share it with you.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image overlay</title>
<style type="text/css">
html
{
font-family:Sans-serif;
}
.caption
{
position: relative;
}
.caption p
{
position: absolute;
bottom:0;
left:0;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jcaption.min.js"></script>
<script>
$(function()
{
$('img').jcaption({
animate: true, show: {height: "show"},hide: {height: "hide"}
});
});
</script>
</head>
<body>
<div class="caption">
<img src="http://farm5.static.flickr.com/4092/4954283598_7e64000a5c_m.jpg" alt="purpleRingSmall" />
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image overlay</title>
<style type="text/css">
html
{
font-family:Sans-serif;
}
.caption
{
position: relative;
}
.caption p
{
position: absolute;
bottom:0;
left:0;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jcaption.min.js"></script>
<script>
$(function()
{
$('img').jcaption({
animate: true, show: {height: "show"},hide: {height: "hide"}
});
});
</script>
</head>
<body>
<div class="caption">
<img src="http://farm5.static.flickr.com/4092/4954283598_7e64000a5c_m.jpg" alt="purpleRingSmall" />
</div>
</body>
</html>
How to make the entire page fade in on load
I have often made a the entire page content fade in when loading a page. It seems to give a nice effect. I use jQuery to do this. In the example below I have coloured the page red for highlighting purposes.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Body Fade In</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#FF0000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('body').hide().fadeIn(2000);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Body Fade In</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#FF0000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('body').hide().fadeIn(2000);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Monday, 16 August 2010
Fixed body and footer
This example combines a fixed body and footer height. Commonly used on designer websites.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Fixed body</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
background:#A3A3A3;
}
#container, footer
{
display:block;
font-family:Sans-serif;
}
#container
{
background:#FFFFFF;
color:#A3A3A3;
height:400px;
}
footer
{
height:10em;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<footer>This is my footer</footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Fixed body</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
background:#A3A3A3;
}
#container, footer
{
display:block;
font-family:Sans-serif;
}
#container
{
background:#FFFFFF;
color:#A3A3A3;
height:400px;
}
footer
{
height:10em;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<footer>This is my footer</footer>
</body>
</html>
How to make a sticky footer
Sometimes you want the footer of your page to always be available at the same height no matter how much you resize your web browser. This is called a sticky footer. Here is a pretty simple way to code it for your site.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:90%;
}
#footer
{
height:10%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<div id="footer">This is my sticky footer</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:90%;
}
#footer
{
height:10%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<div id="footer">This is my sticky footer</div>
</body>
</html>
Big Text in the Background
Sometimes it is useful to design a web page with big text in the background of the main content. Below I have created a page which does that. The <h1> content is declared before the main page content and pushed to the back using position:absolute and z-index-1 in the CSS.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Big Text in the Background</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#999999;
}
h1
{
position:absolute;
left:60px;
top:-200px;
z-index:-1;
font-size:20em;
color:#F2D1F9;
}
#mainPage
{
margin:100px auto;
width:800px;
}
p
{
margin:20px;
text-align:justify;
}
</style>
</head>
<body>
<h1>The Big Text</h1>
<div id="mainPage">
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Big Text in the Background</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#999999;
}
h1
{
position:absolute;
left:60px;
top:-200px;
z-index:-1;
font-size:20em;
color:#F2D1F9;
}
#mainPage
{
margin:100px auto;
width:800px;
}
p
{
margin:20px;
text-align:justify;
}
</style>
</head>
<body>
<h1>The Big Text</h1>
<div id="mainPage">
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>
</html>
Friday, 13 August 2010
Automatic menu selection using PHP
Suppose I have a website. In this case a PHP driven HTML5 website, although what I'm about to explain doesn't really require HTML5 and can be easily adapted.
See demo.
I have a menu. I have a text file called menu.txt which contains my menu items like this:
index.php,home
index2.php,Page 2
index3.php,Page 3
And what I want to do is call a PHP script which:
I can then apply CSS as I like to the menu appearance using a different colour for the selected item.
Here is how I do it. First place the include 'navigation.php'; in your page script where you want the navigation to appear.
This is what navigation.php looks like:
<nav>
<ul>
<?php
/* get the contents of menu.txt */
$fileArr = file('includes/menu.txt');
/* get the name of the PHP file referred to in the URL */
$fname = basename($_SERVER['REQUEST_URI']);
/* if there isn't a PHP file extension in the URL, it must be root. Therefore call it index.php */
if(substr($fname,-4) <> ".php")
{
$fname = "index.php";
}
/* create the menu from the lines in menu.txt */
foreach ($fileArr as $line)
{
$menuitems = explode(",", $line);
echo '<li><a href="'.$menuitems[0].'" ';
/* Check the current pathname in menu.txt with the one in the current URL */
if($menuitems[0] == $fname)
{
/* If they are the same add the menuSelected class to the link */
echo 'class="menuSelected"';
}
echo '>'.$menuitems[1].'</a></li>';
}
?>
</ul>
</nav>
Hey presto! Have fun.
See demo.
I have a menu. I have a text file called menu.txt which contains my menu items like this:
index.php,home
index2.php,Page 2
index3.php,Page 3
And what I want to do is call a PHP script which:
- Reads the file.
- Creates the menu tags from the file contents.
- Automatically selects the page I'm looking at as the selected item in the menu.
I can then apply CSS as I like to the menu appearance using a different colour for the selected item.
Here is how I do it. First place the include 'navigation.php'; in your page script where you want the navigation to appear.
This is what navigation.php looks like:
<nav>
<ul>
<?php
/* get the contents of menu.txt */
$fileArr = file('includes/menu.txt');
/* get the name of the PHP file referred to in the URL */
$fname = basename($_SERVER['REQUEST_URI']);
/* if there isn't a PHP file extension in the URL, it must be root. Therefore call it index.php */
if(substr($fname,-4) <> ".php")
{
$fname = "index.php";
}
/* create the menu from the lines in menu.txt */
foreach ($fileArr as $line)
{
$menuitems = explode(",", $line);
echo '<li><a href="'.$menuitems[0].'" ';
/* Check the current pathname in menu.txt with the one in the current URL */
if($menuitems[0] == $fname)
{
/* If they are the same add the menuSelected class to the link */
echo 'class="menuSelected"';
}
echo '>'.$menuitems[1].'</a></li>';
}
?>
</ul>
</nav>
Hey presto! Have fun.
Simple vertical navigation
How many times have you wanted to start a website using a simple left hand vertical left hand navigation and then just build on it. Below is a template for doing just that. This time I have added a few comments even though the code is pretty self explanatory. To make this work on your own setup, you will also need to create subPage1.html, subPage2.html and subPage3.html, but other than that, you're away. You should need to download jQuery because it is being referenced from Google. There is a little CSS, just to, layout the tabs and show how the hover works.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
/* a holder for the entire page centred in the browser window */
#subSystem
{
margin:0 auto;
width:480px;
}
/* a container for the navigation with a border around 3 of the sides */
#subNav
{
float:left;
width:88px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
}
/* properties of each menu item to make it look like a block of centred text */
#subNav a.subMenu
{
display:block;
text-decoration: none;
text-align:center;
width:80px;
height:40px;
padding-top:16px;
padding-left:4px;
padding-right:4px;
color:#000000;
}
/* the changes in appearance of a menu item when someone hovers over it */
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
/* the changes in appearance of a menu item when someone has selected it */
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
/* a container for the page content */
#subContent
{
float:left;
width:380px;
min-height:380px;
height:380px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
/* when a menu item is clicked remove any items which were previously selected.
Change the property of the item clicked to selected.
Put whatever the hyperlink points to within the content container. */
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
/* a holder for the entire page centred in the browser window */
#subSystem
{
margin:0 auto;
width:480px;
}
/* a container for the navigation with a border around 3 of the sides */
#subNav
{
float:left;
width:88px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
}
/* properties of each menu item to make it look like a block of centred text */
#subNav a.subMenu
{
display:block;
text-decoration: none;
text-align:center;
width:80px;
height:40px;
padding-top:16px;
padding-left:4px;
padding-right:4px;
color:#000000;
}
/* the changes in appearance of a menu item when someone hovers over it */
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
/* the changes in appearance of a menu item when someone has selected it */
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
/* a container for the page content */
#subContent
{
float:left;
width:380px;
min-height:380px;
height:380px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
/* when a menu item is clicked remove any items which were previously selected.
Change the property of the item clicked to selected.
Put whatever the hyperlink points to within the content container. */
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>
Thursday, 12 August 2010
Simple tab navigation using jQuery
Below is the code for a very simple jQuery tabbed navigation. To make this work on your own setup, you will also need to create subPage1.html, subPage2.html and subPage3.html, but other than that, you're away. You should need to download jQuery because it is being referenced from Google. There is a little CSS, just to, layout the tabs and show how the hover works.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#subSystem
{
margin:0 auto;
width:400px;
}
#subNav a.subMenu
{
display:block;
text-decoration: none;
float:left;
text-align:center;
width:80px;
height:40px;
padding:4px;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
color:#000000;
}
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
#subContent
{
clear:left;
min-height:400px;
height:400px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#subSystem
{
margin:0 auto;
width:400px;
}
#subNav a.subMenu
{
display:block;
text-decoration: none;
float:left;
text-align:center;
width:80px;
height:40px;
padding:4px;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
color:#000000;
}
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
#subContent
{
clear:left;
min-height:400px;
height:400px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>
Wednesday, 11 August 2010
My HTML5 Template
Here is my HTML5 template. It also contains a few things I like to put in my pages.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" href="stylesheets/html5reset.css" />
<link rel="stylesheet" href="stylesheets/pageStyle.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="stylesheets/smalldevice.css" />
<link rel="stylesheet" href="stylesheets/printstyle.css" media="print" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
WebFont.load(
{
google:
{
families: [ 'Tangerine', 'Cantarell', 'Yanone Kaffeesatz' ]
}
});
</script>
<script src="scripts/jQueryFunctions.js"></script>
<script src="scripts/html5functions.js"></script>
</head>
<body>
<div id="page">
<header>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>First article on left.
</article>
<article>
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</article>
</section>
<aside>
The stuff aside
<article class="yellowbox">
This is the text in the box.
</article>
</aside>
<footer>
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
</footer>
</div>
</body>
</html>
Enjoy!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" href="stylesheets/html5reset.css" />
<link rel="stylesheet" href="stylesheets/pageStyle.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="stylesheets/smalldevice.css" />
<link rel="stylesheet" href="stylesheets/printstyle.css" media="print" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
WebFont.load(
{
google:
{
families: [ 'Tangerine', 'Cantarell', 'Yanone Kaffeesatz' ]
}
});
</script>
<script src="scripts/jQueryFunctions.js"></script>
<script src="scripts/html5functions.js"></script>
</head>
<body>
<div id="page">
<header>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>First article on left.
</article>
<article>
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</article>
</section>
<aside>
The stuff aside
<article class="yellowbox">
This is the text in the box.
</article>
</aside>
<footer>
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
</footer>
</div>
</body>
</html>
Enjoy!
SEO tips for your website
SEO tips for your website
I see SEO efforts falling into two categories:
- Changes you make to your website to maximise thier position potential.
- Influences to create external links to your website.
Here are my top tips for effort No1. Not in any particular order.
Research the best keywords to use in your website to attract the users you are looking for. Then, include them in your meta tags and apply the 'strong' tag to the words as they appear in your content. You can use this page to help https://adwords.google.com/KeywordPlanner
Create a sitemap.xml for your website using https://www.xml-sitemaps.com/.
Register your website with the various search engines using:
- http://www.google.co.uk/submityourcontent/website-owner/
- http://www.bing.com/toolbox/submit-site-url
- http://search.yahoo.com/info/submit.html
Make sure that when a visitor clicks your website’s logo, they are taken back to the homepage.
Create a CSS stylesheet to make the website printer friendly.
Give each page a different <title> tag in order of page name, website name.
Optimise images using Gimp with techniques show here http://www.makeuseof.com/tag/optimize-images-web-gimp/
Adding ALT tags to all of the images. If the graphic is just for decorative purposes, just use ALT=""
Create a robots.txt file and place it in the root directory of your website.
Create a humans.txt file and place it in the root directory of your website.
Use the same colour for links throughout the website.
Add at least one picture to every page of the website.
Validate the source code with W3C validation tools and correct any errors using http://validator.w3.org/
Add Google analytics code to every page of the website. See http://www.google.com/analytics/.Create a favicon for the website. If possible also include other icons for tablets and smartphones etc. See http://iconifier.net/.
Only use email address that include @thesamedomain.
Label each box of any forms on the website.
Add Google site verification tag. See https://support.google.com/webmasters/answer/35659?hl=en
Show a confirmation any time a visitor completes a significant action on the website.
Enlist the website with web directories such as http://dir.yahoo.com/ and http://www.dmoz.org/
Add microdata to your tags, see http://schema.org/
Include feeds from your blogs, facebook or twitter to make pages dynamic.
Create a Google+ page, see https://plus.google.com/pages/create.
Create a canonical link element, see http://en.wikipedia.org/wiki/Canonical_link_element.
Create a custom 404 error page, see http://www.thesitewizard.com/archive/custom404.shtml.
Add Dublin Core meta elements, see http://www.metatags.info/dublin_core_metadata_element_set.
Good luck
Subscribe to:
Posts (Atom)