BlogSchlager WebTech

Archive for January, 2009

This is a bit of a departure from my usual post but I get questions from folks struggling with positioning images or other objects with HTML, so I figured I would share one of my favorite tricks to get the job done. Those that started hand coding HTML back in the old days (90′s) like I did had to find ways to solve positioning problems and make very incompatible browsers happy at the same time. One of my favorites is to wrap images in a special div and then use margins and padding styles to precisely position the image.

So here is what you can do:
First, lets setup the scenario. Your image needs to be aligned to the right with text wrapping it but it needs to be off the right margin by 20 pixels. The first thing you will need is our good friend the <div> tag. Div’s are what the name implies, divisions or as I like to think of them logical blocks.

Unlike the old days, modern browsers love div’s and they also generally agree on how to display them correctly too. I have included an image here that meets our scenario and does what the customer wants. It is right aligned, text wraps around it to the left and it is indented 20 pixels (px) from the right.

So starting with our image tag:
<img title="light rail 1" border="0" alt="VTA Light rail train" src="$DSC00007_thumb.jpg" width="244" height="184" /> We then add our div tag to it.

<div><img title="light rail 1" border="0" alt="VTA Light rail train" src="$DSC00007_thumb.jpg" width="244" height="184" /></div>

We next add inline style sheet properties to it to make it do our bidding. It is important to understand what we are going to do here before we go any further. We are going to place a tight rectangle around our image and move the image around with it. So we have our div and to that we are going to add a style property like this: <div style="">. Within the "" we will add the following attributes. Width, font size, line height, alignment, and padding.

Our div needs to be the same size as our image and our image is 244 pixels or 244px wide so our div needs to be 244px wide like this: <div style="width:244px;">. Next our div needs to have its font size and line-height set to 0px, this will ensure that the div tightly envelopes our image. <div style="width:244px;font-size:0px;line-height:0px;>. Next our div needs to move the image to the right: <div width:244px;font-size:0px;line-height:0px;float:right;">. We are almost there. The final property is how we will move the image 20px inset from the right margin. To do this we can use our margin property like this. <div width:244px;font-size:0px;line-height:0px;float:right;margin-right:20px;">.

So that is it, pretty simple but pretty powerful too. What if you need to move the image, down 30px and inset from the right 75px? Using our code that now becomes a pretty simple task.

We just modify our div slightly and add a top margin property like this:

<div style="line-height: 0px; margin-top: 30px; width: 244px; float: right; font-size: 0px; margin-right: 75px">

As you can see by the image to the right it works great. So the next time the boss says, "can you move that image down a bit and to the left?" You can confidently say, "I sure can let me show you."

Here is the complete source code:
<div style="line-height: 0px; margin-top: 30px; width: 244px; float: right; font-size: 0px; margin-right: 75px"><img title="light rail 1" border="0" alt="VTA Light rail train" src="$DSC00007_thumb.jpg" width="244" height="184" /></div>

That is it for this installment of Stupid HTML tricks, enjoy!

Part of what I do is evaluate new Web technologies and a lot of my time is spent looking at new web 2.0 technologies. One of the very cool developments in the Blog world is the development of some really first-rate 3rd party editors. I use Microsoft’s new Live Writer in the Windows world and I am in the process of looking for an equally good editor in the OS X world.

Today I am looking at the Freeware Beta offering from Qumana. Connecting Qumana was pretty straight forward and simple so it passes the ease of install threshold. Next is the UI and it too is very functional and intuitive. It is limited however, with very few options bells or whistles. To be fair though it does do the simple things simply and is a big improvement over the text editors built into Blogger, WordPress, or TypePad and that is really where the rubber meets the road.

Qumana does have a spell check built in, the ability to color, bold, italic, underline, strike through, change font family, and font size.

You can add a picture.
You can align your photo left, right, center, or default.

You can add links, and it has the ability to handle multiple blogs. It also has hooks for inserting Google Adwords, Tags and html. It has a WYSIWYG and Source View for power users mode.

The bad news:
The Qumana editor does not allow you to create a page, or if it does I have not found out how.

While trying it out on my BlogSpot Blog I could not for the life of me figure out how to add and upload an image. Every time I tried to add a photo to my blog it would only add the image with a local link to my desktop. I figured OK, maybe the only way to add a photo is to have them already uploaded and link to them. So, I added the photo I wanted to use to my Picasa album and copied the image link. But when I published the article, nope, no image. After about an hour I gave up.

Overall I think that Qumana will satisfy the blogger in every Mac lover. The price is right, and it is a great replacement for those pesky built-in Blog editors. However, it still is not as good by far as the Windows Live Writer by Microsoft. It seems that there is a lot of room for improvement in the Qumana project. It would be nice if someone came up with an editor that was in the same league as Live Writer for the Mac. If you know of one, please send the link my way I would be happy to try it out!