Saturday, August 27, 2005

A Truly Centered Stylesheet?

Could it really be? It appears so. It took me some time to get it horizontally centered, but it looks good in both IE6 and Firefox1.

The code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Vertically and Horizontally Centered CSS Page</title>

<style type="text/css">

/* test styling */
div#content {border: 1px solid black;} /* just borders to see it */
#body { background:#333; }
#outer { background:#666; }
#middle { background:#999; }
#inner { background:#ccc; }

/* css vertical centering:
source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
body, html {height: 100%; margin:0; padding:0;}
#outer {height: 400px; overflow: hidden; position: relative;}
#outer {height: 100%; width:100%; overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
#content {
margin-left: auto; margin-right: auto;
background:ivory;
width:750px;
}

</style>

</head>

<body>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">
References:<br />
<a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">
Yuhu's Definitive Solution with Unknown Height
</a><br />
<a href="http://www.w3.org/Style/Examples/007/center.html">
W3C Centering Things
</a><br />
</div>
</div>
</div>
</div>
</body>
</html>

Sources:
Yuhu's Definitive Solution with Unknown Height
W3C Centering Things

posted by Tom at 7:32 AM 0 Comments

Friday, August 26, 2005

Javascript: Preload Images

Based on Macromedia's js function, but rewritten for clarity. I would never actually use this, but since I took the time to clarify it:

// JS: fx preload_images()
function preload_images() {

var doc = document;

if ( doc.images ) {

if ( !doc.IMGS ) {

doc.IMGS = new Array();
var i;
var IMGS_len = doc.IMGS.length;
var IMGS_args = preload_images.arguments;

for ( i=0; i < IMGS_args.length; i++ ) {
if ( IMGS_args[i].indexOf("#") != 0 ) {
doc.IMGS[IMGS_len] = new Image;
doc.IMGS[IMGS_len++].src = IMGS_args[i];
}
}
}
}
} // end FX

posted by Tom at 11:03 PM 0 Comments

Thursday, August 25, 2005

Complete Penguin Classic Library

I once had a dream of buying the complete Penguin Classic Library. That was back when I had time to read novels.

posted by Tom at 8:44 AM 0 Comments

Monday, August 22, 2005

Rare Personal Note

I had a soda pop with lunch today -- my first carbonated beverage (does Perrier count?) in probably near to two months. They were out of iced tea, I needed something sugary with caffeine, and it's too hot for coffee. Even iced coffee.

posted by Tom at 3:02 PM 0 Comments

RSS vs Atom

Explained here by way of a Slashdot comment.

posted by Tom at 2:56 PM 0 Comments

Friday, August 19, 2005

Sample Atom Feed

Useful to know when trying to automate syndication.

posted by Tom at 1:59 PM 0 Comments

Tuesday, August 16, 2005

Floatutorial

Silly name, useful tutorial. An illustration:

Left Float


Right Float


This is an example of a three column block using left and right floats.


The Code:
<div id="containing_block" style="width:90%; margin:2em; padding:4px; background:white; border:1px solid gray;">
<div style="float:left; width:33%; background:red;"><br /><br /><br /></div>
<div style="float:right; width:33%; background:blue;"><br /><br /><br /></div>
<div style="margin:1em 35%; font-size:9px;">This is an example of a three column block using left and right floats.</div>
</div>

posted by Tom at 9:28 PM 0 Comments

Tuesday, August 09, 2005

Style Div: iPod screen

.ipod {
padding:1em; line-height:1.5em;
background:#d2e2f2; color:#3c4782;
font-family:Lucida Console,Monaco,monospace;
font-weight:normal; font-size:11px;
border:1px solid #3c4782;
}


Sample

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

posted by Tom at 10:08 AM 0 Comments

Monday, August 08, 2005

Javascript: Display Toggle (Revised)

A simpler version of this script. Revised and improved:

<!-- JS: TOGGLE DISPLAY -->
<script type="text/javascript">
<!--

function toggle_display(element_id) {
if ( document.getElementById(element_id).style.display == 'none' ) {
document.getElementById(element_id).style.display = '';
} else {
document.getElementById(element_id).style.display = 'none';
}
return;
}

//-->
</script>
<!-- end JS: TOGGLE DISPLAY -->


Then call like so using the id you've given to the doc element:

<div id="toggle_block" style="background:blue;">now you see it</div>
<a onclick="toggle_display('toggle_block')" href="#toggle_block">show/hide</a>

posted by Tom at 9:54 AM 1 Comments

Monday, August 01, 2005

Sidenotes

Simple, elegant, functional. Discovered by way of the ever simple, elegant, and functional Daring Fireball blog.

posted by Tom at 6:09 PM 0 Comments