TEXTPATTERN As shown in Figure 6-31, all that extra text is overlapping the links at the bottom of the site (unless you happen to be looking in Internet Explorer (IE) on Windows, in which case the result will be slightly different but still a royal mess that needs sorting out). 6 Figure 6-31. The site s a bit of a mess just now Why a browser with good CSS support is important It s at this point that we realize we ve run in to real trouble. It s also at this point that we need a browser we can be fairly sure is playing nicely with the W3C specs in this case the CSS 2.1 specs (www.w3.org/TR/CSS21). So we must abandon our beloved IE for now because its support for these specs is patchy, to say the least. We ll come back to the troublesome browsers only after we sort out the genuine problems. It s only by doing things this way that we can avoid RHI (Repetitive Head Injury). If you wonder which browsers are good and which are not so good (or are surprised to learn that there are other browsers possibly better than IE), then pop over to http:// browsehappy.com and get the details. 249

BLOG DESIGN SOLUTIONS What is immediately apparent is that Textile is easier and quicker to write. Paragraphs are created in much the same way as they are in word processing software by pressing Enter twice and there is no hassle remembering to close tags. Textile takes care of all that for you. To the left of the post is a link titled Textile Help that lists commonly used Textile mark-up, whereas the More link at the bottom of the list takes you off to the main Textile website (http://textism.com/tools/textile) to receive a more in-depth look at the mark-up. Of course, you can use XHTML to make posts if you want: simply change the drop-down menu under Advanced Option from Use Textile to Leave text untouched. Adding some extra content Armed with this knowledge of Textile, we can easily extend First Post to include more paragraphs. Simply copy and paste the first paragraph four times, ensuring that you press Enter twice between each paste. As ever, remember to press Save on the right of the post. Figure 6-30 shows the process. Figure 6-30. Adding more text to the site

TEXTPATTERN #sidebar-2{ background-image:url(../images/stretchy-head.gif); height:160px; } Rogue white space and other undesirable behavior Look at the design and notice that there is an undesirable gap between the head and the middle images. And the text doesn t fit within the confines of the design. Now might seem like the time to start worrying about it, but don t worry yet because there are bigger issues we have to deal with first. I just wanted to flag the problems now so that if you are fol lowing along step by step you know that it s fine to carry on. We ll fix these issues in due course. A first look at a blog post If all our blog posts were going to be exactly the same length as First Post, our work here would be simple. But you and I know that this won t be the case: websites need to stretch, at the very least, vertically. So, to highlight yet another problem that needs fixing, the contents of that First Post need to be extended (although we are bound to get a little distracted by some TxP features along the way). Pop along to Content . Articles and click on the words First Post. The post will open in the write tab. Notice that there is no HTML in this post and for good reason. Click the Advanced Options link to the left of the text area. You ll see the title Use Textile and under that the heading article and a drop-down menu that by default contains the words Use Textile. A brief look at Textile First off, what is Textile? In short it s an easy way to write XHTML for people who don t normally trouble themselves with such things. Let me show you a quick example: In XHTML we might write this:

My level 1 heading

My first paragraph

My second paragraph

Written in Textile that would look like this: h1. My level 1 heading My first paragraph My second paragraph 247

BLOG DESIGN SOLUTIONS to this: #content{ border:1px solid green; background-image:url(../images/stretchy-middle.gif); } Finally add the foot image, remembering to press Save at the bottom of the page when you re done. #sidebar-1{ border:1px solid red; background-image:url(../images/stretchy-foot.gif); } More thoughts on semantics This is a good time to return to our discussion on semantics and