Archive for the 'HTML and CSS' Category
AA: Division based xhtml and css Template
7 Feb 2007 > 4 Comments
How to use this template
To get the code, copy the source from the live preview or visit ocgfx and copy and paste it from there.
Adding Headings, Paragraphs, and Blockquotes
18 Nov 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 2)
There are 6 Heading tags (<h1>-<h6>), designed to be used in numerical order on a web page.
Bullet images for list items
5 Dec 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 11)
Creating a <div> based Template using CSS (part 1 - 12)
5 Jan 2009 > 4 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.
Creating a <div> based Template using CSS (Part: 1)
17 Nov 2006 > 6 Comments
I’ll kick start this tutorial by dividing the main layout of the template into divisions using <div> tags. Typically, these divisions are given unique identities using the id="" attribute, for example :
Disappearing List Icon
27 May 2006 > 0 Comments
I’ve been working on the Pb templates page today. I have three lists all floating left in a row. The problem was when I hovered over a link in the list, the icon in the list to the right would vanish. Grrr!
Displaying Images
19 Nov 2006 > 4 Comments
Creating a <div> based Template using CSS (Part: 4)
The <img> tag doesn’t actually contain anything. Images are displayed by using the src (source) attribute, accompanied with some alternate text using the alt attribute.
I.E Problem with <div>isions
9 May 2006 > 0 Comments
I wanted to add 10px height <div>isions to the top and bottom of another <div> so I could have some head and base images.
Link Styles
31 May 2006 > 0 Comments
There are four pseudo classes that can be used to style your links. These are;
Margin and Padding
25 Nov 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 8 )
So far the template looks pretty untidy. The content needs to be spaced out a bit, using the padding: and margin: properties in the stylesheet.
Menu list background-color highlight fixed in I.E 6
11 Mar 2007 > 0 Comments
I was too lazy to fix this at the time, but after remedying another design flaw I discovered in Opera, I decided to do something about it, and really, it was totally simple.
Ordered and unordered lists (create a horizontal menu/navi bar)
19 Nov 2006 > 5 Comments
Creating a <div> based Template using CSS (Part: 3)
Lists are used to display a group of List Items (<li>) that are in some way related to each other. The two main list types are Unordered (<ul>), and Ordered (<ol>).
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.
Problem floating form element in Internet Explorer 6
15 Dec 2006 > 2 Comments
I wanted to float the search box on the right of the body of the webpage, by adding an ID to the form element, and using float:right; in the stylesheet.
Reduce Table Cell Background Padding (ProBoards CSS Tutorial)
1 Jun 2006 > 0 Comments
You can reduce (or increase) the size of your table cell backgrounds using the CSS property padding.
Some template modifications
10 Dec 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 12)
The vertical columns (#c2, #c3, #c4) in the template can easily be rearranged by changing the value of the float property in the stylesheet.
Style input and text areas using CSS
7 Jun 2006 > 0 Comments
You can use CSS to style form elements, such as <input> and <textarea>.
Styling Horizontal Rules
21 Nov 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 5)
Horizontal rules are used to divide content. But without styling, horizontal rules look pretty awful.
Styling Tables
21 Nov 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 6)
Tables are used to display tabular data.
Styling the Background and Foreground
28 Nov 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 9)
text-indent: -9999px; not working
18 Dec 2006 > 6 Comments
I wanted to use this method to hide the hyperlink text while displaying an image, but it wasn’t having any effect. I messed around with the stylesheet trying to locate the problem, and finally figured out that the containing element had the property and value text-align:right;, and it was conflicting (for some reason) with the text-indent value. Including text-align:left; along with text-indent: -9999px; resolved the conflict, and the text disappeared 
Version Four Design: part 7 (width problem in Opera)
2 Nov 2006 > 0 Comments
I checked version four in various browsers, and found a tiny problem in Opera. In div#c1 I have h1 and li a set to the same width, but the heading was a pixel short.
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...
September 4, 2010
August 24, 2010
July 14, 2010
May 3, 2010
April 24, 2010
Mahud Version 5 © 2006-2008 > powered by Mr Whippy Wordpress