Archive for February, 2005

Sign of the times

Label with two fields - Name and EmailWhen I was a little boy, my school coat had a label in the back, with room to write my name on. When I hit secondary school in 1974, coats had an extra space for a phone number. In 2005, my six year old’s new coat shows that phones are so last millennium.

Song: “Closing My Eyes”

Done with my band The Lucies. Woh!! Teenage – or rather, early twenties, angst. There was half an hour at the end of a long recording session so we quickly did this – and kept it, sandpaper throat, microphone pops and all, due to our being out of time and money. It was a staple of the live set, the rest of the band nicknaming the song “One for the ladies” due to its popularity with the girls in the audience.

Shez on bass, Bruce on guitar and overdubbed lead guitar, Andy Cope on moral support.

My heart is telling me lies again. I’m closing my eyes to them.
I’m closing my eyes.
My brain is talking good sense again. It’s advice that I’ll reject again.
I’m closing my eyes.

I feel pretty good inside. I’m gonna try to do it right this time.
Gonna try not to hide.

I know that I don’t know you well, but even so I can tell
that with you I could feel free.
And yet, I cannot speak to you about what I think of you
and what you’ll take from me.

I feel pretty good this time. I’m gonna try to do it right for you.
I’m gonna try not to hide.

My heart is intent on hurting me. My good sense is deserting me.
I’m closing my eyes.
My eyes are always deceiving me, my rationality is leaving me.
So I’m closing my eyes.

Sometimes I think I’m too shy; I’m closing my eyes.

Words / music © Bruce Lawson, all rights reserved

Preparing for a stylesheet switcher

Although my xhtml always validated, there were still presentational elements in the markup: for example, the #header div had an anchor to the home page that was coded

<a href="index.htm"><img src="bruce-logo"
height="xx" width="xxx" /></a>.

That was replaced by

<a href="index.htm"><span>Home page</span> </a>, using the css:

#Header h1, #Header a {display:block; background:url(images/bruce-logo.jpg) no-repeat center;width:auto; height:176px;}
#Header h1 span, #Header a span{margin-left:-5000px;}

That has the added semantic bonus that, on the homepage where has no link to itself (cos Jakob commanded me), the page title is a header, rather than a simple <img> in the header, thus paying me Google dividends.

Similarly, the "ransom note" images for main nav were just a collection of images separated by <br /> tags. That needed to be moved into the css so that the images could be changed on a stylesheet switch. This is a bit more cumbersome. Here’s the xhtml:

<ul id="mainnav">
<li><a id="home" href="index.htm"><span>Home page</span></a></li>
<li><a id="music" href="music.htm"><span>Bruce's music</span></a></li>
<li><a id="about" href="about.htm"> <span>Who is this wanker?</span> </a></li>
<li><a id="nav-photos" href="photos.htm"><span>Pics and stories</span></a></li>
<li><a id="writing"
href="writing.htm"><span>writing stuff</span></a></li>
<li><a id="links" href="links.htm"><span>links page</span> </a></li>
<li><a id="email" href="mailto:bruce%20AT%20brucelawson%20DOT%20co%20DOT%20uk"><span>send spam</span> </a></li>
</ul>

and here’s the CSS

ul#mainnav {list-style:none; margin-left:0px; padding-left:0px}
ul#mainnav a {display:block;}
ul#mainnav a span {margin-left:-5000px;} /* replace text for main nav buttons */
a#music {background:url(images/music.jpg); width:200px; height:72px;}
a#about {background:url(images/about.jpg); width:184px; height:46px;}
a#nav-photos {background:url(images/photos.jpg); width:200px; height:66px;}
a#writing {background:url(images/writing.jpg); width:200px; height:68px;}
a#links{background:url(images/links.jpg); width:190px; height:77px;}
a#email{background:url(images/email.jpg); width:200px; height:88px;}
a#home{background:url(images/nav_home.jpg); width:200px; height:88px;}

I don’t particularly like all the <span>s there for image replacement, and am toying with the idea of using the Image Replacement—No Span technique, but that requires polluting the CSS with box model stuff for IE5 (do I really give a shit about IE5?), so my internal jury is still out.