Mick Redman

Friday 24 September 2010

Simple layout #12

This design puts to earlier blog posts together. Simple layout #11 and Static Image Overlay.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Static Image Overlay

Here is how to put those descriptions placed at the bottom of your images with a semi-opaque background.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Image Overlay</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
}
.imgHolder p, .imgHolder img
{
display:block;
width:100px;
}
.imgHolder p
{
position:relative;
top:-46px;
background:#000000;
color:#FFFFFF;
font-size:0.8em;
height:24px;
padding-top:8px;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<div id="mainContent">
<h1>Static Image Overlay</h1>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4092/5019367535_053592b411_t.jpg" alt="red ring" /><p>red ring</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4083/5019367559_f575c61142_t.jpg" alt="tea pot" /><p>tea pot</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4086/5019973694_8dd67f644d_t.jpg" alt="fruit basket" /><p>fruit basket</p></div>
</div>
</body>
</html>

Thursday 23 September 2010

Simple layout #11

This layout shows how to put your backgrounds across the screen at a width of 100%, take up 100% of the height, but centre the content within the page with uniformity.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Prettier scrollbars

This demo offers a starting point to having prettier scrollbars for your web page. I am using jScrollPane at
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.

The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<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><br /><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><br /><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><br /><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><br /><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><br /><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="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>

Wednesday 22 September 2010

Simple layout #10

Yes, we're into double figures this latest layout sports 100% height, 100% width, a background belt and 3 rows.
I also used gimp to create a sort of blue gel cats eye in neon for fun.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #10</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
background:url(images/bigBlackLine.png) repeat-x 0px 400px;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
min-height:100%;
}
#topPart
{
height:400px;
background:#73C2FF;
}
h1
{
font-family: 'Cuprum', arial, serif;
font-size:6em;
width:600px;
padding:20px;
}
#middlePart
{
height:200px;
background:url(http://farm5.static.flickr.com/4091/5014384774_918902e791_z.jpg) no-repeat center center;
}
#bottomPart
{
background:#69FFBF;
}
</style>
</head>
<body>
<div id="container">
<div id="topPart">
<h1>One of those new fangled big fonts</h1>
</div>
<div id="middlePart">
</div>
<div id="bottomPart">
</div>
</div>
</body>
</html>

Monday 20 September 2010

Three column 100% height layout

I may create a more designer version of this later in the series. I just wanted to demonstrate how to create a multi column 100% height layout. Most examples I had seen on the web required a wrapper and lots of coding. I couldn't see why. No by doing it without lots of code and wrappers, I still can't.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Columns</title>
<style type="text/css">
* html body
{
height:100%;
}
*
{
margin:0;
padding:0;
height: 100%;
}
body
{
font-family:Sans-serif;
}
#column1, #column2, #column3
{
float:left;
min-height: 100%;
}
#column1, #column2
{
width:200px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:400px;
}
</style>
</head>
<body>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
</body>
</html>

Friday 17 September 2010

How to create an e-mailable PDF form in OpenOffice.org

Suppose you wanted to send someone a PDF with form elements and a submit button at the bottom. Suppose when they clicked on the button you wanted the form contents to be sent as a PDF back to you. Here is how to do it.
Stage 1
Create the form in OpenOffice.org
Step 1
Create a new document using OpenOffice.org writer.
Step 2
Load the form controls using View->Toolbars->Form Controls and View->Toolbars->Form Design.
Step 3
Get your document ready for form elements by adding a title and pressing Carriage Return (Enter, <CR>, Return) a few times.
Step 4
Put the document in design mode using the 'Design Mode On/Off' switch in the form controls.
Step 5
Add form items to your document by selecting them from the form controls dialog, then dragging on to your page.
Step 6
Your final form entry should be a submit button. In the button properties, the 'Action' field should be set to 'Submit form'.
Stage 2
Set the form to e-mail
Step 1
Click on the 'Form' (properties) button on the form controls dialogue.
Step 2
Set the URL field to mailto:your.emailaddress@yourdomain
Stage 3
Export your document to PDF making sure that the 'Submit format' is FDF.
Stage 4
Test your newly exported PDF by filling in the fields and pressing the submit button.