mahud's blog
Paint Shop Pro Tutorials, ProBoards Templates, Downloads and More Stuff
Creating a <div> based Template using CSS (part 1 - 12)
5 Jan 2009 > 3 Comments
A <div>/CSS based Template Tutorial.
Tutorial Contents
- Part One (Creating a <div> based Template)
- Part Two (Adding Headings, Paragraphs, and Blockquotes)
- Part Three (Ordered and unordered lists (create a horizontal menu/navi bar))
- Part Four (Displaying Images)
- Part Five (Styling Horizontal Rules)
- Part Six (Styling Tables)
- Part Seven (Fonts)
- Part Eight (Margin and Padding)
- Part Nine (Styling the Background and Foreground)
- Part Ten (Styling Links)
- Part Eleven (Bullet images for list items)
- Part Twelve (Some template modifications)
Choosing a <doctype>
Before starting this tutorial you need to choose a <!DOCTYPE> that informs the browser what type of mark up language you are using. I recommend using either a HTML 4 (Strict) or XHTML (strict) doctype.
HTML 4 (strict) Doctype
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<title>html document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<link rel=”stylesheet” type=”text/css” href=”" media=”screen” >
</head>
<body>
</body>
</html>XHTML (strict) Doctype
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>html document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
</head>
<body>
</body>
</html>Validate your mark up
It’s good practice to check your HTML and CSS documents using the online validators.
Combine flag and country into one image
23 May 2008 > 1 Comment
This Tutorial was created for Paint Shop Pro 9, but should also work in PSP8, PSPX, PSPXI and Paint Shop Pro Photo X2.
Create a Bottle in Paint Shop Pro
17 May 2008 > 1 Comment
This Tutorial was created for Paint Shop Pro 9, but should also work in PSP8, PSPX, PSPXI and Paint Shop Pro Photo X2
Creating rounded corners when working with screenshots
25 Apr 2007 > 4 Comments
Often the coding comes first when I’m working on a layout, and as I work on styling each particular element of the page via the style sheet, I take a screen captures and overlay with graphic enhancements.
New Logo
20 Apr 2007 > 3 Comments
I haven’t been a very active blogger lately, for various reasons, so I thought I’d show off the revamped version of the “Kid” logo for my next redesign.
I’m not that wise in the ways of the Pen Tool (PSP), and it took me a few hours getting it right, learning a few things along the way too (which is a bonus), mostly using the Bezier Curves tool.
Kid originally started out as a comic character I created a few years ago, called “The Mundane and Amazing Adventures of Kid”
Ordered List items all 1 in IE
10 Apr 2007 > 3 Comments
This is an unusual bug that I haven’t seen before, caused in Internet Explorer 6 and 7. When I applied the width property and value to the <li> selector, all the numbers in an ordered list become 1.
I googled for a solution and found it in the comment thread to this post..
Adding display:list-item; restored everything back to normality.
Towards the door we never opened
8 Apr 2007 > 0 Comments
My current entry for the Digital Art Challenge over at Ocgfx.
In part, inspired by the Blood lust design over at Zen Garden.
Sheepdip Wordpress Theme
6 Apr 2007 > 19 Comments
Sheepdip is a free Standards Compliant (xhtml.strict) Widget Compatible Wordpress Theme, immaculately coded for your downloading pleasure. It consists of two main templates for the index and single page (see previews below), with a fixed width of 760px.
I’ve kept the CSS down to a bare minimum, using only a small number of id and class names, without sacrificing the design. The template uses 10 compressed .jpg images, including images (rather than styling) for the dotted borders, that would otherwise appear dashed in Internet Explorer 6. I have also included images for the submit buttons, which need to be added directly to the xhtml template.
Beaver
24 Mar 2007 > 2 Comments
I’m currently working on a project based on native American art. I have been searching for images on the net for inspiration, and spending time familiarizing myself with the various patterns and motifs that have caught my interest. ‘Beaver’ is an example of some initial experiments in this direction.
Menu
- Paint Shop Pro Tutorials: Tutorials and downloads for PSP (versions, 8, 9, X, XI, X2) users
- ProBoards Templates: Downloadable Version Four ProBoard skins
- HTML and CSS: The stuff that Websites are made of
- Microsoft Paint Tutorials: Make nifty graphics using Microsoft Paint
- Wordpress Themes: Wordpress designs, pre-made templates and tutorials
- Downloads: Icons and other gifties
- ProBoards Tutorials: Customize your ProBoards forum
- Portfolio: My Web design and digital Art stuff
- Digital art: Messing around with my image editor
- Journal: Typical blog stuff really
- Various Stuff: Stuff that doesn't fit anywhere else
Recently Commented on...
January 20, 2010
January 12, 2010
December 31, 2009
December 14, 2009
November 25, 2009
Mahud Version 5 © 2006-2008 > powered by Mr Whippy Wordpress