James Titcumb

When writing my new sites I try to use the new features of HTML5 and CSS3 and so on where appropriate. Specifically at the moment I’m styling up a blog posts page and want to apply style to the new HTML5 <footer> tag.

Firstly, to use the new HTML5 elements as you would’ve a <div> in XHTML or older HTML, you need to tell your clients’ browser to render these new elements as block-level:

article, aside, footer, header, section {
    display: block;
    }

Once that’s done you’ll also need to include a special Javascript for older Internet Explorer browsers to enable styling of the new elements. I’ve not had a chance to look at this script in detail (it’s minified, I’m lazy…), but I’m confident it’ll do the job. Just to note that it’s only Internet Explorer you need this fix for – Gecko and WebKit-based browsers automatically style any unknown elements (and thus these new HTML5 elements). The script homepage at time of writing is here, all credit for the script goes to Remy Sharp. To use it, simply put this in your tag:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The script is hosted on Google Code, but you can download it to put on your own server to save an extra DNS request.

On my blog I use a plugin called Social Homes, which gives me the favicon of each social site I’m a member of and a link to my profile on each site on the top left hand corner. However the default style is that the icons are left aligned and the margin is a little bit too big. I tried putting an override in my styles.css:

div.socialhomes
{
  margin-top: -5px;
  text-align: center;
}

However, inline styles (i.e. style=”…”) take precedence over all external styles. My opinion is that they shouldn’t be used because of this, and the plug-in developer should’ve used external CSS to achieve the styles. However, there is a way around it, by using the !important modifier. I’m not sure about browser compatibility, but in my instance it’s not that critical, so I’m not fussed about it… I simply changed the above class to this, and it worked!

div.socialhomes
{
  margin-top: -5px !important;
  text-align: center !important;
}

Like magic… It basically says “this style is really important, don’t over-ride it”… so there you have it!

One thing I ensure I do on all sites is to develop for two audiences at once. The first audience is of course the end user of the site. This user has CSS enabled, and can view all the prettyness of the site in all its original intended glory. But I also develop the site for text-based browsers, search engines and those with CSS disabled. The advantage of this is that the page is semantically correct. You have <h1> tags around the site title, <h2> around the page title and so on. Menus are in <ul> unordered lists, and so on. Semantically correct pages are instantly more SEO-effective. Working at Netbasic has shown me how important that is ! In addition, for the small population that use text-based browsers, it enables them to view the site without mess.

If you have a nice logo to display, and you don’t want to display a big bulky <h1> tag on your page, there’s a really easy way of doing that:

<div class="site-title">
<h1>Your Site Name</h1>
</div>

This markup is great for search engines. Search engines will see the <h1> tag and notice that “Your Site Name” is the page’s main title. Little things like this help search engines determine what your site actually contains, as opposed to the hugely ineffective method of repeating a load of words several thousand times in tiny text…

The way to make that neat semantic code look nice and pretty is with CSS, in order to hide that “Your Site Name” text but display your nice company logo instead…

div.site-title
{
background-image: url('/images/your-company-logo.png');
}
div.site-title h1
{
display: none;
}

As you can probably tell, what this CSS does is ask the browser to display your company’s logo as the background image to this div, and hide the <h1> text.

There’s another issue though – how do we make that lovely logo clickable to go to the home page? That’s easy too, and semantically.

<div class="site-title">
<h1>Your Site Name</h1>
<a href="/home/page/url"><span>Click here to go to the home page</span></a>
</div>

We modify the CSS as well to hide the text itself (in the <span>) but make the anchor (the <a>) tag into a block, which turns it into a link that covers the entire logo.

div.site-title
{
background-image: url('/images/your-company-logo.png');
}
div.site-title h1
{
display: none;
}
div.site-title a
{
display: block;
width: 300px;
height: 60px;
}
div.site-title a span
{
display: none;
}

We’ve used a similar trick here to hide the text that should only appear when CSS is turned off. As mentioned, we explicitly set the dimensions of the anchor tag to fill the dimensions of the logo image.

That’s all there is to it, and search engines will love that as opposed to just using something like this for your logo:

<a href="/home/page/path"><img src="/images/company-logo.png" title="Company logo" /></a>

The search engine or text-based user looking at your site will be able to see clearly what the page title is, and it will load really quickly as unless you’re applying the CSS styles, there will be no images to load, which makes it an all-round winner really!

I’m not saying this is the best way of doing it, but I’ve found it to be quite clever and I use it. If someone’s got some better ideas out there, why not add a comment with your idea

I’ve been getting to know Zend Framework, and despite it being awesome so far, there’s a few quirks I just don’t understand… maybe I missed something…

Anyway, David Cooper posted a quick howto on adding CSS to a Zend Framework page, which works and is all well and good, but there was a problem. The code that Zend Framework spits out was not XHTML valid. As I said, I might’ve missed something out, and this might be a really convoluted way of doing things, but give me a break, I’m just learning it!

Firstly, in your controller’s action (e.g. IndexController::indexAction), add a list of CSS files:

$css_files = array('index.css','test.css');
$this->getFrontController()->setParam('css',$css_files);

Modify the list of CSS files to suit your needs. Note that the $css_files must be an array, otherwise the helper class will ignore it. Now add a new PHP file in application/views/helpers called ‘CssInclude.php’, and put this in it:

<?php
 
class Zend_View_Helper_CssInclude
{
	function cssInclude()
	{
		$output = '';
		$fc = Zend_Controller_Front::getInstance();
		$baseUrl = $fc->getBaseUrl();
		$css_files = $fc->getParam('css');
 
		if(is_array($css_files))
		{
			foreach($css_files as $css_file)
			{
				$output .= '	<link rel="stylesheet" type="text/css" media="screen" href="';
				$output .= $baseUrl . '/css/' . $css_file . "\" />\n";
			}
		}
		return $output;
	}
}

This is a helper class that takes the parameter you set in the controller, and simply churns out an XHTML valid <link> tag. There’s just one more step, add this in your layout or view:

<?php echo $this->cssInclude(); ?>

And voila! If there’s a better way of doing this, then I’d like to know!

Many people across the world have made this pledge:

I will publish a blog post on Tuesday 24th March about a woman in technology whom I admire but only if 1,000 other people will do the same.

Here is mine, and although I didn’t have to think very hard about who to post about, I still admire her more than anyone in the world.

Hannah is 39 weeks and 1 day pregnant today, and she’s still working hard at Netbasic. She’s not exactly a pro programmer, but she’s learning so quickly. From knowing nothing at all about HTML or CSS or Photoshop, she’s come forwards in leaps and bounds with the help of everyone here. It’s certainly not easy for her, she gets aches and pains all day, Braxton Hicks contractions, extremely painful kicks, and all sorts. She’s under the weather, tired and very drained, yet somehow she is carrying on, she’s still working hard and creating pages that are helping keep the company going!

I suppose this is just my way of saying how proud I am of her, and how awesome she is.