Archive for the 'Development' Category

Why Wordpress?

WordpressWordpress is probably one of the best pieces of software for blogging on the web. Since it runs entirely off of your web server, it is incredibly powerful and useful. One of the things I like about it is that it’s just as powerful when used as a CMS (content management solution). The big misnomer is that Wordpress is only for blogging… it’s not!

Every site I create uses Wordpress for several reasons. Clients are able to easily update their content, friendly urls are easy to create (great for search engines) , and all of your content can be searched from within your site!

If you design many sites, or run your own personal site, I recommend using Wordpress for your needs. Your clients will love it and you’ll love it!

In the coming weeks, I plan to highlight some great plugins I use for Wordpress along with other tips and tricks.

Left, Right, and Center with CSS

TopStyleI use TopStyle to write code for various web sites. It’s still my editor of choice and for many of you… hand-coding is the only way to go. For those hand-coders writing CSS and XHTML, look at the 3 examples below:

Example 1:
.boxa { text-align: right; float: left; }
.boxb { text-align: left; float: left; }
.boxc { text-align: left; float: right; }

The above example works ok, but lets say you start to add more elements to your page. If they don’t fit within the already written styles, you need to add onto your style sheet or edit your current styles.

Example 2:
.boxb, .boxc { text-align: left; }
.boxa { text-align: right; }
.boxa, .boxb { float: left; }
.boxc { float: right; }

Example 2 is somewhat better, however then you’ll run into the problem of having a bunch of .boxb classes everywhere in your style sheet.

Example 3:
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.floatleft { float: left; }
.floatright { float: right; }

I find this to be the best solution. It keeps your style sheet size down and it makes it easier to get your layout just right. For example, you have this tag:

‹div›Information and Text Go Here‹/div›

Now we can start applying styles to it very easily:

‹div class=”floatleft right”›Information and Text Go Here‹/div›

We can easily change the float from left or right, or change the text alignment. Take some other common styles like:

.bold { font-weight: bold; }
.italic { font-style: italic; }
.fonta { font-size: 1em }
.fontb {font-size: 1.25em }

Styles can be applied or changed right from within the HTML document. There’s no need to constantly go back and forth to the style sheet. You also don’t have to remember… did .boxa class have bold in it? Did .boxc class have a float right? Now you can just type bold , floatright, or center in your div tag. It’s like using the ‹center› tag, but making it XHTML compliant!