Mick Redman

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>

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>

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>

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>

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>

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>

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>