HTML and CSS
CSS Basic Page Structure
CSS separates content from design making your sites easier to maintain, faster loading and more search-engine friendly. And if you build basic templates for the layouts you commonly use, just open one up for every new page or site and part of your work is already done.
Certainly using CSS means learning some new code and looking at coding in a slightly different way. But instead of continuing to build sites using outdated code, a little time invested now will save you a lot later.
TGP Makeover
Using tables to code text-based TGP’s undermines a lot of the SEO potential edge these otherwise content-rich sites might have, by leaving them with a high code to content ratio. And if a little clever CSS isn’t used, they can also suffer from that familiar lag before the whole page pops into view. The advantages of going table-free are not as great for thumb-preview TGP’s, but as this article shows, the code for even a simple site can be reduced by 25%.
Troubleshooting CSS
Even experienced CSS coders will face a page which doesn’t come out looking as it was supposed to. More often, a page will look fine in one browser but not another. Whether writing HTML and CSS or debugging them, a methodical approach and attention to a few guidelines will make your life a lot easier.
CSS Boxes
Incompatibilities in the way that different browsers render the same code are infamous and sometimes quite dramatic. Here one such is illustrated… and solved.
Image Alignment
Default image positioning in WordPress is left aligned with text following in a new paragraph underneath. Of course this is not the only option, but there are some cross-browser pitfalls lurking for those who seek to be more adventurous.
CSS and the Humble List
The humble list offers a rich variety of options for CSS-savvy webmasters and as much as any HTML element, illustrates the potential power of CSS. This article touches on just a few of those options to suggest directions for further experimentation.
Why Tables are Bad
Tables were intended as a way to present data which is more comprehensible in tabular form. They became a design tool at a time when there were no better options. But now there is no excuse to be delivering flabby, overweight pages which are expensive to maintain and that cost points with the search engines.
Toplists via CSS
Here are the HTML and CSS you can customize and use to replace tables if that’s how you are currently displaying multi-column toplists.
Doctypes
If you think you have coded everything correctly and your page doesn’t look the way you expected in every browser you use for testing, your doctype declaration – you did use one of course – could be the culprit.
Flexible SE Friendly TGP Layout
This is an attempt to produce a thumb-preview layout which is both search engine and surfer friendly. It inevitably becomes a hybrid in the process, but some elements can be retained even if you want thumbs only. And did you know that if you size images in em’s instead of pixels, your visitors can make them shrink or grow to suit their screen size and resolution?
Table-free Mixed Thumbs
Earlier articles have shown how to place thumbnails in a block without the use of tables, but all of them so far have used a single size of thumb. A visitor asked in the forum here how to include one large thumbnail in such a block. The solution – except for having to fix Explorer’s double-margin bug – is very easy.
Troubleshooting CSS
You created your page, it looks great in one browser and horrible in another. What next? Sometimes the solutions are obvious and other times several small errors are working together to create the changes you see. The only way to catch these and correct them is with a methodical approach to troubleshooting.
Inheritance multi-classes & groups
Halfway down the page in your new design you suddenly get a space between two lines which you know you didn’t put there. That could be inheritance, although in fairness it is a feature of CSS which not only needs to be understood, but can be used to help you keep your HTML and CSS files as trim as possible.