Friday Sep 26, 2008

About CSS, two column page

I noticed that my home page web site suffered from the same problem that the public blog used to, it didn't have a width constraint and as the browser grew to full screen size the content pane gets wider and wider making paragraphs harder to read. Like this, if you look hard.

my old site

In the article Fixing my blog theme..., on this blog I described how I implemented automatic margins using a fixed width and <CENTER> tag. does not use tables for formating its page and for some reason, the technique didn't work, although this may have been due to a fault in my code. Anyway, I now have a better answer.

Bluerobot, suggests using

margin: auto;

as the technique for centering the document object. From my previous work, I know I want to specify a fixed width and reckon that 1000px is a good fixed width for the document. I havn't explored if amending the <BODY> rule has the effect I want, since while I did apply the rules to the BODY tag, I need a whole page encapsulating DIVision for other reasons and my current solution is to apply the CSS sub-rules to that DIVISION's rule. The old page had three divisions, a banner/header, main content and the menu. Apart from the exterior automatic margins the second part of the problem is to ensure that the positional rules for the three divisions work correctly, most importantly that the positional rules inherit the page constraints we are defining.

This tutorial at, explains how to use relative and absolute position attributes to do what's required. I tested it with the following code,

.outer {
    position: relative;
    width: 500px;
    margin: auto;
.inner {
    position: absolute;
     top: 10px;
    right: 20px;
    width: 250px;

The BODY section contains,

<DIV STYLE="background-color: gray" CLASS="outer">
<DIV CLASS="inner" STYLE="background-color: #0080C0">

and this looks like this,


the key thing I had to learn was that the encapsulating division needs to be defined as relative, and the interior object is then defined as absolute and the locational parameters in the .inner i.e. top & right are then absolute within the .outer division. Does this make sense? I have underlined the position attribute values above. The other key lesson is to learn that CLASS and ID attributes are different. On my home site, I use IDs throughout; I was advised to use them originally.

So I need a new DIVision, this is called #Page and associated with the division via the ID attribute

#Page {
    margin: 0px auto;
    width: 1000px;
    position: relative; }

I have moved the location breadcrumb into the Header/Banner division, but otherwise left the #Header division alone, it inherits the width from #Page; it is encapsulated bt tghe #Page DIVision. The #Content DIVision I have left alone, and is placed in the default location, which is within #Page.

The #Menu division rule has had the following lines added

position: absolute;
top: 75px;
right: 20px;

The page structure is as follows

<DIV ID="#Page">
    <DIV ID="#Header"></DIV>
    <DIV ID="#Content"></DIV>
    <DIV ID="#Menu"></DIV>

which is what's wanted, a nice list of html content, with all the look and feel held elsewhere, just paragraphs, links, and division statements. Actually the banner is a table still, but now I have a fixed width, I can work on making an image file. The outstanding job is to work out how to create and name a rule for the paragraph containing the breadcrumb trail.

and this is what the index/home page looks like. You can see the two whaite space margins either side of the page. I have briefly tested it with Opewra, Firefox and Explorer.


Wednesday Aug 27, 2008

Fixing my blog theme for Firefox 3

I adopted Firefox 3 the other week and it became obvious that there were several bugs in my weblog theme. These are now fixed, or I hope so.

So the weblog is now the width of the banner picture, we don't get the horrible repetition effect if the browser window is made too large. The weblog is also centre justified in the panel. In order to get this effect I have placed a <DIV style="width:1024px"> around all the content in the weblog file. 1024 pixels is the width of the picture in my banner. In order to ensure the html version of the weblog is located in the centre of the browser panel, I have surrounded this DIV with a <CENTER> tags. Interesting how easy the changes were, but the testing and clumsiness of roller's interface has meant that its taken me along time to get to this point.

I have discovered some additional problems with the theme, which I have fixed in my development environments, but not here yet. The planned end goal is to remove the tables from the theme and replace them with <DIV>s and CSS rules.


Thursday Aug 21, 2008

I was checking out some of the pictures from my flickr groups and came across some fantastic pictures of Santorini. On looking at the author's photo stream, I discovered they had created a "cool sign", to decorate their profile page, which I immediately had to check out. So here's mine...

Made with My Cool Signs.Net


Tuesday Aug 12, 2008

using twitter to share

Some colleagues use twitter to notify their correspondents of their blogs. I have discovered 'twitthis' as a remote javascript and embedded it into this article. Actually it was pointed out in an article in the Guardian which suggest maybe twitter is losing its edgyness. I have changed the picture, to make it a better fit on the article affinity line, as a companion to technorati, digg, slashdot and delicious.

twit this: <script TYPE="text/javascript" SRC=""></script> <script TYPE="text/javascript"> </script>

You might recognise this picture better.

You need to be logged into twitter for this to work, maybe through the script. I have run one test and this article is part of the second test. If this works I'll add it to the 'share this' line, and let you know how it works.

It advertises itself at

I shall probably not add this to the 'share this' line; the script points at the blog, not the article, so I shall put this in the sidebar sometime.

Please let me know if you find the lag as it executes the script unacceptable.


Thursday Aug 07, 2008

Rendering a feed into HTML with Grazr

While researching this development of my personal feed, I looked for a generic client side javascript to consume and display feeds, a bit like the twitter and delicious widgets in the sidebar, although these gadgets are tightly tied to their authors own feeds. I found GRAZR, which has offers an aggregation service for its members and a widget against any feed for casual visitors. It has a bunch of themes, and I have illustrated one here....

Grazr <script DEFER="defer" TYPE="text/javascript" SRC=""></script>

I was looking to embed some of both my published feeds and those I wish to syndicate, having read, onto my HTML sites. This looks like it might do. The example above is my bookmarks feed from delicious and so doesn't have different icons nor different italicised feed names; it is only one feed. I expect one has to use their aggregator to get different icons.

tags: "" ""

Wednesday Jan 30, 2008

Mashing up with Snipsnap

Having run a personal snipsnap wiki for a number of months, I have got to the stage where I want to use it as a host for a couple of mashups. Fortunately there is a user contributed macro that allows for the use of HTML within a snipsnap page. Otherwise, because the page input screen interprets a markup language, all HTML is treated as text. This macro is installed by copying it i.e. the .jar file to the directory named in the Java CLASSPATH. It really is as simple as that, and then using snipsnap's macro syntax. You can also see what I have written at my bliki.

<SPAN STYLE="color:red">This font is Red caused by a Span tag pair</SPAN>

This has allowed me to embed a google map in one of my pages, the example below is about Brussels.


Snipsnap + Google Map


and the example below shows a tag roll.


Snipsnap + tag roll


In both cases, I have implemented then using <IFRAME> tags; in Google's case because they suggest it and in the case because it is a Javascript and the CSS wasn't working. It seemed easier to escape the CSS domain by using IFRAME as I have had difficulty with this problem before. I think its to do with the anchor rules I define in the CSS files. I have had this problem with roller as well, although not with the tag cloud as you can see my checking out My Links page at, although it remains marked as beta. You can also see what I have written at my bliki, but again, its not much more.


Monday Jul 30, 2007

Is it safe to go out?

As an occasional sailor, the weather forecast is important to me and I have experimented with various ways, short of looking out the window as to how to get an accurate forecast. I have just updated my South Coast Travel public google map to include placemarks with links to the BBC and Met. Office weather reports. I am disappointed that google have no obvious weather icon and that the i icon is available in only one colour.

Also I'm grateful to Alec Muffett for showing me the current BBC local pages, which are really rather good. As usual with my blog, hover or click to view it.

I did poke around the Google maps API pages and may take this further so that I can incorporate the page into

Otherwise its screen shot and link to the Google Maps URL, like this.


Friday Nov 10, 2006

More about Tag Clouds on roller

Another e-mail exchange with Dave Johnson, and a quick look at the Velocity manual and I have produced the tag cloud at the top of this page which only includes those tags, with more than two occurences.

I set an interest threshold, and then within the foreach tag loop test the tag count against the interest theshold.

  #set ( $interestthreshold=2 )
  #set($mytags=$model.weblog.getPopularTags(-1, 100))
  #foreach ($tag in $mytags)
      #if ( $tag.count > $interestthreshold )
        <A CLASS="tag s${tag.intensity}" HREF="$url.tag($"
           TITLE="$tag.count"> $</A>

The tag is only written if tag count is greater than the threshold.


Sunday Jan 29, 2006

Qube Diaries!

I've finally got an instance of Snipsnap running on my Qube and I've mucked around with the look and feel to give it my "Green Robot" look which my home site also has, if you like it, you can go there and download it.


screen shot of my snipsnap front page


I have used the .war version of snipsnap and have thus had to install Java, tomcat and snipsnap; the Qube's Linux does not come with any of these! Once I got the downloads to work correctly, this is fairly simple.

Java went on easily as you'd expect. I just followed the installation instructions at I took the full J2EE SDK pack for Linux. With tomcat, I took the binary distribution (V4.1) for Linux from the apache tomcat site. (I can't rember why we only took V4.1, there was a reason; it might be because of the oldness of the linux distro, or it might be Snipsnap thing.) Anyway the install is just a cp [copy] command. I then wrote a rc.d script for tomcat which needs to know where the ${JAVA_HOME} directory is but otherwise I have invoked the start and stop scripts distributed with tomcat. (They're in the ./bin directory). I also had to dick around with the tomcat-users.xml file. Installing Snipsnap was even simpler, with the .war version, you just need to upload this using the tomcat manager screen. When I uploaded the .war to tomcat, I had renamed the .war to snipsnap.war. (I think this is where it inherits its namespace root from, but anyway, you don't want all that version stuff leaking into the database structure.) All that's left then is amending the CSS to develop a new theme. Again Snipsnap's documentation is quite good and my only problem was my own CSS coding.





« July 2016