Center an Image with CSS

  • Posted On: March 30th, 2008
  • Filed Under: CSS

Centering an image is a bit of a tricky endeavor. It used to be just a case of wrapping the image in <center> tags but that's no longer the case. In today's web standards we can't use the <center> code and as a result we need to develop some CSS code.

The following code is something I've been using for awhile now and I'm quite happy with it. It can be used to center images and can also work with text and certain types of media (like YouTube videos.)

To get started you'll want to open your stylesheet.css file and browse to the area which holds rules concerning images. This code doesn't have to go anywhere specifically - it's just helpful to put it near all the other image related rules.

In this post we're just going to create a CSS class that's meant to handle images that appear in posts - if you're so inclined you can also use it in your general theme structure too.

Customizing the <!–more–> Tag in WordPress

At hackingWordPress we write A LOT of longer posts and we use the <!--more--> tag A LOT. We do that for a few different reasons.

The first reason is a practical one. Without breaking our posts off somewhere our frontpage would run on endlessly! Five back-to-back long posts would drag things out way to far. The <!--more--> tag allows us to break things up a bit and keep our front-page scannable.

On a more devious note it also helps us make our posts more clickable in our category pages, front page and even in our RSS feed. If you're subscribed to hackingWordPress you'll see that the more tag causes our a link to appear beckoning you to click through to read the post. It's a great way to get people visiting your site rather than just looking at the content in your RSS feed!

In this post we'll go over how to quickly customize your what <!--more--> displays on your blog to help get a few more visitors!

Wrapping Text Around Images with HTML or CSS

  • Posted On: January 7th, 2008
  • Filed Under: CSS, HTML

Many bloggers swear by the use of images in their posts. Images are a quick way to provide flair for your posts as well as increase their readability. In most cases a solid graphic can also help people better understand what exactly your writing about.

When designing a theme, or even just tweaking a theme for your own use, it usually pays to take a few seconds to create a some special rules for dealing with images. In this post we'll cover the use of HTML and / or CSS for managing images as they'll appear on your site.

The red block you see throughout this post is meant to illustrate the various benefits and shortcomings of each method.

HTML Validator for Firefox

  • Posted On: January 6th, 2008
  • Filed Under: CSS, HTML, PHP

Whenever you start work on a new theme you want to make sure that all the code validates properly. While in the long run you'll find yourself at the mercy of code from Google, YouTube and other widget producers you definitely want your code to be as clean as possible.

The W3C offers a number of tools for validating everything from HTML to CSS but to use them you must manually enter the URL of each page you want to validate.

HTML ValidatorThat's why I use the Firefox HTML Validator extension.

This extension gives you a quick snapshot at your code and instantly tells you if there are any errors that prevent you from having "valid" code. It resides in the lower portion of the Firefox interface and simply shows you an icon telling you if you're site validates or not.

Clicking on the icon will provide a window that allows you to quickly jump between errors on the page too - which makes debugging and cleaning things up much easier. If you're using Firefox grab this extension ASAP.