[fallback content] no <canvas> clock for you :-(

Andy's Home Page

Pinky

I know that a post-it note doesn't need a pin, but it looks okay!

Overview of Site

This is my personal web site for exploring and discussing CSS, HTML, JavaScript and PHP.

A Few Notes About This Page

The main title and headings link to a Google Web Font called Audiowide. The post-it note uses one called Gloria Hallelujah.

The two floated elements on the right would spill out of the main content area if there was not sufficient content on a page - the parent element does not expand to contain floated elements. I don't consider this an issue though, as there will always be sufficient content on each page. Nevertheless, the footer has clear: both in the css, which fixes this issue. Alternatively, overflow: auto on the parent element would also work.

This paragraph continues below the floated elements. The previous paragraph would also exhibit this behaviour but I have added a margin-right to that paragraph. This is perhaps not recommended. However, I have created a class with the margin-right setting, which will make it easier to apply, and modify, this setting to relevant paragraphs. Alternatively, I could float the main content to the left, and float a sidebar to the right. This would, however, leave a potentially large empty space if I do not have enough content for the sidebar. I demonstrate this approach on the CSS page.

code icons code icons code icons code icons code icons code icons

The image on the left that follows the cursor is built with a small piece of jQuery code. It is kinda cool but I might not apply it to other pages, as it could become a little annoying. It is also based on a setInterval which can occasionally break. That is, the follower may stick on occasion. It is probably possible to use some more complicated JS to prevent this, but a simple page refresh, or clicking the image, will kick-start it again.

The logos in the footer are floated to the right and padding is added to separate them. You might notice that they are not (quite) centred vertically. There are a number of techniques that would achieve this. One technique is to place the logos in table-cells and use the valign attribute or vertical-align css property. Another approach would be to place each link in another element and use the images as backgrounds to these elements, which can then easily be centred. However, the images are all of a similar size: sometimes the best approach is to do nothing!

up arrow up arrow