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.
Search 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.
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.
This 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.
Many 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.