Posts Tagged ‘html’

Creating ‘Web 2.0′ Layouts using strips

November 13, 2008 | Published in: Web design & development | Tags: , , , , 10

Creating Layouts using strips

I’ve seen the ‘web 2.0′ layout (full width background, centred content) done in some pretty wacky and different ways, the worst being a background image and then fixed height sections laid on top (if the content wraps or the text is resized…bam..broken layout).

Because of this I am going to demonstrate the method I use – content strips. Hopefully this will be useful to CSS beginners who want to code this type of layout.

Continue reading Creating ‘Web 2.0′ Layouts using strips»

Creating an accessible yet sexy search box with CSS

Create a Search BoxSearch boxes: integral parts of many websites but often neglected in terms of markup and style. When considering both accessibility and semantics, marking up a a search box can be a little awkward depending on the look you are trying to achieve.

In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.

Continue reading Creating an accessible yet sexy search box with CSS»

Window Resize/Mobile Browser Background Bugs

Background Bugs Last week I noticed something very odd on Blue Anvil when resizing the browser window; after some casual browsing I discovered it was not just my site with the problem and that it was quite widespread on many ‘web 2.0′ style sites.

The problem occurs when resizing the browser window; cutting off background images and potentially making text illegible. Worse still, the bug also seems to affect mobile browsers with a zoom function, such as opera mobile.

After some dabbling I found a solution, which I shall explain in this post.

Continue reading Window Resize/Mobile Browser Background Bugs»

Using Image replacement techniques

Image ReplacementThis week Ive been trying out a lot of image replacement techniques in main headings, and their are quite a few available. If you have a graphical header logo on a website, with the sites name, often you wont want to have another heading as plain text. Yet, you should want to have the heading readable by screen-readers, and you also want the SEO benefits of the heading.

Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.

Continue reading Using Image replacement techniques»

Guide to Semantic Mark-up

August 22, 2006 | Published in: Accessibility, Standards & SEO | Tags: , , , , 23

Image of a tagMany people make the mistake of using tags for appearance only in their websites, but with semantics you get the benefit of describing your data as well. This makes it more accessible and of a higher quality, and of course fulfills the main objective; separating content from presentation.

This article is aimed at semantic mark-up beginners, including clients who want to learn more about code so they can ensure their sites are semantically correct. It also shows the mark-up available and it’s usage.

Continue reading Guide to Semantic Mark-up»

About this site

Blue Anvil is the online web design journal & portfolio of , a web designer from Norfolk, England. Read More »
MiniCard Theme for WordPress
  • Featured work - More

    • Beefjack
    • Integrity
    • theotaku.com
  • Latest Tweet - More

    • RT @jameskoster: Free MacBook Pro vector; http://www.potatoestomatoes.co.uk/technical/free-macbook-pro-vector/ #vector #resource
  • Out of the blue - More

    • Closing the Forums

      Just posting to let current users know that I’m closing the forum on Blue-Anvil. This is mainly due to spam-registrations getting out of hand and being a general nuisance. I will be posting good topics as FAQ items within posts if applicable.

      Please note that you can still post and get help for my plugins/themes by posting on the wordpress.org website.

    • Show off your MiniCard!

      Are you a user of the WordPress MiniCard theme? Its been downloaded over 14,000 times so far!

      If you have used it as-is, made your own child-theme or done something creative with it, please show off your MiniCard’s in the comments, I’d love to see how the theme is being used!

    • Spam Stopper updated for WordPress 3.0

      My Spam Stopper plugin has been updated for WordPress 3.0 (version 3.1.3) – you can grab it here. Sorry this update took longer than my other plugins but this one gets less lovin’ – if you want to change that feel free to donate, spread the word, or rate it on the WordPress.org plugin page.

    • SexyBookmarks & Tr.im

      Just a notice to users of the brilliant http://www.sexybookmarks.net/ plugin by shareaholic – If you use tr.im (as I have on a few client sites) be aware tr.im has ceased operation so you may see errors on your blog or in your source code; it screwed up the background and headings on one of my blogs.

      To fix, go to sexybookmarks options, switch services in the “Which URL Shortener?” box, and tick the box to reset all short urls. Once done, your blog should return to normal.