Phosphorus and Lime
A Developer's Broadsheet
This blog has been deprecated. Please visit my new blog at klenwell.com/press.
profile
Name: klenwell
Home: San Diego, California, United States
About Me: designer, programmer, wordsmith
Thursday, September 29, 2005
In this case, it's not that you must conform, but you really ought to try.
I'm getting much better about design standards. With my dhMVCd template, most my pages are XHTML-compliant out-of-the-box. I notice, however, I often fail the CSS tests because the W3C-validator seems to reject style-rule overloading, which I don't quite understand.
Anyway, what I really like are the little "chicklet" images (i.e.,
). Just saw this one:
Understand the concept, but not quite sure how you earn it.
Here are the W3 Validators:
HTML
CSS
I'm getting much better about design standards. With my dhMVCd template, most my pages are XHTML-compliant out-of-the-box. I notice, however, I often fail the CSS tests because the W3C-validator seems to reject style-rule overloading, which I don't quite understand.
Anyway, what I really like are the little "chicklet" images (i.e.,
). Just saw this one:Understand the concept, but not quite sure how you earn it.
Here are the W3 Validators:
HTML
CSS
Wednesday, September 28, 2005
myspace makeover: pilot
Starting making over my sister's profile for her. Not a lot of time, so we just did a basic tear-down to start. The stylesheet at present:
see the results here: myspace profile
<style type="text/css">
/* RESET ALL PROFILE PAGE FONTS */
.nametext, .orangetext15, .whitetext12, .lightbluetext8, span.blacktext12, table table table table table strong, .btext, .redbtext, .redtext, table table table table td, table table table td, table table td, table table table table div, table font font
{
font-family:Trebuchet MS, Helvetica, sans-serif;
}
/* links */
a.navbar:link { color:orange; }
a.navbar:hover { color:lime; }
table table table td a:link { color:orange; }
table table table td a:hover { color:lime; }
a.text { color:orange; }
a.text:hover { color:lime; }
a.man:link { color:orange; }
/*** LAYOUT ***/
/* SCREEN BG */
body {
background-color:eee;
border-style:none;
}
/* PAGE, FOOTER BG */
/* border: LR ok, T or B (not both) */
table {
background-color:white;
border:2px solid ..ccc;
border-width:0 2px;
}
/* NAVBAR, PROFILE TABLE BG */
/* border OK */
table table {
background-color:white;
border:1px solid black;
}
/* PROFILE BLOCK HEADERS or BG */
/* border OK */
table table table {
background-color:ccc;
border:1px solid black;
}
/* PROFILE BLOCK BODY BG */
/* border NO */
table table table table {
background-color:white;
border:none;
}
/* TD: must be transparent! */
td {
background-color:transparent;
border:none;
}
</style>
/* RESET ALL PROFILE PAGE FONTS */
.nametext, .orangetext15, .whitetext12, .lightbluetext8, span.blacktext12, table table table table table strong, .btext, .redbtext, .redtext, table table table table td, table table table td, table table td, table table table table div, table font font
{
font-family:Trebuchet MS, Helvetica, sans-serif;
}
/* links */
a.navbar:link { color:orange; }
a.navbar:hover { color:lime; }
table table table td a:link { color:orange; }
table table table td a:hover { color:lime; }
a.text { color:orange; }
a.text:hover { color:lime; }
a.man:link { color:orange; }
/*** LAYOUT ***/
/* SCREEN BG */
body {
background-color:eee;
border-style:none;
}
/* PAGE, FOOTER BG */
/* border: LR ok, T or B (not both) */
table {
background-color:white;
border:2px solid ..ccc;
border-width:0 2px;
}
/* NAVBAR, PROFILE TABLE BG */
/* border OK */
table table {
background-color:white;
border:1px solid black;
}
/* PROFILE BLOCK HEADERS or BG */
/* border OK */
table table table {
background-color:ccc;
border:1px solid black;
}
/* PROFILE BLOCK BODY BG */
/* border NO */
table table table table {
background-color:white;
border:none;
}
/* TD: must be transparent! */
td {
background-color:transparent;
border:none;
}
</style>
see the results here: myspace profile
myspace: fonts
Some styles to control typefaces in myspace. Again, very ramshackle, but that's how they've set it up:
/* RESET ALL PROFILE PAGE FONTS */
.nametext, .orangetext15, .whitetext12, .lightbluetext8, span.blacktext12, table table table table table strong, .btext, .redbtext, .redtext, table table table table td, table table table td, table table td, table table table table div, table font font
{
font-family:Trebuchet MS;
}
/* STYLE INDIVIDUAL SECTIONS */
/* links */
a.navbar { color:lime; }
a.navbar:hover { color:green; }
table table table td a { color:pink; }
table table table td a:hover { color:red; }
a.text { color:yellow; }
a.text:hover { color:blue; }
a.man:link { color:purple; }
/* headers */
.nametext {color:yellow; font-size:32px;}
.orangetext15, .whitetext12, .lightbluetext8 { color:cyan; }
span.blacktext12 { color:lime; font-family:monospace; }
span#_ctl0_PageContent__ctl0_UserNetwork1_ctrlMessage { color:cyan; }
table table table table table strong { color:cyan; }
/* latest blog entry, has x friends */
.btext { color:indigo; }
/* friend count, comment count */
.redbtext, .redtext { color:blue; }
/* photo,details,comments */
table table table table td { color:red; }
/* latest blog */
table table table td { color:orange; }
table table td { color:yellow; }
/* URL */
table table table table div { color:red; }
/* footer */
table font font { color:salmon; }
.nametext, .orangetext15, .whitetext12, .lightbluetext8, span.blacktext12, table table table table table strong, .btext, .redbtext, .redtext, table table table table td, table table table td, table table td, table table table table div, table font font
{
font-family:Trebuchet MS;
}
/* STYLE INDIVIDUAL SECTIONS */
/* links */
a.navbar { color:lime; }
a.navbar:hover { color:green; }
table table table td a { color:pink; }
table table table td a:hover { color:red; }
a.text { color:yellow; }
a.text:hover { color:blue; }
a.man:link { color:purple; }
/* headers */
.nametext {color:yellow; font-size:32px;}
.orangetext15, .whitetext12, .lightbluetext8 { color:cyan; }
span.blacktext12 { color:lime; font-family:monospace; }
span#_ctl0_PageContent__ctl0_UserNetwork1_ctrlMessage { color:cyan; }
table table table table table strong { color:cyan; }
/* latest blog entry, has x friends */
.btext { color:indigo; }
/* friend count, comment count */
.redbtext, .redtext { color:blue; }
/* photo,details,comments */
table table table table td { color:red; }
/* latest blog */
table table table td { color:orange; }
table table td { color:yellow; }
/* URL */
table table table table div { color:red; }
/* footer */
table font font { color:salmon; }
Tuesday, September 27, 2005
Deconstructing myspace
My sister wants me to makeover her myspace profile, so I'm trying to figure out the layout for profile pages. Here's the stylesheet I've come up with:
The profile page html is pretty shabby. Of course, as soon as I get it figured out, they'll switch to something more rational.
/* SCREEN BG */
body {
background-color:#333;
border-style:none;
}
/* PAGE, FOOTER BG */
/* border: LR ok, T or B (not both) */
table {
background-color:red;
border:2px solid lime;
}
/* NAVBAR, PROFILE TABLE BG */
/* border OK */
table table {
background-color:orange;
border:2px solid cyan;
}
/* PROFILE BLOCK HEADERS or BG */
/* border OK */
table table table {
background-color:yellow;
border:2px solid black;
}
/* PROFILE BLOCK BODY BG */
/* border NO */
table table table table {
background-color:green;
border:2px solid fuchsia;
}
/* TD: must be transparent! */
td {
background-color:transparent;
border:none;
}
body {
background-color:#333;
border-style:none;
}
/* PAGE, FOOTER BG */
/* border: LR ok, T or B (not both) */
table {
background-color:red;
border:2px solid lime;
}
/* NAVBAR, PROFILE TABLE BG */
/* border OK */
table table {
background-color:orange;
border:2px solid cyan;
}
/* PROFILE BLOCK HEADERS or BG */
/* border OK */
table table table {
background-color:yellow;
border:2px solid black;
}
/* PROFILE BLOCK BODY BG */
/* border NO */
table table table table {
background-color:green;
border:2px solid fuchsia;
}
/* TD: must be transparent! */
td {
background-color:transparent;
border:none;
}
The profile page html is pretty shabby. Of course, as soon as I get it figured out, they'll switch to something more rational.
IE Layout Troubles
What a headache figuring this out, but I have learned by laborious trial and error (or, more accurately, error and befuddlement and dogged persistance) that putting hidden comments at the top of an xhtml document will throw off centered page layout in IE6. Not sure exactly why and don't really care to find out. Suffice it to say, not a problem in Firefox.
Monday, September 26, 2005
CSS: Reference/Quotation Styles
Three different types of reference styles. For straight quotations: .quote. For displaying code: .code. And for displaying style sheet code: .ipod.
The negative bottom-margin compensates for the auto-linebreak setting on Blogger.
.quote
.quote
{
margin:3px 6px;
padding:8px;
background:#fcfcfc;
border:solid thin #f6f6f6;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
}
{
margin:3px 6px;
padding:8px;
background:#fcfcfc;
border:solid thin #f6f6f6;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
}
.code
.code
{
margin-bottom:0px;
padding:1em;
font-size:11px;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:green;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}
{
margin-bottom:0px;
padding:1em;
font-size:11px;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:green;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}
.ipod
.ipod
{
margin-bottom:0px;
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;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}
{
margin-bottom:0px;
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;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
_white-space: pre; /* IE */
}
The negative bottom-margin compensates for the auto-linebreak setting on Blogger.
Sunday, September 25, 2005
New Blog
I explain my reasons for starting this blog in the other one. The emphasis will be on design. The title comes from Walter Pater's conclusion to Studies in the Renaissance -- one of his characteristically felicitous phrases:
The design of the blog, as the blog itself, will be a work in progress.
What is the whole physical life in that moment but a combination of natural elements to which science gives their names? But those elements, phosphorus and lime and delicate fibres, are present not in the human body alone: we detect them in places most remote from it. Our physical life is a perpetual motion of them--the passage of the blood, the waste and repairing of the lenses of the eye, the modification of the tissues of the brain under every ray of light and sound--processes which science reduces to simpler and more elementary forces.
The design of the blog, as the blog itself, will be a work in progress.
some rights reserved, © 2006