Category Archives: Web Design

HTML5 centered CSS layout with a sticky page footer

A barebones HTML5 layout with a sticky page footer. Just change the CSS to match your requirements. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML5 Document with a sticky footer</title> <style>@import "css/reset.css"; </style> <style>@import "css/main.css"; </style> </head> <body> <div id="root"> <header> The page header </header> <section> <h1>Example</h1> <p>This is an example HTML document.</p> <p>Put your content here</p> </section> [...]

Posted in Web Design | Tagged , , , | 2 Comments

Rounded corners with CSS

CSS3 brings us rounded corners with the CSS rule border-radius. At the time of writing, webkit and gecko based browsers offer this functionality with custom CSS rules. Gecko (Firefox): div { -moz-border-radius: 10px; }   div { -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; } Webkit (Safari, Chrome) div { -webkit-border-radius: 10px; }   [...]

Posted in Web Design | Tagged , , | Leave a comment

Simulate RGBA in Internet Explorer

Modern browsers support RGBA colour definitions in CSS, for example: div { background: rgba(255,255,0,127); } You can simulate this in IE with something like the following code: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dd204362,endColorstr=#dd204362); MSDN – DXImageTransform

Posted in Web Design | Tagged , , , | Leave a comment

Adding colour to HR in IE6

Complient browsers use the background-color rule to set the colour of HR (horizontal rules). IE6 however uses the color rule. It will do no harm to add both the main style sheet.

Posted in Web Design | Tagged , , | Leave a comment

CSS media expressions

An example of using style sheet media queries, or media expressions. In a nutshell apply conditions to which style sheets are imported depending on the client device properties. <link rel="stylesheet" type="text/css" media="screen, projection" href="css/main.css"/> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1600px), projection" href="css/main-hires.css"/> In this case only devices with a minimum resolution of 1600 pixels [...]

Posted in Web Design | Tagged , | Leave a comment

Valid xHTML Strict Template

A simple HTML template to create valid, xHTML 1.0 documents. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>title</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />   <script type="text/javascript" src="script.js"></script> <style type="text/css">   </style> </head> <body>   <div id="root"></div> </body> </html> template.html

Also posted in Web Development | Tagged , , | Leave a comment

Reset CSS with Typography & Clearfix.

A reset CSS which will get rid of the browsers default styling on all elements. Making it a lot easier to build consistent cross browser web sites. reset-fix.css Extras: Clearfix CSS class, for clearing floated child nodes. Typography percentages in the comments select {margin:0;} applied for IE

Posted in Web Design | Tagged | Leave a comment

IE6 transparent PNG fix with AlphaImageLoader

A CSS based workaround for the IE6 transparent PNG bug. Apply in an IE6 specifc style sheet. background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/icon.png’); This fix can only used in certain scenarios. Will render links unclickable Will cause form elements to be unfocusable When applied to unordered/ordered lists, will hide the list item text

Posted in Web Design | Tagged , , | Leave a comment