Check out this weeks episode or Subscribe in iTunes

You can find the podcast and all of the podcast show notes online at http://zero1productions.com/webweekly/.

Check out this weeks episode or Subscribe in iTunes.

The real power is in the code. If you plan to make a application that needs to find the html elements of a page and you can’t access the DOM give this a shot.

While the application will not give you attributes, yet, or give you a multi-dimensional-array, yet, I think you might find it useful down the road. Please give it a look and tell me what you think.

And, yes! This is open source.

Check out this weeks episode or Subscribe in iTunes.

Update: Podcast has been cleared! Subscribe in iTunes

Also, we are working on making the podcast better. Please bear with us as we get more organized, and our nerves calm down.

Yes, its 2010, but people still use IE6… not many, but enough to be depressing. Still, all is not lost. I happen to run across lesser known PNG fix for the aging browser. It’s called DD_belatedPNG. Unlike the traditional iepngfix.htc hack this bad boy gives you the ability to use positioned backgrounds and still retain transparency, among other things. Check it out for yourself.

No hairs for IE

However, if you don’t want anything to do with IE6, you’re in luck. Just recently Andy Clark updated his universal IE6 CSS on Google code. The new version lets you scrap the browser completely by serving it a nicely pruned style sheet that does just enough to be professional. Consider it the default style sheet you wish IE6 came with.

First, if you are having trouble getting your site indexed try submitting the URL to a site that gets indexed frequently. When you submit your domain name to these site be sure their reputation is good. Search engines will rank your site based on how reputable the sites that link to you are. Twitter is an excellent example because they are both reputable and indexed often.

Google URL Adder

If you didn’t know, Google has its own tool for adding URLs to its index. If you’re not sure Google can find your domain, try applying for Google spider to crawl your site on this site by using the tool. Google uses spiders to index websites so they appear in their search results. If you’re confused about how Google works check out this video, or visit their page all about it.

Web Design Agency

Normally, if your relationship is good, the design company that is making your site will add your domain to their portfolio. If their site gets indexed often yours is bound to get picked up. Be warned that not all websites are added to design company’s portfolios. Many only show their best work so they don’t overwhelm new clients coming to their domain.

Be sure to recognize the decisions made by those you are working with. You never know what their situation is like or how many clients they are working with. However, chances are, if you’re a really good client they will do you a favor and get you indexed anyways.

Just think for a second here. If you know that Facebook has 4,000,000 active accounts, that there are millions of Tweets per day, and Google searches are the most popular place to find out about local business online; would you think they were important? Would you think a website was important?

In fact, most small business don’t yet. According to Vanessa Fox, Author of Marketing in the Age of Google (HIGHLY recommended), “Only 44% of small business even have a Website.”

Most small business don’t want to spend the money

This is huge! Most small business don’t think they can afford to connect with customers outside of traditional marketing. That 56% if you missed it.

56% of small businesses are not thinking about the web yet. On Google, that means most small business can get ahead of their competitors 56%.

So, how much will that website cost you? Well, it depends on what you want, who you get your website from, and what their rate is.

Now, You can probably find someone who can build you a site for under $300. Just remember, what you put in is what you get out, and I’m not talking time. Its more like, garbage in garbage out.

Before I close here, I don’t want to leave a bad taste in your mouth. I want you to get pumped! This is an amazing opportunity. There is simply no reason to be overwhelmed.

Here are a few suggestions

1. Start small! Do not go in all at once. Facebook Pages and Twitter are free. Try them out right now! Go ahead, Google them… Google how to make a Facebook Page.
2. Find a consultant. You don’t need to be the expert. Its important to find a good consultant for digital marketing.
3. Don’t be cheap if you can help it. Have a defined budget. Know what your online brand is worth. It might be more than you think.
4. Read blogs on the topic. Find a good marketing blog and follow it. Some of the most relevant people in the industry, Chirs Brogan, Mitch Joel, and Seth Godin, give their knowledge away for free.

Download all examples to get started!

Let’s get to know the CSS background-position property. When you decide to use a background attachment, such as an image, background-position specifies its initial position.

Basically, the property tells your image where it should appear within the element we are working with. The default position for the image will always be the left top corner of the element.

If you want to change that position you need to declare the property in our CSS and add two values. The first value plots your image on the horizontal x coordinate and the second on the vertical y coordinate.

.object {
height: 150px;
width: 150px;
background-attachment: url(bg.gif);
background-repeat: no-repeat;
background-position: 0 0; }

(View Example)

Even though we declared the position in the example, to (x)0px and (y)0px, you do not need to declare this position. Remember, if no position is declared the browser will assume (x)0px and (y)0px by default.

The Values

So, background-position can use up to two values. The values can be keywords, percentages, and lengths (e.g. px, em, etc.). If you declare only one value the second, the y coordinate, will always be 50%, or center.

.object {
background-position: 100%; }

(View Example)

To keep things simple I personally avoid keywords because they have percentage equivalents. I also, reject the notion of ems, because they are not necessary and add unneeded confusion. Remember, if you have a nail use a hammer.

Pixels

Pixels are a bit odd and not because of rendering, your browser is the real issue here.

Browsers use a vertically flipped x/y graph to plot pixels. They do this for a few reasons, but that is for another time and place. All you need remember is that the positive side of the chart starts at the left top corner and works its way to the right bottom.

When declaring your position with pixels the image anchor point will be the left top corner, not be be confused with the default image position.

.object {
background-position: 0 -25px; }

(View Example)

Percentages

If pixels are not working for you percentages might do the trick, if you don’t get tangled in their web.

When you declare a percentage as the value of the background-position property, it’s lined up based on two points.

1. The percentage of the image, as declared
2. The percentage of the element, as declared

This is hard to explain, but basically, when you declare a percentage it takes that percent, say 75%, and lines the axis of the image, at 75%, to that of the element, at 75%.

Let’s imagine together that we have a long and short stick. There they are, on a table, horizontal to your shoulders and parallel to one another, separated by about an inch.

I hand you a brand new vibrant red sharpie.

Now mark the long stick with the red sharpie, about 75% down from the left side. Next, pick up the small stick and measure down from left side, about 75% of its width, and mark the spot with the same sharpie.

Perfect! Now take both sticks and line them up so the marks are next to each other. That is how the browser lines up background images to their elements.

It does not matter if the image or the element is bigger, it doesn’t matter if they are the same size. That’s how it works, nice and simple… just hard to explain.

.object {
background-position: 75% 0; }

(View Example)

The only time percentages get really confusing is when you declare say… 200% or -10%.

Defaults

• If you only specify one value the second is set to 50%, or center
• Images always assume their position at the left top

Reminders

• x/y graph is flipped on its head
• Percentages apply to both the image and element and line up at their respective percentages
• When declaring values the horizontal plot is first, the second is vertical
• If you want your image to be in the left top corner you do not need to set the property
• Avoid, keywords and ems

Learn More

• Sitepoint Reference: background-position
• Snook: Background Position X and Y
• Background Image Parallax Effect
• CSS Background Sprites