Mick Redman

Friday 10 September 2010

Simple layout #4

This is the kind of design which could work as starting position for, as an example, a designer furniture shop. There is a little more code than I would usually try and use on this blog. I wanted to create a gradient using pure CSS rather than an image which meant adding the IE only code. Other than that, it's quite simple.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box design</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
background-color: #F3F3F3;
background-image: -moz-linear-gradient(top, #F3F3F3, #FFFFFF); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F3F3F3),color-stop(1, #FFFFFF)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF')"; /* IE8 */
}
#container
{
margin:0 auto;
width:800px;
}
h1, h2
{

font-family:Georgia;
font-weight:lighter;
}
h1
{
text-align:center;
font-size:4em;
}
h2
{
text-align:left;
font-size:2em;
margin-left:20px;
margin-top:1em;
}
.box, .twoBox
{
float:left;
min-height:260px;
}
.box
{
width:260px;
}
.twoBox
{
width:520px;
}
#box1
{
background:#77F9CF;
}
#box2
{
background:url(http://farm5.static.flickr.com/4125/4945802498_a53b3eedc5.jpg);
}
#box3
{
background:#7DD0F8;
}
#box4
{
background:#FFA77A;
}
#box5
{
background:#000000;
}
p
{
margin:20px;
text-align:justify;
line-height:140%;
color:#FFFFFF;
}
#footer
{
clear:left;
text-align:center;
color:#A3A3A3;
font-size:0.8em;
}
</style>
</head>
<body>
<h1>The Heading</h1>
<div id="container">
<div id="box1" class="box">
<h2>Sub</h2>
<h2>Heading</h2>
</div>
<div id="box2" class="twoBox">
</div>
<div id="box3" class="box">
</div>
<div id="box4" class="box">
</div>
<div id="box5" class="box">
<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.</p>
</div>
<div id="footer">This could be quite a long footer</div>
</div>
</body>
</html>

Friday 3 September 2010

jQuery Drag and Drop

The example below is based largely on a demonstration at : http://jqueryui.com/demos/droppable/
I've just tidied it up, and added a couple of things which make it possible for you to copy and paste. It's so simple, even I understood it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and drop</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#draggable, #droppable
{
border:1px solid #CCCCCC;
padding:0.5em;
float:left;
}
#draggable
{
width:100px;
height:100px;
margin:10px 10px 10px 0;
}
#droppable
{
width:150px;
height:150px;
margin: 10px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
$(function()
{
$("#draggable").draggable();
$("#droppable").droppable(
{
drop: function(event, ui)
{
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
},
over: function(event, ui)
{
$(this).addClass('ui-state-highlight').find('p').html('Over!');
},
out: function(event, ui)
{
$(this).addClass('ui-state-highlight').find('p').html('Out!');
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
</body>
</html>

Simple layout #3

For this one, I have used the approach of having the header, contained in the footer. I have also created quite a lot of space around the navigation.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jo's Orange ring photographed by Cath</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
{
text-align:right;
margin-right:120px;
color:#FFFFFF;
font-size:3em;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align:left;
height:224px;
width:200px;
margin-left:80px;
font-size:1.2em;
position:relative;
border-radius:6px;
behavior: url(scripts/PIE.htc);
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:180px;
height:40px;
padding-top:16px;
padding-left:16px;
padding-right:4px;
color:#FFFFFF;
}
#nav a.subMenu:hover
{
background:#000000;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
</style>
</head>
<body>
<img id="background" src="http://farm4.static.flickr.com/3216/2329105730_265bae807a.jpg" alt="orangering4" />
<br /><br />
<div id="container">
<div id="nav">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
</div>
<div id="footer">
<h1>Orange Ring 4</h1>
</div>
</body>
</html>

Thursday 2 September 2010

Overlapping logo

I'm often seeing websites where a logo overlaps the navigation bar and sticks out either side. Here is how it's done. You'll need to add your own image in place of mine because flickr didn't seem to accept the transparency behind my silver sticker logo.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping logo</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
margin: 0 auto;
width:920px;
border:1px solid #CCCCCC;
}
h1
{
margin-left:120px;
color:#FFFFFF;
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
}
#nav 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 a:hover
{
background:#FF0000;
}
#nav img
{
float:right;
position:relative;
top:-30px;
right:20px;
}
#content
{
min-height:400px;
}
</style>
</head>
<body>
<br /><br />
<div id="container">
<h1>This is a sticky footer example</h1>
<div id="nav">
<img src="images/silversticker.png" alt="silver sticker" />
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<div id="content">
</div>
</div>
</body>
</html>

Friday 27 August 2010

Form validation using jQuery

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>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>

<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>

<input type="text" size="20" name="contactname" id="contactname" value="" class="required" /><br />
<label for="email">Email:</label>

<input type="text" size="20" name="email" id="email" value="" class="required email" /><br />
<label for="message">Message:</label>

<textarea rows="5" cols="20" name="message" id="message"></textarea><br />
<input type="submit" value="Submit" name="submit" />
</form>
</body>
</html>

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>

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>